效果：
代码实现：
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', //边框宽度设置1
borderColor: '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);
}
