echarts实现中国地图区域分布图 vue + echarts

2024-07-05 10:45| 来源: 网络整理| 查看: 265

需求如下：做一个全国各省对我们产品使用的统计图表。已省为区域划分。在这里插入图片描述

安装echarts

我的是用webpack安装的依赖。所以直接下载安装echarts的插件就好了。

npm install echarts --save

如果你没有使用webpack来安装，可以直接进入到echarts官网进行下载。之后，引入到自己的项目

安装这一步就不多说了。接下来，就是在项目中使用。由于我项目中需要用的echarts的组件还挺多的，所在全局引用并且注册了。在项目中main.js 文件中，引入echarts

main.js中 import echarts from 'echarts' // 这一步是引入echarts的插件 Vue.prototype.$echarts = echarts // 这一步是为了能在全局直接使用

引入成功之后，我们进入到使用的组件页面。 taskData.vue 组件内部

html部分： // 写一个绘制地图的标签。 JS部分 mounted （） { this.drawregionCharts() // 在页面进入的时候，先请求后端数据再调用这个函数，但由于我这里是写死的假数据，于是就直接调用了 } methods: { drawregionCharts () { let dataList = [ {name: '北京', value: 200}, {name: '四川', value: 800} ] // 该数据是从服务器获取到的数据 let option = { tooltip: { trigger: 'item', formatter: function (params) { return params.name;//自行定义formatter格式 } }, visualMap: { min: 0, max: 1500, left: 'left', top: 'bottom', text: ['高', '低'],//取值范围的文字 inRange: { color: ['#e0ffff', '#006edd']//取值范围的颜色 }, show: true//图注 }, geo: { map: 'china', roam: false,//不开启缩放和平移 zoom: 1.23,//视角缩放比例 label: { normal: { show: true, fontSize: '10', color: 'rgba(0,0,0,0.7)' }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis: { areaColor: '#F3B329',//鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, series: [ { name: '信息量', type: 'map', geoIndex: 0, data: dataList } ] } let mychart = this.$echarts.init(document.getElementById('regionCharts')) console.log(mychart) mychart.setOption(option) this.$nextTick(() => { mychart.resize() // 这里是为了解决，tab刷新的时候，图表不刷新的问题。 }) } }

代码到这里并没有结束。当我打开我的页面时候，发现区域图并没有显示。

但此时图示已经生效了，说明我的写法和引用都是成功的。在网上查找问题的时候，发现，说是如果使用的是中国地图，那么需要引入china.js.但china.js链接的地方是乱码的。于是我看了一下我的插件下载包，想要碰运气看看，这个区域数据是否已经跟着echarts下载了。在这里插入图片描述果然被我找到了。那又该怎么使用呢。首先回到main.js中去引入这个china.json的文件。

import china from 'echarts/map/json/china.json' // 引入json文件 echarts.registerMap('china', china) // 在echarts中注册使用这个文件

再次查看页面效果：在这里插入图片描述这就出来啦！下面贴下完整的代码图； main.js html 组件 html 组件 JS部分

【本文地址】

公司简介

联系我们