最近做了一个统计报表的功能，画了一周的原型图，一直找，找到了很多插件图，最后选择用下面几个图：
1.柱形图：
1var jdData = ['DSCY处','RJHXXFW处','SCXFWY处','ZDZX办公室','JSJB处','YJ室','XZ办公室','LGB处','ZZ处','XZLD办公室'] 2var data1 = [100,80,65,32,30,28,28,9,8,5]; 3option = { 4 baseOption: { 5 timeline: { 6 axisType: 'category', 7 show: false, 8 autoPlay: false, 9 }, 10 backgroundColor:'#091C3D', 11 title: { 12 13 'text': '', 14 'subtext': '', 15 textStyle:{ 16 color:'#fff' 17 }, 18 left:'center' 19 }, 20 tooltip: { 21 'trigger': 'axis' 22 }, 23 24 calculable: true, 25 grid: { 26 left: '2%', 27 right: '2%', 28 bottom: '12%', 29 top:'4%', 30 containLabel: true 31 }, 32 label:{ 33 normal:{ 34 textStyle:{ 35 color:'#fff' 36 } 37 } 38 }, 39 xAxis: [{ 40 splitNumber:0, 41 'type': 'category', 42 data: jdData, 43 nameTextStyle:{ 44 color:'#fff' 45 }, 46 axisLabel:{ 47 rotate:45, 48 textStyle:{ 49 fontSize:18, 50 color:'#fff', 51 }, 52 interval: 0 53 }, 54 axisLine:{ 55 lineStyle:{ 56 color:'#fff' 57 }, 58 }, 59 60 61 }], 62 yAxis: [{ 63 'type': 'value', 64 'name': '', 65 splitNumber:0, 66 nameTextStyle:{ 67 color:'#56617b' 68 }, 69 axisLine:{ 70 show:false, 71 lineStyle:{ 72 color:'#56617b' 73 } 74 }, 75 axisLabel: { 76 textStyle:{ 77 fontSize:18, 78 color:'#fff', 79 }, 80 formatter: '{value} ' 81 }, 82 splitLine:{ 83 show:true, 84 lineStyle:{ 85 color:'#56617b' 86 } 87 }, 88 }], 89 series: [{ 90 'name': '', 91 'type': 'bar', 92 markLine : { 93 label:{ 94 normal:{ 95 show:false 96 } 97 }, 98 lineStyle:{ 99 normal:{ 100 color:'red', 101 width:3 102 } 103 }, 104 }, 105 barWidth:'50%', 106 itemStyle: { 107 normal: { 108 color: function(params) { 109 // build a color map as your need. 110 var colorList = [ 111 '#eb4848','#eb6449','#eb7f49','#eb9a49','#ebb549', 112 '#ebd049','#ebeb49','#d0eb49','#b5eb49','#9aeb49' 113 ]; 114 return colorList[params.dataIndex] 115 }, 116 117 } 118 }, 119 }] 120 }, 121 options: [ { 122 title: { 123 'text': '' 124 }, 125 series: [{ 126 'data': data1 127 }] 128 }, ] 129};
2.饼图
1var data = [{ 2 "value": 23988, 3 "name": "对外经贸合作" 4}, { 5 "value": 23017, 6 "name": "科技" 7}, { 8 "value": 21013, 9 "name": "文化体育" 10}, { 11 "value": 18650, 12 "name": "金融" 13}, { 14 "value": 17820, 15 "name": "教育" 16}, { 17 "value": 17356, 18 "name": "基础设施" 19}, { 20 "value": 17355, 21 "name": "物流" 22}, { 23 "value": 17343, 24 "name": "能源" 25}, { 26 "value": 14928, 27 "name": "铁路" 28}, { 29 "value": 14752, 30 "name": "国内贸易" 31}, { 32 "value": 12484, 33 "name": "旅游" 34}, { 35 "value": 9184, 36 "name": "农林牧渔" 37}, { 38 "value": 8999, 39 "name": "重大项目" 40}, { 41 "value": 8108, 42 "name": "环境保护" 43}, { 44 "value": 7985, 45 "name": "公路" 46}, { 47 "value": 7720, 48 "name": "电力" 49}, { 50 "value": 7684, 51 "name": "民航" 52}, { 53 "value": 7487, 54 "name": "医药卫生" 55}, { 56 "value": 7318, 57 "name": "信息产业" 58}, { 59 "value": 7141, 60 "name": "民族宗教" 61}]; 62var count_num = 0; 63for (var m in data) { 64 count_num = count_num + data[m]['value'] 65} 66/*for (var n in data){ 67 data[n]['name'] = data[n]['name'] + ' '+((data[n]['value']/count_num)*100).toFixed(1) +'%' 68}*/ 69 70option = { 71 backgroundColor: "#000", 72 title: { 73 text: '“一带一路”沿线省区市关注领域', 74 subtext: '纯属虚构', 75 x: 'center', 76 top: '30', 77 textStyle: { 78 color: "#fff", 79 } 80 }, 81 //显示series中信息，提示框组件 82 tooltip: { 83 trigger: 'item', 84 formatter: "{a} <br/>{b} : {c} ({d}%)" 85 }, 86 87 series: [{ 88 type: 'pie', //图表类型，柱状图：bar 89 //饼图：pie (南丁格尔图在series中加上roseType:’angle’)移开后不显示原来信息 90 radius: '55%', //半径 91 center: ['50%', '50%'], 92 label: { 93 formatter: "{b}+{d}%" 94 }, 95 data: data, 96 itemStyle: { //itemStyle有正常显示：normal，有鼠标hover的高亮显示：emphasis 97 emphasis: { //normal显示阴影,与shadow有关的都是阴影的设置 98 shadowBlur: 10, //阴影大小 99 shadowOffsetX: 0, //阴影水平方向上的偏移 100 shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色 101 } 102 } 103 }] 104};
3.横向柱状图：
1option = { 2 backgroundColor:'#091C3D', 3 color: ["#cd5c5c"], 4 textStyle: { 5 color: '#fff' 6 }, 7 tooltip: { 8 trigger: 'axis', 9 axisPointer: { 10 type: 'shadow' 11 }, 12 formatter: "{a} <br/>{b} : {c}台" 13 }, 14 15 grid: { 16 17 containLabel: true 18 }, 19 xAxis: { 20 21 type: 'value', 22 boundaryGap: [0, 0.01], 23 axisLine:{ 24 lineStyle:{ 25 color:'#fff' 26 }, 27 }, 28 "axisLabel": { 29 "interval": 0, 30 fontSize: 18, 31 formatter: '{value}', 32 } 33 }, 34 yAxis: { 35 axisLine:{ 36 lineStyle:{ 37 color:'#fff' 38 }, 39 }, 40 "axisLabel": { 41 "interval": 0, 42 fontSize: 18, 43 }, 44 type: 'category', 45 data: [ 46 '综合办事大厅', 47 '公共会议室', 48 'XXAQ处', 49 'XYGL处', 50 'JGSW管理局', 51 '物业办公室', 52 'XF办公室', 53 'XTGH', 54 'TGW', 55 '值班室', 56 '车队', 57 '行政后勤', 58 'XXZX', 59 'DSCY处', 60 'DZXXCY处', 61 'XCL处', 62 'SCXFWY处', 63 'YQFW处', 64 'JGPT处', 65 'GXGC处', 66 'JSJB处', 67 68 ].reverse() 69 }, 70 series: [{ 71 name: '活跃终端数量：', 72 type: 'bar', 73 74 data: [19,19, 17, 13,10, 10,10, 10, 9, 9, 8, 7,7, 7, 4, 4, 4,4, 1,1, 0].reverse(), 75 76 }] 77};
4.折线图：
1 option = { 2 backgroundColor: '#091C3D', 3 title: {}, 4 tooltip: { 5 trigger: 'axis' 6 }, 7 legend: { 8 splitNumber: 0, 9 data: ['活跃数', '闲置数'], 10 nameTextStyle: { 11 color: '#fff' 12 }, 13 }, 14 toolbox: { 15 show: true, 16 feature: { 17 dataZoom: {}, 18 dataView: { 19 readOnly: false 20 }, 21 magicType: { 22 type: ['line', 'bar'] 23 }, 24 restore: {}, 25 saveAsImage: {} 26 } 27 }, 28 xAxis: [{ 29 type: 'category', 30 boundaryGap: false, 31 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', 32 '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' 33 ], 34 }], 35 yAxis: [{ 36 type: 'value', 37 axisLabel: { 38 textStyle: { 39 fontSize: 18, 40 color: '#fff', 41 }, 42 formatter: '{value} ' 43 }, 44 axisLine: { 45 show: true, 46 lineStyle: { 47 color: '#fff' 48 } 49 }, 50 }], 51 series: [{ 52 name: '活跃数', 53 type: 'line', 54 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, ], 55 markPoint: { 56 data: [{ 57 type: 'max', 58 name: '最大值' 59 }, 60 { 61 type: 'min', 62 name: '最小值' 63 } 64 ] 65 }, 66 markLine: { 67 data: [{ 68 type: 'average', 69 name: '平均值' 70 }] 71 } 72 }, 73 { 74 name: '闲置数', 75 type: 'line', 76 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, ], 77 markPoint: { 78 data: [{ 79 type: 'max', 80 name: '最大值' 81 }, 82 { 83 type: 'min', 84 name: '最小值' 85 } 86 ] 87 }, 88 markLine: { 89 data: [{ 90 type: 'average', 91 name: '平均值' 92 }] 93 } 94 } 95 ] 96 };