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提供一个容器
<template lang="pug">
.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 }}
</template>
//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 = "<span style='color:#fff;'>" + name + "</span>";
/* res =
"<span style='color:#fff;'>" +
name +
"</span><br/><img style='width:40px;' src=" +
flag +
">"; */
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指向，已经爬过坑啦，不要再掉进去啦！！！
整体代码
<template lang="pug">
.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 }}
</template>
<script>
import http from "~/plugins/axios.js";
import echarts from "echarts";
// import "../node_modules/echarts/map/js/world.js";
import "../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import henan from "../node_modules/echarts/map/json/province/henan.json"; // 引入河南地图数据
// import { getCountryInfoSimple, getAllCountryPosition } from "@/api/index.js";
export default {
name: "echars",
props: {
className: {
type: String,
default: "yourClassName",
},
id: {
type: String,
default: "yourID",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "79vh",
},
},
data() {
return {
dialogTitle: "标题",
dialog1Visible: false,
dialogData: {
title: "",
content: "",
},
loadingBack:
"https://going-global.oss-cn-beijing.aliyuncs.com/images/loading.gif",
title: "图表",
placeholder: "用户名/电话",
find: "2", //1显示新增按钮，2显示导入按钮，若不显示这两个按钮可以写0或者不写值
chart: null,
// 坐标
worldGeoCoordMap: {
郑州: [113.63035, 34.79362, 1],
郑州航空港区智能终端外贸产业基地: [113.818422, 34.463303, 2],
"省级新型耐火材料出口基地（新密）": [113.769057, 34.727621, 1],
},
// 国家详情
worldDatas: [
{
name: "郑州",
value: 0,
id: "00",
flagUrl:
"https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
郑州: [113.63035, 34.79362],
type: 1, // 1 国家级 2 省级
},
{
name: "郑州航空港区智能终端外贸产业基地",
value: 0,
id: "118",
flagUrl:
"https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
郑州航空港区智能终端外贸产业基地: [113.818422, 34.463303],
desc: "郑州航空港经济综合实验区已入驻富士康、中兴、vivo等200多家智能终端企业和超过100家配套企业，形成了“整机+配套+核心零组件”手机全产业链，年产值突破3000亿元，进出口总额达3400亿元，累计生产手机超过12亿部，手机年产量占世界的1/7，成为全球最大的高端智能手机生产基地。",
type: 2, // 1 国家级 2 省级
},
{
name: "省级新型耐火材料出口基地（新密）",
value: 0,
id: "119",
flagUrl:
"https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
"省级新型耐火材料出口基地（新密）": [113.769057, 34.727621],
desc: "新密市外贸进出口企业53家，主要出口行业为耐火材料出口，占比重为90%，主要出口国家为阿根廷、澳大利亚、印度、阿曼、比利时、伊朗、墨西哥、巴基斯坦等国家，我们的主要出口行业耐火材料，总体提质发展是关键，随着节能、环保标准提高及市场竞争压力加大，通过优化布局、关停搬迁、环保治理、改造提升、完善配套等措施，部分技术及设备落后的企业退出市场，产业发展在调整升级中蓄势赋能。截止目前，我市耐材企业从上千家清退保留至305家，企业税收达到历史最高点，产品附加值、亩产经济效益持续提升，“国家级绿色工厂”企业数量逐步增加，行业环保治理成效显著，多家企业被被郑环攻坚办（2020）1号文件列为民生保障类企业，除红色预警外，不会再被限产停产企业，行业发展质量再创佳绩；品牌培育、进出口、研发创新、人工智能、机器人、物联网、大数据、区块链等新技术新模式在行业中广泛运用，数字化提升产业层级作用明显，行业发展步入新的历史时期。目前因为疫情爆发，新密市新型耐火材料出口基地出口企业受影响比较严重，客户推迟签订订单和推迟交货情况较多。进出口运营比较困难，国际运输费用增加，收款时间延长，导致订单量下降，出口额大幅度下滑。随着疫情稳定和国家、省市政策的不断推出和落实，我们也出台政策，加强宣传力度、增强企业信心，稳定和扩大贸易规模，促进产业发展。",
type: 1, // 1 国家级 2 省级
},
],
};
},
mounted() {
console.log(echarts.init(this.$refs.myEchart));
this.$nextTick(() => {
this.initChart(); //世界地图
});
},
created() {
// this.getCountryData(); //国家数据
console.log(henan);
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
handle1Close() {
this.dialog1Visible = false;
console.log(this.dialog1Visible);
this.dialogData = {
name: "",
desc: "",
};
},
// 国家信息
getCountryData() {
// getCountryInfoSimple().then((res) => {
http
.get("http://182.92.149.28:8887/api/countryInfo/simple")
.then((res) => {
// console.log(res.success)
if (res.success) {
let cur = {
name: "郑州",
value: 0,
id: "00",
flagUrl:
"https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
};
res.result.unshift(cur);
this.worldDatas = res.result;
// getAllCountryPosition().then((res) => {
http
.get("http://182.92.149.28:8887/api/countryInfo/position")
.then((res) => {
if (res.success) {
res.result.郑州 = [113.63035, 34.79362, 10];
this.worldGeoCoordMap = res.result;
this.$nextTick(() => {
this.initChart(); //世界地图
});
} else {
this.worldGeoCoordMap = [];
}
});
} else {
this.worldDatas = [];
}
});
},
initChart() {
echarts.registerMap("河南", henan); //加载json数据，并注册到echars中
this.chart = echarts.init(this.$refs.myEchart);
window.onresize = echarts.init(this.$refs.myEchart).resize;//监听浏览器大小变化重渲染组件
this.chart.showLoading({
text: "loading...",
color: "#4cbbff", //浅蓝色
textColor: "#4cbbff",
maskColor: "rgba(0, 0, 0, 0.9)",
zlevel: 0,
fontSize: 12, // 字体大小。从 `v4.8.0` 开始支持。
showSpinner: true, // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
spinnerRadius: 10, // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
lineWidth: 5, // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
});
var worldGeoCoordMap = this.worldGeoCoordMap;
// var worldGeoCoordMap = {
// 中国: [113.63035,34.79362, 0],
// 苏丹: [32.581, 15.496216, 0],
// 泰国: [100.438809, 13.791821, 0],
// 马达加斯加: [47.502249, -18.833648, 0],
// 文莱: [115.0, 4.52, 0],
// 巴基斯坦: [73.1, 33.4, 0],
// 孟加拉国: [90.26, 23.43, 0],
// 希腊: [23.46, 37.58, 0],
// 所罗门群岛: [159.57, -9.27, 0],
// 意大利: [12.29, 41.54, 0],
// 俄罗斯: [37.35, 55.45, 0],
// 斐济: [178.3, -18.06, 0],
// 智利: [-70.747113, -33.417573, 0],
// 巴拿马: [-79.25, 9.0, 0],
// 萨摩亚: [-172.469858, -13.629688, 0],
// };
// 线走向--//对坐标点进行格式化，可格式化坐标点的位置，大小，颜色等
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = worldGeoCoordMap[dataItem[0].name];
var toCoord = [113.63035, 34.79362]; //郑州
if (fromCoord && toCoord) {
res.push([
{
coord: fromCoord,
value: dataItem[0].value,
},
{
coord: toCoord,
},
]);
}
}
return res;
};
var series = [];
[[["郑州", [113.63035, 34.79362, 10]], this.worldDatas]].forEach(
(item, i) => {
// console.log(this.worldGeoCoordMap);
// console.log(this.worldDatas);
// console.log(henan.features);
series.push(
/* // 线--走向
{
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
},
},
data: convertData(item[1]),
}, */
// 国家级基地
{
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) {
// console.log(item);
// console.log(dataItem.name, dataItem); //国家名称 //国家详情数据
// console.log(worldGeoCoordMap[dataItem.name]); //坐标
if (dataItem.type == 1) {
return {
name: dataItem.name,
value: worldGeoCoordMap[dataItem.name],
// value: this.worldGeoCoordMap[dataItem.name],
// value: dataItem.position.concat([0]),
id: dataItem.id,
// flagUrl: dataItem.flagUrl,
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) {
// console.log(item);
// console.log(dataItem.name, dataItem); //国家名称 //国家详情数据
// console.log(worldGeoCoordMap[dataItem.name]); //坐标
if (dataItem.type == 2) {
return {
name: dataItem.name,
value: worldGeoCoordMap[dataItem.name],
// value: this.worldGeoCoordMap[dataItem.name],
// value: dataItem.position.concat([0]),
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],
},
],
}
);
}
);
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 = "<span style='color:#fff;'>" + name + "</span>";
/* res =
"<span style='color:#fff;'>" +
name +
"</span><br/><img style='width:40px;' src=" +
flag +
">"; */
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,
};
this.chart.hideLoading();
// 把配置和数据放这里
this.chart.setOption(option);
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;
}
});
},
},
};
</script>
<style lang="less">
.page_main_map {
.page_map_con {
width: 824px;
.echarts {
.loading {
text-align: center;
height: 90vh;
padding: 300px 0;
img {
display: inline-block;
width: 100px;
}
}
}
}
.dialog_show_detail {
.name {
font-size: 16px;
font-weight: bold;
color: #222222;
line-height: 36px;
padding-bottom: 10px;
}
.desc {
font-size: 14px;
color: #666666;
line-height: 22px;
text-indent: 2em;
}
}
}
</style>
