echart使用实例
echart配置参数:res为后台返回值,datArr为日期数组[2/01,2/02.....2/28]
function opt(res,dayArr) { return option = { tooltip: {}, legend: { data:['检测人数','正常人数','异常人数'], textStyle:{ color:'#fff' }, right:0, icon: "circle", itemWidth: 14, itemHeight: 14, itemGap: 14 }, grid:{ left:30, right:42, top:30, bottom:30, }, xAxis: { data: dayArr, axisLabel:{ textStyle:{ color:'#ACB2CC', fontSize:'10px' } }, axisLine:{ lineStyle:{ color:'#383E55' } } }, yAxis: [{ type: 'value', name:'学校人数', minInterval: 1, axisLabel:{ textStyle:{ color:"#ACB2CC" } }, nameTextStyle:{ color:"#FFFFFF", fontSize:14, }, splitLine:{ lineStyle:{ color:"#383E55" } } },{ type: 'value', name: '', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value} %', textStyle:{ color:"#ACB2CC" } }, nameTextStyle:{ color:"#FFFFFF", fontSize:14, }, splitLine:{ show:false } }], series: [{ name: '检测人数', type: 'line', data: res.result.takenPeopleCounts, itemStyle:{ color:'#B9A4F4' }, smooth: true, showSymbol: false, },{ name: '正常人数', type: 'line', data: res.result.normalPeopleCounts, itemStyle:{ color:'#01F8DB' }, smooth: true, showSymbol: false, },{ name: '异常人数', type: 'line', data: res.result.abnormalPeopleCounts, itemStyle:{ color:'#FEA5E1' }, smooth: true, showSymbol: false, } ] }; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)