' + item.name + '
' // + '合格率  ' + item.data.fdl + '
' // + '不合格数  ' + item.data.tds + '
' // + '合格数  ' + item.data.fds + '  ' // + '

'; // return tipHtml; // } // }, tooltip: { trigger: 'item', triggerOn: 'click', showDelay: 0, //浮层显示的延迟 transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间 enterable: true, formatter: function(item) { if(item.componentSubType == 'map'){ // 详情 return; } var tipHtml = ''; tipHtml = '

' + item.data[2].name + '
' + '合格率  ' + item.data[2].fdl + '
' + '不合格数  ' + item.data[2].tds + '
' + '合格数  ' + item.data[2].fds + '  ' + '

'; return tipHtml; }, // position: [10, 10], backgroundColor: "#fff" }, geo: [ { map: 'henan', aspectScale: 0.9, roam: false, // 是否允许缩放 zoom: 1.2, // 默认显示级别 layoutSize: '95%', layoutCenter: ['55%', '50%'], itemStyle: { normal: { 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: { areaColor: { type: 'linear-gradient', x: 0, y: 300, x2: 0, y2: 0, colorStops: [{ offset: 0, color: 'rgba(37,108,190,1)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(15,169,195,1)' // 50% 处的颜色 }], global: false // 缺省为 false }, } }, emphasis: { itemStyle: { areaColor: '#0160AD' }, label: { show: 0, color: 'transparent' } }, zlevel: 3 }, { map: 'henan', aspectScale: 0.9, roam: false, // 是否允许缩放 zoom: 1.2, // 默认显示级别 layoutSize: '95%', layoutCenter: ['55%', '50%'], itemStyle: { normal: { borderColor: 'rgba(192,245,249,.6)', borderWidth: 2, shadowColor: '#2C99F6', shadowOffsetY: 0, shadowBlur: 120, areaColor: 'rgba(29,85,139,.2)' } }, zlevel: 2, silent: true }, { map: 'henan', aspectScale: 0.9, roam: false, // 是否允许缩放 zoom: 1.2, // 默认显示级别 layoutSize: '95%', layoutCenter: ['55%', '51.5%'], itemStyle: { areaColor: 'rgba(0,27,95,0.4)', borderColor: '#004db5', borderWidth: 1 }, zlevel: 1, silent: true } ], series: [ // map { geoIndex: 0, showLegendSymbol: true, type: 'map', roam: true, label: { normal: { show: false, textStyle: { color: '#fff' } }, emphasis: { show: false, textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: '#2ab8ff', borderWidth: 1.5, areaColor: '#12235c' }, emphasis: { areaColor: '#2AB8FF', borderWidth: 0, color: 'red' } }, map: 'henan', // 使用 data: customerBatteryCityData // data: this.difficultData //热力图数据不同区域不同的底色 }, //柱状体的主干 { type: 'lines', zlevel: 5, effect: { show: false, symbolSize: 5 // 图标大小 }, lineStyle: { width: 6, // 尾迹线条宽度 color: 'rgb(22,255,255, .6)', opacity: 1, // 尾迹线条透明度 curveness: 0 // 尾迹线条曲直度 }, label: { show: 0, position: 'end', formatter: '245' }, silent: true, data: lineData() }, // 柱状体的顶部 { type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 5, // label: { // show: true, // lineHeight: 15, // formatter: function (item) { // var tipHtml = ''; // // tipHtml = '

' + item.name + '
' // // + '合格率  ' + item.data.fdl + '
' // // + '不合格数  ' + item.data.tds + '
' // // + '合格数  ' + item.data.fds + '
' + // tipHtml = '{link|合格率:' + item.data[2].fdl + '}' // return tipHtml; // }, // position: "top", // rich: { // link: { // height: '30px', // color:'#fff', // } // } // }, // symbol: 'circle', // symbolSize: [20, 10], // itemStyle: { // color: 'rgb(22,255,255, 1)', // opacity: 1 // }, // silent: true, label: { normal: { show: true, formatter: function(params) { var name = params.data[2].name var value = params.data[2].fdl // var text = `{tline|${name}}:{fline|${value}}` var text = `{tline|合格率}:{fline|${value}}` return text; }, color:'#fff', rich: { fline: { // padding: [0, 25], color: '#fff', fontSize: 14, fontWeight:400 }, tline: { // padding: [0, 27], color: '#ABF8FF', fontSize: 12, }, } }, emphasis: { show: true } }, itemStyle: { color: '#00FFF6', opacity: 1 }, symbol: img2, symbolSize: [100, 50], symbolOffset: [0, -20], z: 999, data: scatterData() }, // 柱状体的底部 { geoIndex: 0, zlevel: 4, type: 'effectScatter', coordinateSystem: 'geo', rippleEffect: { scale: 10, brushType: 'stroke', }, showEffectOn: 'render', itemStyle: { normal: { color: '#00FFFF', } }, label: { normal: { formatter: '{b}', position: 'bottom', color: '#fff', fontSize: 12, distance: 10, show: true, }, }, symbol: 'circle', symbolSize: [10, 5], itemStyle: { // color: '#F7AF21', color: 'rgb(22,255,255, 1)', opacity: 1 }, data: scatterData2() }, // 底部外框 { type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 4, label: { show: false }, symbol: 'circle', symbolSize: [1, 1], itemStyle: { color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [ { offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色 }, { offset: .75, color: 'rgb(22,255,255, 0)' // 100% 处的颜色 }, { offset: .751, color: 'rgb(22,255,255, 1)' // 100% 处的颜色 }, { offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色 } ], global: false // 缺省为 false }, opacity: 1 }, silent: true, data: scatterData2() } ] } myChart.setOption(option); }) // 动态计算柱形图的高度（定一个max） function lineMaxHeight () { const maxValue = Math.max(...customerBatteryCityData.map(item => item.value)) return 0.3 } // 柱状体的主干 function lineData () { return customerBatteryCityData.map((item) => { return { coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]] } }) } // 柱状体的顶部 function scatterData () { return customerBatteryCityData.map((item) => { return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight(),item] }) } // 柱状体的底部 function scatterData2 () { return customerBatteryCityData.map((item) => { return { name: item.name, value: geoCoordMap[item.name] } }) }

河南地图