记录一下echart引用地图的方法:
当前使用echart版本为4.2.1
html部分
<template>
<div class='echarts' ref="mapChart"></div>
</template>
js部分
<script>
import echarts from 'echarts'
import china from 'echarts/map/json/china.json' // 引入中国地图json数据
export default {
name: 'echarts',
mounted(){
this.init();
},
data() {
return {
myChart: null
}
},
methods: {
async init(){
let chartDom = this.$refs.mapChart
this.myChart = echarts.init(chartDom);
let option;
echarts.registerMap('china', china);
option = {
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
visualMap: {
left: 'right',
min: 1,
max: 20000,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
},
text: ['value', ''],
calculable: true
},
toolbox: {
show: true,
left: 'left',
top: 'top',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '用户数量',
type: 'map',
roam: true,
map: 'china',
emphasis: {
label: {
show: true
}
},
data: [
{ name: '北京', value: 123 },
{ name: '广东',value: 10000000 },
{ name: '西藏', value: 2000221 },
{ name: '新疆', value: 321312 }
],
}
],
};
this.myChart.setOption(option);
option && this.myChart.setOption(option);
}
},
}
</script>
效果图：
