共计 2121 个字符，预计需要花费 6 分钟才能阅读完成。
1、在 HTML 里面引入 echarts.js
2、在 HTML 里面引入构建中国地图的 china.js
3、案例实现代码
全国客户分布
全国客户分布
`;
}
},
visualMap: {
min: 0,
max: Math.max(…data_list.map(item => item.value)),
left: ‘left’,
bottom: ‘bottom’,
text: [‘ 高 ’, ‘ 低 ’],
calculable: true,
inRange: {
color: [‘#00ffff’, ‘#91c9ff’, ‘#0096ff’, ‘#005cbf’] // 蓝色渐变色
},
outOfRange: {
color: [‘#e0e0e0’] // 超出范围的地区颜色
}
},
series: [
{
name: ‘ 数据 ’,
type: ‘map’,
mapType: ‘china’,
roam: false,
itemStyle: {
normal: {label: { show: true} },
emphasis: {
label: {show: true},
areaColor: ‘#ffe066’ // 高亮选中的省份
}
},
data: data_list.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
areaColor: item.value > maxThreshold ? ‘#ff6600’ : null // 根据值自动高亮
}
}))
}
]
};
const myChart = echarts.init(document.getElementById(‘main’));
myChart.setOption(option);
// 自适应大小
window.onresize = function() {
myChart.resize();
};
4、实现效果
后台数据自行对接即可
原文地址: echarts.js china.js 实现中国地图各省数据案例
