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,
                    }
                ]
            };
        }

  • 相关阅读:
    跨期套利策略
    读书笔记 量化交易:如何建立自己的算法交易事业
    ESP8266固件修改可以控制多个IO方法
    ESP8266固件烧录方法
    关于毕设WiFi选型
    关于(x&y)+((x^y)>>1)的探究
    QML添加右键菜单
    初学QML之QML和C++混合方法
    初学QML之qmlRegisterType
    我的第一个QML Button的实现
  • 原文地址:https://www.cnblogs.com/wscw/p/12428028.html
Copyright © 2011-2022 走看看