刚学习了echarts热力图,在网上查找得中国地图,加载到echarts中,发现地图各个省之间链接处有很大的空隙(如图)
解决办法是,不能将数据直接复制过来使用,应在下载到本地。
下载后引入:
完美,国土不能分裂!!!
附上加载代码
const option = {
geo: {
map: 'china', //这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致
label: { show: true }, //显示省份
roam: true //缩放
},
visualMap: {
show: true,
min: 1,
max: 1000,
inRange: {
color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
},
textStyle: {
color: '#fff'
}
},
// 地图配置
series: [
{
name: 'china',
type: 'map',
mapType: 'china',
zoom: 1,
geoIndex: 0,
data: [
{ name: '北京', value: Math.random() * 1000 },
{ name: '天津', value: Math.random() * 1000 },
{ name: '上海', value: Math.random() * 1000 },
{ name: '重庆', value: Math.random() * 1000 },
{ name: '河北', value: Math.random() * 1000 },
{ name: '河南', value: Math.random() * 1000 },
{ name: '云南', value: Math.random() * 1000 },
{ name: '辽宁', value: Math.random() * 1000 },
{ name: '黑龙江', value: Math.random() * 1000 },
{ name: '湖南', value: Math.random() * 1000 },
{ name: '安徽', value: Math.random() * 1000 },
{ name: '山东', value: Math.random() * 1000 },
{ name: '新疆', value: Math.random() * 1000 },
{ name: '江苏', value: Math.random() * 1000 },
{ name: '浙江', value: Math.random() * 1000 },
{ name: '江西', value: Math.random() * 1000 },
{ name: '湖北', value: Math.random() * 1000 },
{ name: '广西', value: Math.random() * 1000 },
{ name: '甘肃', value: Math.random() * 1000 },
{ name: '山西', value: Math.random() * 1000 },
{ name: '内蒙古', value: Math.random() * 1000 },
{ name: '陕西', value: Math.random() * 1000 },
{ name: '吉林', value: Math.random() * 1000 },
{ name: '福建', value: Math.random() * 1000 },
{ name: '贵州', value: Math.random() * 1000 },
{ name: '广东', value: Math.random() * 1000 },
{ name: '青海', value: Math.random() * 1000 },
{ name: '西藏', value: Math.random() * 1000 },
{ name: '四川', value: Math.random() * 1000 },
{ name: '宁夏', value: Math.random() * 1000 },
{ name: '海南', value: Math.random() * 1000 },
{ name: '台湾', value: Math.random() * 1000 },
{ name: '香港', value: Math.random() * 1000 },
{ name: '澳门', value: Math.random() * 1000 }
]
}
]
};
window.addEventListener('resize', function () {
heatMapChart.resize(); //地图自适应
});
heatMapChart.setOption(option);
复制代码
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END