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,
                }
            ]
        };
    }
复制代码

posted @   曹伟666  阅读(205)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示