效果图:
主要代码:
option.geo.itemStyle: { normal: { areaColor: '#0e1c47', borderWidth: 1,//设置外层边框 borderColor:'#1e9ce7', //shadowColor: '#fff', shadowColor: '#ccc', shadowBlur: 15, opacity:0.8 } }完整代码:
const sactterMapOpt = { title: { text: '', x: 'center', textStyle: { color: '#fff' } }, legend: { data: ['warning'], //与series的name属性对应 orient: 'vertical', y: 'bottom', x: 'right', textStyle: { color: '#fff' } }, /* tooltip: { trigger: 'item', backgroundColor:'rgba(255,255,255,0.3)', padding:[10, 20], textStyle:{ color:'#fff', fontSize:18, lineHeight:'30px' }, position: function (point, params, dom, rect, size) { return [point[0]+10, point[1]-dom.offsetHeight -10]; }, formatter: function(params) { var res = '<center>栏目<center>' res+=params.name + ' : ' + params.value[2] + ' 台'; return res; } }, */ visualMap: { min: 0, max: 200, calculable: false, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }, textStyle: { color: '#fff' } }, geo: { show: true, map: 'china', label: { normal: { show: false }, emphasis: { show: false, } }, roam: false, itemStyle: { normal: { areaColor: '#0e1c47', borderWidth: 1,//设置外层边框 borderColor:'#1e9ce7', //shadowColor: '#fff', shadowColor: '#ccc', shadowBlur: 15, opacity:0.8 } } }, series: [{ name: 'PM2.5', type: 'scatter', coordinateSystem: 'geo', symbolSize: 12, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { emphasis: { areaColor: '#0e1c47', borderColor: '#1e9ce7', borderWidth: 1 } }, data: convertScatterData(scatterVal) }, { type: 'map', map: 'china', geoIndex: 1, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false, }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: false, itemStyle: { normal: { areaColor: '#0e1c47', borderColor: '#1e9ce7', borderWidth: 1, //shadowColor: '#ccc', //shadowBlur: 15 }, emphasis: { areaColor: '#01215c' } }, } ] };