1.echarts 自定义标签
注:当设置visualMap的后,给覆盖regions单独定义的值(如果data 中没有regions的地区 则无妨,我这个是从data中删除'青岛',但是lable 无法正常显示了,如有哪位大神有好的方法,请赐教)
initChart(id,data){ // console.log(data); let obj = echarts.init(document.getElementById(id)); const geoCoordMap = { '济南市': [117,36.65 ], '青岛市': [120.33,36.07 ], '淄博市': [118.05,36.78 ], '枣庄市': [117.57,34.86 ], '东营市': [118.49,37.6 ], '烟台市': [121.0,37.52 ], '潍坊市': [119.1,36.62 ], '济宁市': [116.59,35.38 ], '泰安市': [117.13,36.0 ], '威海市': [122.3,37.5], '日照市': [119.46,35.42 ], '滨州市': [118.03,37.4], '德州市': [116.29,37.45 ], '聊城市': [115.97,36.45 ], '临沂市': [118.35,35.05 ], '菏泽市': [115.43,35.24 ], '莱芜市': [117.67,36.2 ], } const convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].region]; if (geoCoord) { res.push({ value: geoCoord.concat(data[i].value), name: data[i].region, managercount:data[i].managercount, fundcount:data[i].fundcount, }); } } return res; }; let option = ({ // 进行相关配置 visualMap: { //各市区的颜色由value值得大小定 show:false, text: ['高', '低'], showLabel: true, seriesIndex: [0], min: 1, max: 300, inRange: { color:[ '#2ab0fc','#0195f1', '#047ad7',] }, }, geo: { map: '山东', label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#83caf5', borderColor: '#fff', }, emphasis: { areaColor: '#aed6f2', } }, regions: [{ //单独定义青岛市的颜色 name: '青岛市', value:this.qdVal.managercount, itemStyle: { normal: { areaColor: '#fe9910', } } }], }, series: [ { type: 'map', map: '山东', geoIndex: 0, //此处地图为geo的第一个值 data:data, }, { name:'山东', type: 'scatter', coordinateSystem: 'geo', symbol:'pin', symbolSize:1, label:{ //标签样式设置 normal:{ show:true, formatter:function(params){ //标签内容 return params.name+':'+params.data.managercount+','+params.data.fundcount }, lineHeight: 20, backgroundColor:'rgba(255,255,255,.9)', borderColor:'#80cffd', borderWidth:'1', padding:[5,15,4], color:'#000000', fontSize: 14, fontWeight:'normal', }, }, data:convertData(data), } ] }) obj.setOption(option); },
效果展示: