zoukankan      html  css  js  c++  java
  • 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,
                    }
                ]
            };
        }

  • 相关阅读:
    BZOJ 3531[Sdoi2014]旅行
    BZOJ4998 星球联盟
    BZOJ2959 长跑
    【北京集训D2T3】tvt
    [Bzoj]5343: [Ctsc2018]混合果汁
    HGOI20190810 省常中互测3
    HGOI20190809 省常中互测2
    HGOI20190808 省常中互测1
    组合排列和组合数 学习笔记
    2-SAT (two-statisfiability) 算法 学习笔记
  • 原文地址:https://www.cnblogs.com/wscw/p/12428028.html
Copyright © 2011-2022 走看看