import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
$.get('https://geojson.cn/api/data/china.json', function (ret) {
echarts.registerMap('china', ret);
option = {
tooltip: {
show: true,
trigger: 'item'
},
visualMap: {
left: 'left',
bottom: '10%',
min: 5,
max: 100,
orient: 'vertical',
text: ['max', 'min'],
realtime: true,
calculable: true,
inRange: {
color: ['#00bb91', '#00aadf', '#002a5f']
}
},
series: [
{
name: '中国地图',
type: 'map',
map: 'china',
roam: true,
emphasis: {
label: {
show: true,
color: '#37a2da'
}
},
selectedMode: true,
label: {
show: true,
color: '#ffdb5c'
},
data: [
{ name: '台湾', value: 39.4 },
{ name: '河北', value: 56 },
{ name: '山西', value: 79 },
{ name: '内蒙古', value: 60 },
{ name: '安徽', value: 78 },
{ name: '澳门', value: 99.4 },
{ name: '北京', value: 25.6 },
{ name: '重庆', value: 54.3 },
{ name: '福建', value: 5.7 },
{ name: '甘肃', value: 6.9 },
{ name: '广东', value: 158.4 },
{ name: '广西', value: 167.9 },
{ name: '贵州', value: 94.7 },
{ name: '海南', value: 6.1 },
{ name: '黑龙江', value: 108.3 },
{ name: '河南', value: 72.5 },
{ name: '湖北', value: 194 },
{ name: '湖南', value: 85.6 },
{ name: '江苏', value: 94.1 },
{ name: '江西', value: 24.5 },
{ name: '吉林', value: 98 },
{ name: '辽宁', value: 175 },
{ name: '宁夏', value: 15.4 },
{ name: '青海', value: 78.6 },
{ name: '山东', value: 38.9 },
{ name: '上海', value: 54.6 },
{ name: '四川', value: 24 },
{ name: '天津', value: 68 },
{ name: '香港', value: 174 },
{ name: '新疆', value: 10.1 },
{ name: '西藏', value: 2.6 },
{ name: '云南', value: 6.1 },
{ name: '浙江', value: 54.3 },
{ name: '陕西', value: 76.2 },
{ name: '南海诸岛', value: 5.7 }
]
}
]
};
myChart.setOption(option);
});
option && myChart.setOption(option);
Echarts从5.0版本开始不再内置地图数据,其中,$.get('https://geojson.cn/api/data/china.json' 是使用了JQuery后发起AJAX请求获取中国地图数据,如果使用axios或其他本地资源方式可以自行根据需求修改。