项目需求
- echarts地图map类型；
- 圆形柱状图；
- 指定区域柱图颜色突出展示；
代码开发
构建容器
<div id="container"></div>
数据格式
//散点图标准数据格式; var scrData = [ {"name": "合肥市", "value": [117.323065, 31.886248], data: 70}, {"name": "芜湖市", "value": [118.398616, 31.354343], data: 20}, {"name": "六安市", "value": [116.50514, 31.722042], data: 50}, {"name": "安庆市", "value": [116.667096, 30.512095], data: 40}, {"name": "宿州市", "value": [117.001588, 33.646085], data: 28} ]
初始化图表
var myChart = echarts.init(document.getElementById("container"));
选项配置
var option = { backgroundColor: '#131C38', tooltip: { trigger: 'item', show: true, textStyle: { fontSize: 20, color: '#fff' }, formatter: function (params) { //console.log(params) if (typeof(params.data) == "undefined") { return params.name; } else { return params.name + "<br>" + params.data.data; } } }, geo: [ { map: '安徽省', aspectScale: 0.75, roam: false, // 是否允许缩放 zoom: 1, // 默认显示级别 layoutSize: '95%', layoutCenter: ['55%', '50%'], label: { show: false, color: '#fff' }, itemStyle: { areaColor: { type: 'linear-gradient', x: 0, y: 400, x2: 0, y2: 0, colorStops: [{ offset: 0, color: 'rgba(37,108,190,0.3)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(15,169,195,0.3)' // 50% 处的颜色 }], global: true // 缺省为 false }, borderColor: '#4ecee6', borderWidth: 1 }, emphasis: { itemStyle: { areaColor: '#0160AD' }, label: { show: true, color: '#fff' } }, zlevel: -10 } ], series: [ { type: 'map', map: '安徽省', geoIndex: 0, coordinateSystem: 'geo', showLegendSymbol: true, roam: true, label: { show: true, textStyle: { color: '#fff' } }, itemStyle: { opacity: 1, borderColor: '#2ab8ff', borderWidth: 1.5, areaColor: '#12235c' }, zlevel: 9, data: scrData }, // 柱状体的主干 { type: 'lines', zlevel: 5, effect: { //show: true, //period: 4, //箭头指向速度，值越小速度越快 //trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 //symbol: 'arrow', //箭头图标 symbolSize: 5 // 图标大小 }, lineStyle: { width: 20, // 尾迹线条宽度 color: function (params) { //console.log(params); if (params.name == "合肥市") { return '#F7AF21'; } else { return 'rgb(22,255,255, 1)'; } }, opacity: 0.7, // 尾迹线条透明度 curveness: 0 // 尾迹线条曲直度 }, label: { show: false, position: 'end', formatter: '245' }, silent: true, data: getBodyData(scrData, getMax(scrData)) }, // 柱状体的顶部 { type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 5, label: { show: true, formatter: function (params) { //console.log(params) return "产值：" + params.data.value[2]; }, position: "top" }, symbol: 'circle', symbolSize: [20, 10], itemStyle: { color: function (params) { // console.log(params); if (params.name == "合肥市") { return '#F7AF21'; } else { return 'rgb(22,255,255, 1)'; } }, opacity: 1 }, silent: true, data: getTopData(scrData, getMax(scrData)) }, // 柱状体的底部 { type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 4, label: { formatter: '{b}', position: 'bottom', color: '#fff', fontSize: 12, distance: 10, show: false }, symbol: 'circle', symbolSize: [20, 10], itemStyle: { color: function (params) { if (params.name == "合肥市") { return '#F7AF21'; } else { return 'rgb(22,255,255, 1)'; } }, opacity: 1 }, silent: true, data: scrData }, // 底部外框 { type: 'effectScatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 4, label: { show: false }, rippleEffect: { scale: 3, brushType: "fill" }, symbol: 'circle', symbolSize: [40, 20], itemStyle: { color: function (params) { if (params.name == "合肥市") { return '#F7AF21'; } else { return 'rgb(22,255,255, 1)'; } }, opacity: 1 }, silent: true, data: scrData } ] } //自适应浏览器; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
数据格式处理的封装函数
//01.获取数组对象值的最大值; function getMax(Arr) { var newArr = []; for (var i = 0; i < Arr.length; i++) { newArr.push(Arr[i].data); } var maxValue = Math.max.apply(null, newArr); return 0.9 / maxValue; } //02.柱状体的顶部坐标; function getTopData(Arr, maxValue) { var newArr = []; for (var i = 0; i < Arr.length; i++) { newArr.push({name:Arr[i].name,value:[Arr[i].value[0], Arr[i].value[1] + Arr[i].data * maxValue, Arr[i].data]}); } return newArr; } //03.柱状体的主干; function getBodyData(Arr, maxValue) { var newArr = []; for (var i = 0; i < Arr.length; i++) { newArr.push({ name:Arr[i].name, coords: [ [Arr[i].value[0], Arr[i].value[1]],//起点坐标 [Arr[i].value[0], Arr[i].value[1] + Arr[i].data * maxValue]//终点坐标 ] }); } return newArr; }
lockdatav Done!
