我想要的效果:
解决步骤:
1.安装引入
npm install echarts
import Echarts from ‘echarts‘ // 全局注册Echarts Vue.prototype.$Echarts = Echarts
2.引入china.js(我是直接引入安装包里面的文件包,你也可以自行下载到自己的本地目录)
import ‘./../../../node_modules/echarts/map/js/china.js‘
3.使用
加载全国地图
loadMap (data, max) {
let mychart = this.$eCharts.init(document.getElementById(‘stats-map‘))
mychart.setOption({
tooltip: {
trigger: ‘item‘
},
visualMap: {
min: 0,
max: max,
range: [0, max],
show: false,
inRange: {
color: [‘#ccdaff‘, ‘#5485FE‘]
}
},
series: [
{
name: ‘产品分布‘,
type: ‘map‘,
mapType: ‘china‘,
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: data,
itemStyle: {
normal: {
borderColor: ‘#ffffff‘,
areaColor: ‘#ccdaff‘
},
emphasis: {
areaColor: ‘#ffffff‘,
color: ‘#000‘,
borderWidth: 0,
show: false,
}
}
}
]
})
mychart.on(‘click‘, (prams) => {
// provincePy是为了获得省份的全拼(贵州=>guizhou)
let shengpy = provincePy(prams.name)
if (shengpy) {
this.loadProvinceMap(shengpy, max, data)
mychart.clear()
}
})
setTimeout(function (){
window.onresize = function () {
mychart.resize()
}
}, 200)
}
加载某一个省地图
loadProvinceMap (name, max, data) {
// 加载我下载到本地的全国省区的json文件
Axios.get(`/static/map/province/${name}.json`)
.then(res => {
let childChart = this.$eCharts.init(document.getElementById(‘stats-map‘));
this.$eCharts.registerMap(name, res.data);
childChart.setOption({
visualMap: {
min: 0,
max: max,
show: false,
realtime: false,
calculable: true,
inRange: {
color: [‘#ccdaff‘, ‘#5485FE‘]
}
},
tooltip: {
formatter: function (params) {
const value = isNaN(params.value) ? 0 : params.value
return params.name + ": " + value
}
},
series: [{
type: ‘map‘,
mapType: name,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: data,
itemStyle: {
normal: {
borderColor: ‘#ffffff‘,
areaColor: ‘#ccdaff‘
},
emphasis: {
areaColor: ‘#ffffff‘,
color: ‘#000‘,
borderWidth: 0,
show: false,
}
},
animation: false
}]
})
setTimeout(function (){
window.onresize = function () {
childChart.resize()
}
}, 200)
})
.catch(() => {
this.$message.warning(‘该地区地图数据不存在!‘)
})
}