关键词：
文章目录
1，实现的效果和功能
vue使用echarts实现中国地图和点击省份进行查看；
下面是效果图：主要实现的功能如下：
1，第一张是实现中国地图，点击任意省份能够显示tooltip提示框 ；
2，第二张是点击详情能够在原来的位置显示此省的地图并可以查看详细；
3，第三张是点击第二张左上角的返回箭头 重新返回到 第一张中国地图；
需要的保费模拟数据我会放到文章的最后面；
echarts官网：https://echarts.apache.org/examples/zh/index.html
map地图参考：https://echarts.apache.org/zh/option.html#series-map
效果图：
2，安装ECharts
npm install echarts --save // 最新版本
### 之前版本
npm install echarts@4.8.0 --save
### 卸载echarts
npm uninstall echarts
注意：echarts5.0版本下会有地图的数据，5.0版本以上则没有地图的数据，需要自己下载；
或者安装低版本的echart把map文件夹的地图数据复制到高版本的对应文件下面也是可以的；
1.1 地图数据的位置
中国地图和各省的地图绘制信息需要放到依赖里面的echarts下面的map文件夹下面；如下图：
1.2 还可以自己下载这些地图数据
下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector
3，main.js里面引入echarts
// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts //挂载到原型上面 也可以选择不挂载 直接在页面上引入
4，实现如下
主要流程如下：
1，需要有一个容器
<div id="chinaMap" v-if="pyName === 'china'"></div>且有唯一 id值
2，this.$echarts.init(document.getElementById('chinaMap')); 用来初始化节点 id和上面的相对应；
3，require('../../../node_modules/echarts/map/json/china.json');用来导入相对应的地图数据，echarts进行渲染
4，options配置项用来设置echarts图表的样式和展示数据相关；
5，this.myEchartsOfChina.setOption(options);设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表；
6，options：formatterhtml里面的点击事件需要在mounted里面先行注册一下，否则此方法会报错：undefined；
全部代码如下：
<template>
<div>
<h1>echarts可视化</h1>
<hr />
<div class="container">
<!-- 全国地图 机构趋势模块 -->
<div class="china">
<!-- 点击返回全国-->
<div @click="returnCh">
<img v-if="pyName !== 'china'" class="returnImg" src="@/assets/img/return.png" />
</div>
<div id="chinaMap" v-if="pyName === 'china'"></div>
<div id="provinceMap" v-if="pyName !== 'china'">111</div>
</div>
</div>
</div>
</template>
<script>
import cityArr, totalMap from './data/mapData';
export default
components: ,
data()
return
// 全省保费信息
totalMap: null,
// 各个城市的数据
cityArr: null,
myEchartsOfChina: null,
// 默认选择的城市 这是拼音
pyName: 'china',
// 保留一份省名的中文
pyNameOfChinese: '',
;
,
created()
// 拿到数据
this.totalMap = totalMap;
this.cityArr = cityArr;
// 页面进来注册tooltip上面的点击事件 否则会报此事件undefined
window.lookVideoGo = this.lookVideoGo;
,
// 页面挂载完成后调用
mounted()
this.chinaMapFun();
,
methods:
/*中国地图 参考文章：https://echarts.apache.org/zh/option.html#series-map*/
chinaMapFun(cityName)
// 先处理数据 很重要
let mapData = [];
for (let i = 0; i < this.totalMap.length; i++)
let obj = value: 0, datas: [] ; // 数组里面是多个对象
obj.name = this.totalMap[i].comname2; // names属性时数据所对应的地图区域的名称，例如 '广东'，'浙江';参考文章： https://echarts.apache.org/zh/option.html#series-map.data
obj.value = this.totalMap[i].achieveRate; // 该区域的数据值 number类型
obj.datas[0] = this.totalMap[i].preium;
obj.datas[1] = this.totalMap[i].target;
//注意： 此行是模拟下面的省份用的 实际开发中每个省份的数据是后端返回的
if (this.totalMap[i].children)
obj.children = this.totalMap[i].children;
mapData.push(obj);
// 这里进行筛选传进来的省份数据 模拟黑龙江省份下面的和黑河市
if (this.pyNameOfChinese)
mapData = mapData.map((item) =>
if (item.children)
return name: item.children.comname2, value: item.children.achieveRate, datas: [item.children.preium, item.children.target] ;
);
console.log('当前渲染的地图:', this.pyName);
console.log('当前渲染的数据2：', mapData);
// 1，初始化节点
// 检测是否已经存在echarts实例，如果不存在，则不再去初始化
if (this.pyName === 'china')
this.myEchartsOfChina = this.$echarts.init(document.getElementById('chinaMap'));
else
this.myEchartsOfChina = this.$echarts.init(document.getElementById('provinceMap'));
// 显示加载动画
this.myEchartsOfChina.showLoading();
if (this.pyName === 'china')
let province = require('../../../node_modules/echarts/map/json/china.json');
// 注册地图数据
this.$echarts.registerMap(this.pyName, province);
else
// 单独引入其他省份的地图 注意：registerMap方法的第一参数要和引入的省名相同
let province = require('../../../node_modules/echarts/map/json/province/' + this.pyName + '.json');
this.$echarts.registerMap(this.pyName, province);
this.myEchartsOfChina.hideLoading();
/* 参考文档： https://echarts.apache.org/zh/option.html#series-map */
// 设置整个中国地图的参数
let options =
title:
show: false, // 是否显示标题组件
text: '中国地图', // 主标题文本
subtext: '注：展示当月和当年累计情况',
left: '3%',
top: '85%',
,
tooltip:
enterable: true, // 允许点击触发tooltip中的事件
show: true, // 是否显示提示框组件，包括提示框浮层和 axisPointer。 [ default: true ]
trigger: 'item', // 触发类型。 [ default: 'item' ]
triggerOn: 'click', // 只有点击时才触发 不设置默认随鼠标移动并显示
formatter: (array, returnData, callback) =>
if (isNaN(array.value))
if (this.cityArr.includes(array.name))
return '保费: 暂无' + '<br/>' + '目标: 暂无' + '<br/>' + '保费达成率: 暂无';
else
return '保费: 暂无' + '<br/>';
else
let result =
'<div style="display: flex"><div style="float:left;">保费: ' +
array.data.datas[0] +
'万元 <br/> 目标: ' +
array.data.datas[1] +
'万元 <br/> 保费达成率: ' +
array.data.value +
'%</div>' +
'<div style="float:left; margin-left: 0.1rem;width: 0.05rem;height: 1rem; background: #D8D8D8;"></div>' +
'<div style="float:left; margin-left: 0.1rem; "οnclick="lookVideoGo(\\'' +
array.name +
'\\')"><p style="height:2rem; line-height:2rem;">详 情 > </p></div></div>';
return result;
,
backgroundColor: 'rgba(50,50,50,0.7)', // tooltip 背景颜色 rgba
// 文本设置
textStyle:
color: 'rgb(255,255,255)', // 值域文字颜色
fontSize: 12,
,
,
// 底部小导航图标
visualMap:
// text: ['注：展示当月和当年累计情况'],
orient: 'horizontal',
itemWidth: 15,
textGap: 2,
// calculable: false,
show: true,
left: 'center',
y: 'bottom',
splitList: [
end: 0, label: '无', color: '#DDDDDD' ,
end: 30, color: 'rgb(255,248,220)' ,
start: 30, end: 60, label: '30-60', color: 'rgb(252,235,207)' ,
start: 60, end: 90, label: '60-90', color: '#FFDAB9' ,
start: 90, end: 100, label: '90-100', color: 'rgb(245,158,131)' , // 245 158 131
start: 100, label: '>=100', color: 'rgb(40,183,163)' , // 40 183 163
],
,
backgroundColor: '#fff', // 图表背景色
series: [
name: '省份',
type: 'map', // 指定是地图类型
map: this.pyName, // 和上面registerMap中的第一个参数值一致才可以正常加载地图
zoom: 1.2,
roam: true, // 是否开启平游或缩放
// geoIndex: 0,
// aspectScale: 0.75,
// scaleLimit: // 滚轮缩放的极限控制
// min: 1,
// max: 2
// ,
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
itemStyle:
areaColor: '#FFFFFF',
borderColor: '#0f0f0f',
normal: label: show: true , areaColor: '#DDDDDD' ,
emphasis: label: show: true ,
,
emphasis:
// 强调的样式，也就是鼠标移入后的样式==高亮状态下的多边形和标签样式。
itemStyle:
areaColor: '#000000',
,
,
label:
normal:
show: true, // 是否显示标签，这里显示的就是省份的名字。默认就是false
textStyle:
fontWeight: 300,
color: '#000000', // 值域文字颜色
fontSize: 7, // 文字的字体大 小
,
,
emphasis:
show: false, // 在鼠标移入时，是否显示，如果不写，默认是显示的
,
,
data: mapData, // 各省地图数据导入
,
],
;
// 设置各个省份地图的参数
let options1 =
title:
show: false, // 是否显示标题组件
subtext: '注：展示当月和当年累计情况',
left: '3%',
top: '85%',
,
tooltip:
enterable: true, // 允许点击触发tooltip中的事件
show: true, // 是否显示提示框组件，包括提示框浮层和 axisPointer。 [ default: true ]
trigger: 'item', // 触发类型。 [ default: 'item' ]
backgroundColor: 'rgba(50,50,50,0.7)', // tooltip 背景颜色 rgba
// 文本设置
textStyle:
color: 'rgb(255,255,255)', // 值域文字颜色
fontSize: 12,
,
formatter: (array, returnData, callback) =>
console.log(array);
if (isNaN(array.value))
if (this.cityArr.includes(array.name))
return '保费: 暂无' + '<br/>' + '目标: 暂无' + '<br/>' + '保费达成率: 暂无';
else
return '保费: 暂无' + '<br/>';
else
let result =
'<div style="display: flex"><div style="float:left;">保费: ' +
array.data.datas[0] +
'万元 <br/> 目标: ' +
array.data.datas[1] +
'万元 <br/> 保费达成率: ' +
array.data.value +
'%</div>' +
'<div style="float:left; margin-left: 0.1rem;width: 0.05rem;height: 1rem; background: #D8D8D8;"></div>' +
'<div style="float:left; margin-left: 0.1rem; "οnclick="lookVideoGo(\\'' +
array.name +
'\\')"><p style="height:2rem; line-height:2rem;">详 情 > </p></div></div>';
return result;
,
,
// 底部小导航图标
visualMap:
// text: ['注：展示当月和当年累计情况'],
orient: 'horizontal',
itemWidth: 15,
textGap: 2,
// calculable: false,
show: true,
left: 'center',
y: 'bottom',
splitList: [
start: 6, label: '>=7', color: '#FFDAB9' ,
start: 3, end: 6, label: '4-6', color: 'rgb(245,158,131)' , // 245 158 131
start: 1, end: 3, label: '1-3', color: 'rgb(40,183,163)' , // 40 183 163
end: 0, label: '无', color: '#DDDDDD' ,
],
,
series: [
name: '省份', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。见上：可以在tooltip中获取到
type: 'map', // 指定是地图类型
map: this.pyName, // 和上面registerMap中的一直
zoom: 1.2,
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
itemStyle:
areaColor: '#FFFFFF'查看详情
echarts图表——地图&热力图
参考技术A地图是依据一定的绘制法则，使用制图方法，通过制图综合在一定的载体上，表达地球（或其他天体）上各种事物的空间分布、联系及时间中的发展变化状态绘制的图形。以特殊高亮的形式显示访客热衷的页面区域和... 查看详情
echarts地图使用经验-地图变形和添加数据(代码片段)
关于echart2,echart3地图的使用一点人生经验：1.echart3，echart2加载地图变形修复。最近在使用echart2使用过程中，发现加载海南地图会产生变形。如下图，海南地图产生了较大的变形，于是需要研究怎么才能消除变形。经过一番折腾... 查看详情
echarts常用图表地图
1.图表5地图1.1.地图图表的使用方式百度地图API:使用百度地图的api,它能够在线联网展示地图,百度地图需要申请ak矢量地图:可以离线展示地图,需要开发者准备矢量地图数据接下来的实现是通过矢量图的方式来实现的1.2.矢量地图的... 查看详情
报表中如何实现中国地图钻取到各省地图
需求描述：使用Echarts统计图从中国地图，点击某一省份，在新的页面中显示该省份的地图。实现思路：在国家地图上添加onclick事件，点击国家地图中的省份，生成省份对应的url,其中将对应省份的名称以参数传递，在省地图报表... 查看详情
echart树形图实现点击节点完整链路更换颜色
...技术A在某些需求下需要用到树形图来表达数据结构，我使用的是echarts，关于echart树形图的基础配置和使用这里就不展开。直接上图，这是一个基础的树形图demo：当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点... 查看详情
echarts实现中国地图数据展示(代码片段)
...echarts；一般运用到条形、折线、扇形图，今天说一说在中国地图上展示各地数据；首先要准备中国地图的JS文件，可以在网盘下载，链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码:ft9n也可以在github上克隆下来:ht 查看详情
1echarts（中国地图篇）的使用
一、网址： http://echarts.baidu.com/download.html点击： 完整下载文件： ech 查看详情
vue-vue组件的注册和使用
全局注册： 要注册一个全局组件，可以使用Vue.component(tagName,options)。 注意确保在初始化根实例之前注册组件：html代码：<divid="example"><my-component></my-component></div>JS代码：//注册Vue.component(‘my-component‘,{te... 查看详情
【arcgisjsapi+echarts系列】实现地图上图表的绘制(附源码)
...图吧：以下文章中是具体实现步骤和源码：01【ArcGISJSAPI+eCharts系列】实现地图上二维图表的绘制02【ArcGISJSAPI+eCharts系列】实现二、三维迁徙图的绘制03【ArcGISJSAPI+eCharts系列】实现二、三维散点图的绘制04【ArcGISJSAPI+eCharts系列】实... 查看详情
vue使用echarts展示地图(代码片段)
Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi... 查看详情
vue使用echarts展示地图(代码片段)
Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi... 查看详情
vue中使用vue-echarts引入百度地图实现数据可视化(代码片段)
安装v-chartsnpm安装$npminstallechartsvue-echarts在使用v-chart前必须安装echarts在main.js中进行注册importEChartsfrom'vue-echarts'Vue.component('v-chart',ECharts)在页面进行使用1.页面中使用v-chart<template><v- 查看详情
vue中，基于echarts地图实现一个人才回流的大数据展示效果
0.引入echarts组件，和中国地图jsimporteChartsfrom‘echarts‘import‘echarts/map/js/china.js‘//引入中国地图1. 设置地图容器<divid="ID_L2H1Map"style="width:600px;height:400px;"></div> 2.调用echarts绘制地图createEchart_2L1H1 查看详情
echarts地图省份的颜色自定义如何设置？
...实现方法中从数据库中获取数据，然后将数据作为变量代Echarts的option中的data值。3、在注入这些值的时候进行判断，根据不同的选择情况，从关系描述的js中获取值，看看选择条件是否在范围之内，如果是，则加上itemStyle属性。4... 查看详情
echarts3怎么加载chinajs地图
1、使用echarts之前先要引入echartsjs，js可以到官网下载2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不... 查看详情
echarts地图搭配饼图怎样实现
...即可），操作很简单；本回答被提问者采纳 参考技术B看Echart官网文档下面有案例 查看详情
百度echarts地图资源下载
由于近日百度echarts3地图资源下线，现放出之前保存的geo地图文件，含全国和各省、直辖市的地图文件，需要的自取。点击此处前往下载包括js和json两种版本，找资源的应该会用吧 各省 仅供学习交流，... 查看详情