关于echarts

1.bar

option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            color:['#07a6ba''],
            grid: {
                x:10,
                y:15,
                x2:20,
                y2:50,
                containLabel: true
            },
            xAxis:  {
                type: 'value',
                axisLabel: {
                    interval: 0,
                    margin: 2,
                    textStyle: {
                        color: "#5e859e"
                    }
               },
               axisLine:{
                   lineStyle:{
                       color:'#5e859e',
                       width:2//这里是为了突出显示加上的
                   }
               },
               splitLine:{
                   show:false
               }
           },
           yAxis: {
               type: 'category',
               data:data.categories.split(","),
               axisLabel: {
                   textStyle: {
                       color: '#5e859e'**//坐标数据的颜色**
                   },
                   formatter: function(value) {
                       if (value.length > 8) {
                           return value.substring(0, 8) + "...";
                       } else {
                           return value;
                       }
                   }//文字过长省略
               },
               axisLine:{
                   lineStyle:{
                       color:'#5e859e',**//坐标线的颜色**
                       width:2//这里是为了突出显示加上的
                   }
               }
           },
           series: [
               {
                   name: '总数',
                   type: 'bar',
                   stack: '总量',
                   label: {
                       normal: {
                           show: true,
                           position: 'insideRight'
                       }
                   },
                   barWidth : 8,//柱子宽度
                   data: data.dataList,
                   symbolSize:2,
                   itemStyle: {
                       normal: {
                           // color:['#07a6ba','#4bc0c9','#3b56d9','#dbbb32','03ecef','#8648e7','#0fb2db']
                           color: function(params) {//**每个柱子颜色不一样**
                               var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB'];
                               return colorList[params.dataIndex]
                           }
                       }
                   }
               }
           ]
       }；

2.bar

 option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                x:10,
                y:15,
                x2:20,
                y2:50,
                containLabel: true
            },
            color:['#04dfe2'],
            xAxis : [
                {
                    type : 'category',
                    data.data.category.split(","),
                    axisLabel: {
                        textStyle: {
                            color: "#5e859e"
                        },
                        formatter: function(value) {
                            if (value.length > 7) {
                                return value.substring(0, 7);
                            } else {
                                return value;
                            }
                        }**//文字过长省略**
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#5e859e',
                            width:2//这里是为了突出显示加上的
                        }
                    },
                    splitLine:{
                        show:false
                    }
                }
            ],
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0,
                    margin: 2,
                    textStyle: {
                        color: "#5e859e"
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#5e859e',
                        width:2//这里是为了突出显示加上的
                    }
                }
            },
            series : [
                {
                    name:'总量',
                    type:'bar',
                    data: data.dataList,
                    barWidth :8,
                    itemStyle: {
                        normal: {
                            // color:['#07a6ba','#4bc0c9','#3b56d9','#dbbb32','03ecef','#8648e7','#0fb2db']
                            color: function(params) {//柱子颜色
                                var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };

3.line

   option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[
                    {name: '人脸抓拍',
                        textStyle:{color:"#fff"}
                    },
                    {name:'车辆抓拍',
                        textStyle:{color:"#fff"}
                    },
                    {name: '门禁感知',
                        textStyle:{color:"#fff"}
                    },
                    {name:'水电煤感知',
                        textStyle:{color:"#fff"}
                    }
                ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            /*toolbox: {保存图标
                feature: {
                    saveAsImage: {}
                }
            },*/
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#5e859e',
                        width: 2
                    }
                },
                boundaryGap: false,
                data: [2, 4, 6, 8, 10, 12, 14,16,18,20,22,24]
                // data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',//设置坐标轴字体颜色和宽度
                axisLine: {
                    lineStyle: {
                        color: '#5e859e',
                        width: 2
                    }
                }
            },
            series: [
                {
                    name:'人脸抓拍',
                    type:'line',
                    stack: '总量',
                    color:'#3d55da',
                    data:[120, 132, 101, 134, 90, 230, 210,120,150,168,215,149]
                },
                {
                    name:'车辆抓拍',
                    type:'line',
                    stack: '总量',
                    color:'#d08028',
                    data:[220, 182, 191, 234, 290, 330, 310,101, 134, 90, 230, 210]
                },
                {
                    name:'门禁感知',
                    type:'line',
                    stack: '总量',
                    color:'#c55839',
                    data:[10, 32, 51, 154, 190, 330, 110,191, 234, 290, 130, 38]
                },
                {
                    name:'水电煤感知',
                    type:'line',
                    stack: '总量',
                    color:'#ccac20',
                    data:[120, 82, 201, 34, 90, 30, 120, 132, 201, 254, 190, 130]
                }
            ]
        };