echarts地图阴影效果

it2022-05-05  156

效果图:

 

 

主要代码:

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'                 }             },         }         ] };

 


最新回复(0)