Echarts集成省份地图（散点图）的两种方法，以河南省为例
效果图
Echars省份地图（河南省）.gif
Echars省份地图（河南省）.gif
概述
在echarts调用地图时，我们往往会使用GeoJson格式的数据，根据网上的资料，会发现官网会提供世界、中国以及各省的数据。
但是，访问下载最新的echarts组件时，会发现echarts暂不提供地图下载。
所以，我们需要自己找GeoJson数据，仔细一点会发现，其实在安装echarts依赖时，已经将数据下载到项目中了。你想要的省级Js、Json文件，node_modules文件下全都有。
echars提供了两种格式的地图数据，js和json格式，可根据需求自己选择不同的格式来进行地图数据的可视化操作。
地图数据文件目录：
//js数据：
/node_modules/echarts/map/js/world.js //世界地图js数据
/node_modules/echarts/map/js/china.js //中国地图js数据
/node_modules/echarts/map/js/province/henan.js //河南地图js数据
//json数据：
/node_modules/echarts/map/json/world.json //世界地图json数据
/node_modules/echarts/map/json/china.json //中国地图json数据
/node_modules/echarts/map/json/province/henan.json //河南省地图json数据
同时，我们同样也可以将外部的json数据引入使用。可以从http://datav.aliyun.com/tools/atlas/进行下载需要的json数据。（数据只到区县级）如图：
1629454040(1).jpg
案例
本案例基于nuxt+echarts的项目背景，使用json格式的数据，来展示河南省地图，结合echarts的API定制、开发样式，监听鼠标事件，实现根据携带参数展示不同的数据。
这里是实例展示地址：http://jckqyfw.hnexpo.org.cn/enterprise/exportBase
正文
nuxt项目和vue项目使用echars的用法基本相同。
实现步骤
1、安装echarts依赖包；
npm install echarts --save
2、在plugins目录下创建echarts.js文件并在里面引入echarts依赖包；
import Vue from 'vue'
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）
3、在nuxt.config.js配置文件中引入我们刚刚创建的echart.js
// 配置插件
plugins: ['~plugins/iview', '~plugins/echarts'],
//配置多个插件
// plugins: [{ src: '@/plugins/echarts.js', ssr: true },{src:'@/plugins/element-ui', ssr:true},],
4、给echarts提供一个容器
.page_main_map
.page_map_con
//-echarts容器
.echarts
div(
:class="className",
:id="id",
:style="{ height: height, width: width }",
v-if="worldDatas.length > 0 && worldGeoCoordMap",
ref="myEchart"
)
.loading(v-else)
img(:src="loadingBack", alt="图片加载失败")
//- 右侧弹框
el-dialog(
:visible.sync="dialog1Visible",
width="400px",
:modal="false",
:before-close="handle1Close"
)
.dialog_show_detail
.name {{ dialogData.name }}
.desc {{ dialogData.desc }}
//nuxt 项目引入了pug模板
5、引入echarts和河南省地图的json数据
import echarts from "echarts"; // 引入echarts
import henan from "../node_modules/echarts/map/json/province/henan.json"; // 引入河南地图数据
6、实例化echarts对象
this.chart = echarts.init(this.$refs.myEchart);
PS：nuxt项目中，用 document.getElementById(this.id)获取DOM元素会报错
报错内容：Cannot read property 'getAttribute' of null
报错展示.jpg
解决办法：使用this.$refs.henanEchart来获取DOM元素
7、加载json数据，并注册到echars中
echarts.registerMap("河南", henan); //加载json数据，并注册到echars中
8、监听浏览器大小变化重渲染组件
window.onresize = echarts.init(this.$refs.myEchart).resize;//监听浏览器大小变化重渲染组件
9、配置series
series（系列）是指：一组数值以及他们映射成的图。
“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。
所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
其中series.type很关键，表示该例是地图还是饼图或者是柱状图，series.data:图表所用数据，实际项目中可以通过http获取数据，再赋值给series.data
var series = [];
[[["郑州", [113.63035, 34.79362, 10]], this.worldDatas]].forEach(
(item, i) => {
series.push(
// 国家级基地
{
type: "effectScatter", //effectScatter 特效散点图
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
// 涟漪特效定制
period: 4, //动画时间，值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 2, //波纹圆环最大限制，值越大波纹越大 4
},
// 标签样式定制
label: {
// 正常样式定制
normal: {
show: false, //label是否显示
position: "right", //显示位置
offset: [5, 0], //label偏移设置
formatter: function (params) {
// console.log(params) //市 名称
//圆环显示文字
return params.data.name;
},
fontSize: 12,
},
// 高亮样式
emphasis: {
show: false, //名称是否显示
},
},
symbol: "circle",
symbolSize: function (val) {
// return 5 + val[0] * 5; //圆环大小
return 10; //圆点的圆心大小
},
// 地图外观
itemStyle: {
// 正常显示的样式
normal: {
show: false,
color: "#fff", //lv色
},
},
// 市 数据详情
data: item[1].map(function (dataItem) {
if (dataItem.type == 1) {
return {
name: dataItem.name,
value: worldGeoCoordMap[dataItem.name],
id: dataItem.id,
desc: dataItem.desc,
};
}
}),
},
// 省级
{
type: "scatter", // scatter
coordinateSystem: "geo",
zlevel: 4,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 2, //波纹圆环最大限制，值越大波纹越大 4
},
label: {
normal: {
show: false, //名称是否显示
position: "right", //显示位置
offset: [5, 0], //国家名称偏移设置
formatter: function (params) {
// console.log(params) //国家名称
//圆环显示文字
return params.data.name;
},
fontSize: 12,
},
// 高亮
emphasis: {
show: false, //名称是否显示
},
},
symbol: "circle",
symbolSize: function (val) {
console.log(val);
// return 5 + val[0] * 5; //圆环大小
return 10; //圆点的圆心大小
},
itemStyle: {
normal: {
show: true,
color: "#f00", //红色
},
},
// 市 数据详情
data: item[1].map(function (dataItem) {
if (dataItem.type == 2) {
return {
name: dataItem.name,
value: worldGeoCoordMap[dataItem.name],
id: dataItem.id,
// flagUrl: dataItem.flagUrl,
desc: dataItem.desc,
};
}
}),
},
// 省会 红色五角星
{
type: "scatter", //图表类型--散点（气泡）图
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4,
brushType: "stroke",
scale: 4,
},
label: {
normal: {
show: true,
position: "top",
// offset:[5, 0],//图标定位偏移量
color: "#0f0",
formatter: "{b}",
textStyle: {
color: "#0f0", //绿色--定位点的字体颜色
},
},
emphasis: {
show: true,
color: "#f60", //橘色--定位点被hover的时候的颜色
},
},
symbol:
"image://http://going-global.oss-cn-beijing.aliyuncs.com/20201026/dff56578f2ba465cb967b2124dd17f62.png", //图片
// symbol: "pin", //图元的图形类别
symbolSize: 15, //图元的大小。
symbolOffset: [0, "-50%"],
color: "#000",
// 坐标
data: [
{
name: item[0][0],
value: item[0][1],
},
],
}
);
}
);
10、配置option
var option = {
backgroundColor: "#013954", //地图背景色
//显示悬浮窗口--标签
tooltip: {
trigger: "item",
confine: true,
// backgroundColor: "rgba(166, 200, 76, 0.82)", //标签背景色
backgroundColor: "rgba(21, 21, 21, 0.82)", //标签背景色
borderColor: "#FFFFCC",
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
extraCssText: "z-index:100;", //修改标签大小样式等
// 点击事件，点击圆点，跳转
formatter: function (params, ticket, callback) {
//根据业务自己拓展要显示的内容
// console.log(params);
var res = "";
var name = params.name;
var flag = "'" + params.data.flagUrl + "'";
res = "" + name + "";
/* res =
"" +
name +
"
"; */
return res;
},
},
visualMap: {
//图例值控制
min: 1, // 值域最小值，必须参数
max: 40, // 值域最大值，必须参数 1
calculable: true, // 是否启用值域漫游
// type:'piecewise',
// splitNumber: 5, //数据的视觉映射
show: false,
// color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],//可根据高低值来做颜色区分
color: ["#fc9700", "#00eaff"], //这里的颜色可以统一设置所有的散点的颜色
textStyle: {
color: "#fff", // 值域控件的文本颜色
},
},
geo: {
map: "河南", // 可选 china world 省份（河南省）
// 关于map的值：中国、世界地图是英文，省份是中文。比如 ‘china’ ，'浙江’等，若填写'zhejiang'是找不到的。引用之前可以查看一下js文件啦。一定要引对
zoom: 1.2, //
// center: [113.625351,34.746303, 10],//坐标定位和left top bottom right冲突，使用一个就可以啦
left: "center", //左右居中
top: "middle", //水平居中
label: {
// 是否显示市区名字
// normal: {
// show: true,
// color: "#000",
// },
// hover高亮的时候显示市区名字
emphasis: {
show: true, //地图中名称的显示与否
color: "#fff",
},
},
roam: true, //是否允许缩放
scaleLimit: {
//所属组件的z分层，z值小的图形会被z值大的图形覆盖
min: 1, //最小的缩放值
max: 40, //最大的缩放值
},
// 地图外观定制
itemStyle: {
// 正常显示的样式
normal: {
color: "rgba(51, 69, 89, .5)", //地图颜色
borderColor: "#516a89", //省市边界线00fcff 516a89
borderWidth: 1,
},
// 鼠标悬浮下样式
emphasis: {
color: "rgba(37, 43, 61, .5)", //高亮背景色
},
},
},
series: series,
};
11、setOptions 设置option里面的配置信息
this.chart.setOption(option);
12、右侧的点击弹出事件
let that = this;
this.chart.on("click", function (param) {
console.log(param);
if (param.data) {
var id = param.data.id;
if (id != "00") {
that.dialogData = {
name: param.data.name,
desc: param.data.desc,
};
that.dialog1Visible = true;
console.log(this.dialog1Visible, this.dialogData);
}
} else {
return;
}
});
注：注意这里的this指向，已经爬过坑啦，不要再掉进去啦！！！
整体代码
.page_main_map
.page_map_con
.echarts
div(
:class="className",
:id="id",
:style="{ height: height, width: width }",
v-if="worldDatas.length > 0 && worldGeoCoordMap",
ref="myEchart"
)
.loading(v-else)
img(:src="loadingBack", alt="图片加载失败")
el-dialog(
:visible.sync="dialog1Visible",
width="400px",
:modal="false",
:before-close="handle1Close"
)
.dialog_show_detail
.name {{ dialogData.name }}
.desc {{ dialogData.desc }}