ECharts常用圖例

最近做了一個統計報表的功能，畫了一周的原型圖，一直找，找到了很多插件圖，最后選擇用下面幾個圖：

1.柱形圖：

var jdData = ['DSCY處','RJHXXFW處','SCXFWY處','ZDZX辦公室','JSJB處','YJ室','XZ辦公室','LGB處','ZZ處','XZLD辦公室']
var data1 = [100,80,65,32,30,28,28,9,8,5];
option = {
    baseOption: {
    timeline: {
        axisType: 'category',
        show: false,
        autoPlay: false,
    },
        backgroundColor:'#091C3D',
        title: {

            'text': '',
            'subtext': '',
            textStyle:{
                color:'#fff'
                },
            left:'center'
        },
        tooltip: {
            'trigger': 'axis'
        },

        calculable: true,
        grid: {
            left: '2%',
            right: '2%',
            bottom: '12%',
            top:'4%',
            containLabel: true
        },
        label:{
            normal:{
                textStyle:{
                    color:'#fff'
                    }
                }
            },
        xAxis: [{
            splitNumber:0,
            'type': 'category',
            data: jdData,
            nameTextStyle:{
                color:'#fff'
                },
            axisLabel:{
                rotate:45,
                textStyle:{
                    fontSize:18,
                    color:'#fff',
                },
                interval: 0
            },
            axisLine:{
                lineStyle:{
                    color:'#fff'
                   },
                },
           
                
        }],
        yAxis: [{
            'type': 'value',
            'name': '', 
            splitNumber:0,
            nameTextStyle:{
                color:'#56617b'
                },
            axisLine:{
                show:false,
                lineStyle:{
                    color:'#56617b'
                   }
                },
            axisLabel: {
                textStyle:{
                    fontSize:18,
                    color:'#fff',
                },
                formatter: '{value} '
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#56617b'
                }
             },
        }],
        series: [{
            'name': '',
            'type': 'bar',
            markLine : {
                label:{
                    normal:{
                        show:false
                        }
                    },
                lineStyle:{
                    normal:{
                        color:'red',
                        width:3
                        }
                    }, 
            },
            barWidth:'50%',
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#eb4848','#eb6449','#eb7f49','#eb9a49','#ebb549',
                           '#ebd049','#ebeb49','#d0eb49','#b5eb49','#9aeb49'
                        ];
                        return colorList[params.dataIndex]
                    },
                    
                }
            },
        }]
    },
    options: [ {
        title: {
            'text': ''
        },
        series: [{
            'data': data1
        }]
    }, ]
};

2.餅圖

var data = [{
    "value": 23988,
    "name": "對外經貿合作"
}, {
    "value": 23017,
    "name": "科技"
}, {
    "value": 21013,
    "name": "文化體育"
}, {
    "value": 18650,
    "name": "金融"
}, {
    "value": 17820,
    "name": "教育"
}, {
    "value": 17356,
    "name": "基礎設施"
}, {
    "value": 17355,
    "name": "物流"
}, {
    "value": 17343,
    "name": "能源"
}, {
    "value": 14928,
    "name": "鐵路"
}, {
    "value": 14752,
    "name": "國內貿易"
}, {
    "value": 12484,
    "name": "旅游"
}, {
    "value": 9184,
    "name": "農林牧漁"
}, {
    "value": 8999,
    "name": "重大項目"
}, {
    "value": 8108,
    "name": "環境保護"
}, {
    "value": 7985,
    "name": "公路"
}, {
    "value": 7720,
    "name": "電力"
}, {
    "value": 7684,
    "name": "民航"
}, {
    "value": 7487,
    "name": "醫葯衛生"
}, {
    "value": 7318,
    "name": "信息產業"
}, {
    "value": 7141,
    "name": "民族宗教"
}];
var count_num = 0;
for (var m in data) {
    count_num = count_num + data[m]['value']
}
/*for (var n  in data){
    data[n]['name'] = data[n]['name'] + ' '+((data[n]['value']/count_num)*100).toFixed(1) +'%'
}*/

option = {
    backgroundColor: "#000",
    title: {
        text: '“一帶一路”沿線省區市關注領域',
        subtext: '純屬虛構',
        x: 'center',
        top: '30',
        textStyle: {
            color: "#fff",
        }
    },
    //顯示series中信息，提示框組件
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    series: [{
        type: 'pie', //圖表類型，柱狀圖：bar
        //餅圖：pie  (南丁格爾圖在series中加上roseType:’angle’)移開后不顯示原來信息
        radius: '55%', //半徑
        center: ['50%', '50%'],
        label: {
            formatter: "{b}+{d}%"
        },
        data: data,
        itemStyle: { //itemStyle有正常顯示：normal，有鼠標hover的高亮顯示：emphasis
            emphasis: { //normal顯示陰影,與shadow有關的都是陰影的設置
                shadowBlur: 10, //陰影大小
                shadowOffsetX: 0, //陰影水平方向上的偏移
                shadowColor: 'rgba(0, 0, 0, 0.5)' //陰影顏色
            }
        }
    }]
};

3.橫向柱狀圖：

option = {
     backgroundColor:'#091C3D',
    color: ["#cd5c5c"],
    textStyle: {
        color: '#fff'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: "{a} <br/>{b} : {c}台"
    },

    grid: {

        containLabel: true
    },
    xAxis: {

        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine:{
            lineStyle:{
            color:'#fff'
                      },
                  },
        "axisLabel": {
            "interval": 0,
            fontSize: 18,
            formatter: '{value}',
        }
    },
    yAxis: {
         axisLine:{
            lineStyle:{
            color:'#fff'
                      },
                  },
        "axisLabel": {
            "interval": 0,
            fontSize: 18,
        },
        type: 'category',
        data: [
            '綜合辦事大廳',
            '公共會議室',
            'XXAQ處',
            'XYGL處',
            'JGSW管理局',   
            '物業辦公室',
            'XF辦公室',
            'XTGH',
            'TGW',
            '值班室',
            '車隊',
            '行政后勤',
            'XXZX',
            'DSCY處',
            'DZXXCY處',
            'XCL處',
            'SCXFWY處',
            'YQFW處',
            'JGPT處',
            'GXGC處',
            'JSJB處',
            
        ].reverse()
    },
    series: [{
        name: '活躍終端數量：',
        type: 'bar',
    
        data: [19,19, 17,  13,10, 10,10, 10, 9, 9, 8, 7,7, 7, 4, 4, 4,4, 1,1, 0].reverse(),

    }]
};

4.折線圖：

 option = {
     backgroundColor: '#091C3D',
     title: {},
     tooltip: {
         trigger: 'axis'
     },
     legend: {
         splitNumber: 0,
         data: ['活躍數', '閑置數'],
         nameTextStyle: {
             color: '#fff'
         },
     },
     toolbox: {
         show: true,
         feature: {
             dataZoom: {},
             dataView: {
                 readOnly: false
             },
             magicType: {
                 type: ['line', 'bar']
             },
             restore: {},
             saveAsImage: {}
         }
     },
     xAxis: [{
         type: 'category',
         boundaryGap: false,
         data: ['00:30:00', '01:00:00', '01:30:00', '02:00:00', '02:30:00', '03:00:00', '03:30:00', '04:00:00', '04:30:00', '05:00:00', '05:30:00', '06:00:00', '06:30:00', '07:00:00', '07:30:00', '08:00:00', '08:30:00', '09:00:00', '09:30:00', '10:00:00', '10:30:00', '11:00:00', '11:30:00', '12:00:00',
             '12:30:00', '13:00:00', '13:30:00', '14:00:00', '14:30:00', '15:00:00', '15:30:00', '16:00:00', '16:30:00', '17:00:00', '17:30:00', '18:00:00', '18:30:00', '19:00:00', '19:30:00', '20:00:00', '20:30:00', '21:00:00', '21:30:00', '22:00:00', '22:30:00', '23:00:00', '23:30:00', '24:00:00'
         ],
     }],
     yAxis: [{
         type: 'value',
         axisLabel: {
             textStyle: {
                 fontSize: 18,
                 color: '#fff',
             },
             formatter: '{value} '
         },
         axisLine: {
             show: true,
             lineStyle: {
                 color: '#fff'
             }
         },
     }],
     series: [{
             name: '活躍數',
             type: 'line',
             data: [58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 120, 120, 125, 126, 125, 120, 128, 120, 120, 120, 120, 120, 125, 126, 125, 120, 128, 85, 85, 80, 80, 60, 60, 60, 60, 60, 60, 60, 60, 60, ],
             markPoint: {
                 data: [{
                         type: 'max',
                         name: '最大值'
                     },
                     {
                         type: 'min',
                         name: '最小值'
                     }
                 ]
             },
             markLine: {
                 data: [{
                     type: 'average',
                     name: '平均值'
                 }]
             }
         },
         {
             name: '閑置數',
             type: 'line',
             data: [21, 28, 25, 22, 26, 32, 35, 39, 28, 26, 20, 28, 24, 26, 26, 25, 35, 39, 28, 26, 20, 28, 24, 28, 24, 26, 26, 25, 35, 39, 28, 26, 32, 35, 39, 28, 26, 20, 28, 24, 26, 26, 25, 35, 39, 28, 26, 20, 28, 24, ],
             markPoint: {
                 data: [{
                         type: 'max',
                         name: '最大值'
                     },
                     {
                         type: 'min',
                         name: '最小值'
                     }
                 ]
             },
             markLine: {
                 data: [{
                     type: 'average',
                     name: '平均值'
                 }]
             }
         }
     ]
 };