Problem: The map in echarts is not displayed. On the one hand, because there is a map in echarts version 4.9, this function is lost in version 5.0 and above. If you want other versions, just change the version number after @, and run:
// 安装4.9版本的echarts
npm install [email protected] --save
// 卸载echarts运行:
npm uninstall echarts
<template>
// 2.准备一个具备大小的DOM容器
<div id="project_map" style="width:70%;height:100%;"></div>
</template>
<script>
// 1.导入echart
import * as echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
import {
projectInformationCount } from '@/api/project_information/project_overview'
import {
getToken } from '@/utils/auth'
import {
Message } from 'element-ui';
export default {
data () {
return {
area0_count: [],
}
},
mounted () {
this.getCount()
this.project_map_chart();
},
methods: {
// 获取数据
getCount () {
projectInformationCount({
token: getToken(),
}).then(res => {
this.area0_count = res.area0_count
this.project_map_chart();
}).catch(error => {
Message.error(error)
})
},
// 制作地图
mapChart (id) {
//3. 初始化echarts实例对象
var myChart = echarts.init(document.getElementById(id))
//4. 指定配置项和数据
var option = {
geo: {
map: 'china',//这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致
label: {
show: true }, //显示省份
roam: true, //缩放
},
series: [], //地图上二开点线特效数组,按需添加
}
//5. 将配置项和数据设置给实例对象(mychart)
myChart.setOption(option)
// 6. 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener('resize', function () {
// 让我们的图表调用 resize这个方法
myChart.resize()
})
},
// 地图
project_map_chart (e) {
this.mapChart('project_map');
},
}
}
</script>
Final effect:
share an echarts library here, the address is https://www.isqqw.com/#/homepage