ECharts 常用统计图
ECharts 常用统计图
一、地图
1、代码实现
//地图调用 getDetailsMap("echartsMap", map_qu_name, map_qu_num, "人数", sName); //地图JS function getDetailsMap(v_id, map_name, map_num, dw, v_name, ratio) { var myChart = echarts.init(document.getElementById(v_id)); myChart.clear(); var mapName = []; //地区名字 for (var i = 0; i < map_name.length; i++) { mapName.push({ name: map_name[i], value: map_num[i], label: { normal: { show: true, formatter: function (params) { return ratio ? params.name+"\n"+ params.value + "%" : params.name+"\n"+ params.value; //地图上展示文字 + 数值 }, } }, itemStyle: { normal: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#073684' // 0% 处的颜色 }, { offset: 1, color: '#061E3D' // 100% 处的颜色 }], }, borderColor: '#4ce2ff', borderWidth: 1, }, emphasis: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#073684' // 0% 处的颜色 }, { offset: 1, color: '#061E3D' // 100% 处的颜色 }], }, } } }) } //若涉及市州下区县展示,需下载相应JSON文件 var url; if(v_name == '吉林省'){ url = '../../workspace/jy/leaderviewjl/json/jilinnew.json'; } else if (v_name == '2201') { url = '../../workspace/jy/leaderviewjl/json/changchun.json'; } else if (v_name == '2202') { url = '../../workspace/jy/leaderviewjl/json/jilinshi.json'; } else if (v_name == '2203') { url = '../../workspace/jy/leaderviewjl/json/siping.json'; } else if (v_name == '2204') { url = '../../workspace/jy/leaderviewjl/json/liaoyuan.json'; } else if (v_name == '2205') { url = '../../workspace/jy/leaderviewjl/json/tonghua.json'; } else if (v_name == '2206') { url = '../../workspace/jy/leaderviewjl/json/baishan.json'; } else if (v_name == '2207') { url = '../../workspace/jy/leaderviewjl/json/songyuan.json'; } else if (v_name == '2208') { url = '../../workspace/jy/leaderviewjl/json/baicheng.json'; } else if (v_name == '2224') { url = '../../workspace/jy/leaderviewjl/json/yanbian.json'; } $.get(url, function (geoJson) { // myChart.hideLoading(); echarts.registerMap('jilin', geoJson); myChart.setOption(option = { tooltip: { trigger: 'item', formatter: ratio ? '{b}<br/>' + dw + ':{c}%' : '{b}<br/>' + dw + ':{c}人' }, geo: { map: 'jilin', zoom: 1.1, roam: false, itemStyle: { normal: { areaColor: '#013C62', shadowColor: '#182f68', shadowOffsetX: 0, shadowOffsetY: 25 }, emphasis: { areaColor: '#2AB8FF', borderWidth: 0, color: 'green', label: { show: false } } } }, series: [ { type: 'map', roam: false, mapType: 'jilin', geoIndex: 1, aspectScale: 0.75, //长宽比 zoom: 1.1, showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: true, textStyle: { fontSize: 16, color: '#fff', fontFamily: 'cursive' } }, emphasis: {//对应的鼠标悬浮效果 show: true, textStyle: { fontSize: 22, color: "#fff", fontFamily: 'cursive' } } }, itemStyle: { normal: { borderColor: '#2ab8ff', borderWidth: 1, areaColor: '#12235c' }, emphasis: { areaColor: '#2AB8FF', borderWidth: 2, color: 'green' } }, data: mapName } ] }); }); //地图点击事件 myChart.on('click', function (param) { var selected = param.name; if (selected) { switch (selected) { case '长春市': break; case '吉林市': break; case '四平市': break; case '辽源市': break; case '通化市': break; case '白山市': break; case '松原市': break; case '白城市': break; case '延边朝鲜族自治州': break; case selected: break; } } }); }
2、地图效果图
二、折线图(也可当柱状图-单条)
1、代码实现
//折线图调用 getBarY("chartsLine", "", line_name, line_num, 'line', '8%', '2.5%', '4%', '20%', colorList, false); //柱状图-单条调用 getBarY("chartsBar", "", line_name, line_num, 'bar', '8%', '2.5%', '4%', '20%', colorList, false); //折线图JS function getBarY(v_id, v_title, v_data_name, v_data_cnt, v_type, v_x, v_x2, v_y, v_y2, colorList, isShowZoom) { var myChart = echarts.init(document.getElementById(v_id)); myChart.clear(); option = { title: { text: '', subtext: '' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, color: colorList, legend: { data: [] }, grid: { top: v_x, left: v_x2, right: v_y, bottom: v_y2, containLabel: true }, xAxis: { type: 'category', data: v_data_name, splitLine : { show : false }, axisLabel : { textStyle : { color : '#3678ff' }, interval: 0, rotate: 25 //文字倾斜度 }, axisTick : { show : false }, axisLine : { lineStyle : { color : '#234DB4', width : 2 } } }, yAxis: { type: 'value', nameTextStyle : { color : '#3678ff' }, splitLine : { show : false }, axisLabel : { textStyle : { color : '#3678ff' } }, axisTick : { show : false }, axisLine : { lineStyle : { color : '#234DB4', width : 2 } } }, series: [{ name: [], type: v_type, showAllSymbol: true, symbol: 'circle', symbolSize: 15, barWidth: '15', data: v_data_cnt, label: { normal: { show: true, position: 'top', textStyle: { color: '#fff' } } }, itemStyle: { normal: { color: function(params) { var color_list = colorList; return color_list[params.dataIndex] }, borderColor: "#fff", borderWidth: 2, shadowColor: 'rgba(0, 0, 0, .3)', shadowBlur: 0, shadowOffsetY: 2, shadowOffsetX: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(108,80,243,0.5)' }, { offset: 1, color: 'rgba(108,80,243,0.1)' }], false ) } } }], dataZoom: [{ start: 0, // 滚动条开始范围 end: v_data_name.length > 25 ? 40 : 100, // 滚动条结束范围 show: isShowZoom ? true : false, // 是否显示滚动条 xAxisIndex: [0], textStyle: { color: '#b1d4ff' // 显示字的颜色 }, bottom: 20, backgroundColor: 'rgba(53,142,255,0.1)', // 背景颜色 height: 20, // 滚动条高度 handleSize: 20, // 手柄高度 showDataShadow: true, // 显示数据阴影 // 数据走势部分的颜色 dataBackground: { areaStyle: { opacity: 0.5, // 走势区域的透明度 color: '#7662ee' // 走势区域的颜色 }, lineStyle: { opacity: 1, // 走势线条的透明度 color: '#7662ee' // 走势区域的颜色 } }, handleStyle: { color: '#b1d4ff', // 手柄颜色 shadowBlur: 8, // 阴影长度 shadowColor: 'rgba(0, 0, 0, 0)',// 阴影颜色 shadowOffsetX: 2, // 手柄本身的阴影 X 偏移。 shadowOffsetY: 2 // 手柄本身的阴影 Y 偏移。 }}, { type: 'inside'// 鼠标滚动效果 }] }; myChart.setOption(option); }
注:shadowColor、shadowBlur这俩属性IE加上会报错(IE11、10、9、8都试过)
areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(108,80,243,0.3)' }, { offset: 1, color: 'rgba(108,80,243,0)' }], false ), shadowColor: 'rgba(108,80,243, 0.9)', //IE加上这个属性就会报错 shadowBlur: 20 //IE加上这个属性就会报错 } }
2、折线图效果
3、柱状图效果-单条
三、柱状图-多条
1、代码实现
//柱状图-多条调用 getDoubleBarY('bar_echarts', bar_name, [bar_jhNum, bar_sjNum], ['计划完成:' + jhwc_count, '实际完成:' + zxjy_count], '地区', '人数(人)', '2%', '8%', '20%', '13%'); //柱状图多条JS function getDoubleBarY(b_id, data_name, data_num, legend_name, x_util, y_util, v_x, v_x1, v_y, v_y1) { var myChart = echarts.init(document.getElementById(b_id)); myChart.clear(); var data = []; var dataList; var series = []; var seriesList; var color = ["#02c3f1", "#53e568", "#a154e9"]; for(var i = 0; i < legend_name.length; i++){ dataList = { name: legend_name[i], textStyle: { color: color[i] } }; data.push(dataList); seriesList = { name: legend_name[i], type: 'bar', data: data_num[i], barWidth: '10', label: { show: true, formatter: "{a|}", color: "#fff", position: "top", distance: -10, backgroundColor: color[i], padding: 4, borderRadius: 15, rich: { a: { width: 6, height: 6, borderRadius: 6, lineHeight: 6, backgroundColor: "#fff" } } }, itemStyle: { normal: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: color[i] // 0% 处的颜色 }, { offset: 1, color: "#1F4869" // 100% 处的颜色 } ] } } } }; series.push(seriesList); } option = { color: ['#3678ff'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { itemWidth: 0, data: data, formatter: function (name) { return "█ " + name; } }, grid: { left: v_x, right: v_x1, top: v_y, bottom: v_y1, containLabel: true }, xAxis: [{ name: x_util, nameTextStyle: { color: '#3678ff' }, type: 'category', data: data_name, splitLine: { show: false }, axisLabel: { textStyle : { color : '#3678ff' }, interval: 0, rotate: 45 //文字倾斜度 }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#234DB4', width: 2 } } }], yAxis: [{ name: y_util, nameTextStyle: { color: '#3678ff' }, type: 'value', splitLine: { show: false }, axisLabel: { textStyle: { color: '#3678ff' } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#234DB4', width: 2 } }, }], series: series }; myChart.setOption(option); }
2、柱状图效果-多条
四、迁徙地图
1、代码实现
//迁徙地图调 var qyData = []; qyData.push([{name: '吉林'}, {name: area_name[i], value: area_num[i] / 1000}]); getZGMap("echartsQXMap", qyData); //迁徙地图JS function getZGMap(p_id, qyData) { var myChart = echarts.init(document.getElementById(p_id)); myChart.clear(); var geoCoordMap = { '吉林': [125.8154, 44.2584], '黑龙江省': [127.9688, 45.368], '辽宁省': [123.1238, 42.1216], '山东省': [117.1582, 36.8701], '河北省': [114.4995, 38.1006], '北京市': [116.23, 39.54], '天津市': [117.2, 39.12], '江苏省': [118.7846, 32.08513], '广东省': [113.15, 23.08], '内蒙古自治区': [111.73, 40.83], '浙江省': [120.15, 30.28] }; var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push([{ coord: fromCoord }, { coord: toCoord }]); } } return res; }; var color = ['#a6c84c', '#ffa022', '#46bee9']; var series = []; [['吉林', qyData]].forEach(function (item, i) { series.push({ name: item[0], type: 'lines', zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 }, lineStyle: { normal: { color: color[i], // color: function (value) { //随机颜色 // return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6); // }, width: 0, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'lines', zlevel: 2, effect: { show: true, period: 6, trailLength: 0, symbol: planePath, //飞机图标 symbolSize: 10 //飞机大小 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.4, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); option = { title : { }, tooltip : { trigger: 'item' }, geo: { map: 'china', label: { normal:{ show: false, }, emphasis: { show: false, } }, roam: false, itemStyle: { normal: { areaColor: '#004981', borderColor: '#46d9ff' }, emphasis: { areaColor: '#004999' } } }, series: series }; var url = '../../workspace/jy/leaderviewjl/json/china.json'; $.get(url, function (geoJson) { myChart.hideLoading(); echarts.registerMap('china', geoJson); myChart.setOption(option); }) }
2、迁徙效果图