效果：

代码实现：

draw(data) {var option = {tooltip: {trigger: 'item',icon: 'query',// triggerOn: 'click',formatter: function (e, t, n) {let string = '';string += `<div style="padding:10px"><span style="padding-right:10px">${e.name}</span><span>(${e.value ? e.value : ''}  台)</span> </div>`;let childList = e.data ? e.data.childs : [];childList.forEach((item) => {string += `<div style="padding:0 10px 5px 10px;display:flex;justify-content: space-between;"><div style="padding-right:20px">${item.arg1}</div><div>${item.val1}台</div></div>`;});return string;},fontSize: '12px',backgroundColor: 'rgba(7,16,47,.6)', //设置背景图片 rgba格式color: 'black',borderWidth: '0', //边框宽度设置1borderColor: 'rgba(9,229,237,.2)', //设置边框颜色textStyle: {color: '#fff', //设置文字颜色},extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',},grid: {left: '3%',right: '4%',bottom: '3%',// top:'10%',containLabel: true,},visualMap: {min: 0,max: 1000,left: 0,bottom: 0,showLabel: !0,text: ['高', '低'],// inRange: {//     color: ['#52f8fd', '#4bd3f9', '#62b7e7','#7863fc']// },pieces: [{gt: 4000,color: '#7863fc',},{gte: 3000,lte: 4000,color: '#6699f9',},{gte: 2000,lt: 3000,color: '#62b7e7',},{gt: 1000,lt: 2000,color: '#4bd3f9',},{gt: 0,lt: 1000,color: '#52f8fd',},{value: 0,color: '#52f8fd',},],show: false,},geo: {map: 'china',// roam: true, // 是否可以缩放、拖拽scaleLimit: {min: 1,max: 2,},zoom: 1.23,label: {normal: {show: true,fontSize: '10',color: '#fff',},},itemStyle: {normal: {// areaColor: "red",shadowColor: '#0d82dc',// shadowColor: 'rgba(255, 255, 255, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10,borderColor: 'transparent',borderWidth: 1,},emphasis: {areaColor: '#107889',shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 0,},},},series: [{name: '整机销售台数 (台)',type: 'map',geoIndex: 0,data: data,},],};window.addEventListener('resize', () => {this.myChart.resize();});this.myChart.setOption(option);}