echart3D地图+高德map（可下钻）
高德地图和echarts结合实现可下钻的地图分布图、散点图、飞线图
gitee源码： gitee源码
echart引入教程：echart引入和组件封装-CSDN博客
1.根据区划编码调用高德api获取地理信息
1.1 引入UI组件库
UI组件库：简介 - AMapUI 组件库|高德地图API
<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<!--引入UI组件库（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
1.2 加载DistrictExplorer（模块名：ui/geo/DistrictExplorer）
高德api获取初始化地理信息：AMapUI 组件库 参考手册 行政地理 行政区划浏览
/**
* @description 根据区划编码调用高德api获取地理信息
* @param {number} adcode 区划编码
*/
getGeoJson(adcode) {
let that = this;
// 高德api获取初始化地理信息，详情可查看 https://lbs.amap.com/api/amap-ui/reference-amap-ui/geo/district-explorer
// DistrictExplorer（行政区划浏览） 提供了全国范围内到区县一级的行政区划数据（含边界）
AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
var districtExplorer = new DistrictExplorer();
districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
// 错误信息 - error
if (error) {
console.error(error);
return;
}
// 区域节点 - AreaNode
// getSubFeatures() 返回该区域中全部的子级区划Feature数组
let Json = areaNode.getSubFeatures();
// 存在子级区域时，直接赋值
if (Json.length > 0) {
that.geoJson.features = Json;
} else if (Json.length === 0) {
// 不存在子级区域时，在原数组中筛选自己本身
that.geoJson.features = that.geoJson.features.filter(
item => item.properties.adcode == adcode
);
if (that.geoJson.features.length === 0) return;
}
that.getMapData();
});
});
},
/**
* @description 获取并整理形成需要的数据
*/
getMapData() {
let mapData = this.geoJson.features.map(item => {
return {
name: item.properties.name,
value: Math.random() * 1000,
cityCode: item.properties.adcode
};
});
// 排序，方便后续更快获取最大值和最小值
mapData = mapData.sort(function (a, b) {
return b.value - a.value;
});
this.initEcharts(mapData);
},
1.3 选择切换市县
chooseArea(val, index) {
// 如果点击自己，直接return
if (this.parentInfo.length === index + 1) {
return;
}
//从aparentInfo索引为 index + 1 的位置开始其后面的都删除，返回的是移除的所有元素所构成的新数组
this.parentInfo.splice(index + 1);
this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code);
},
2.分布图
2.1 实际效果
您的浏览器不支持播放该视频！
2.2 echarts地图渲染
/**
* @description 渲染echarts
* @param {array} mapData 图表数据 [{name: string,value: number,cityCode:number}]
*/
initEcharts(mapData) {
// 获取最小值
var min = mapData[mapData.length - 1].value;
// 获取最大值
var max = mapData[0].value;
// length === 1 时默认本身为最大值，最小值取 0
if (mapData.length === 1) {
min = 0;
}
// 重绘图表时，把之前已经渲染好的图表清空,避免报错
if (this.chart) {
this.chart.dispose()
}
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.DistributionMap, { renderer: 'svg' });
//注册可用的地图，只在 geo 组件或者 map 图表类型中使用
if (this.parentInfo.length === 1) {
echarts.registerMap('china', this.geoJson); //注册
} else {
echarts.registerMap('map', this.geoJson); //注册
}
// 设置图表实例的配置项以及数据
this.chart.setOption({
// 背景色
// backgroundColor: "#03213D",
// 提示框
tooltip: {
trigger: "item",//触发类型,数据项图形触发
formatter: p => { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
let val = p.value;
if (!val) {
val = 0;
}
let txtCon = p.name + ":" + val.toFixed(2);
return txtCon;
}
},
// 标题
title: {
show: true,
left: "center",
top: "15",
text: this.parentInfo[this.parentInfo.length - 1].cityName,
textStyle: {
color: "rgba(147, 235, 248, .8)",
fontSize: 16
}
},
// 工具栏
toolbox: {
// 各工具配置项
feature: {
restore: {//配置项还原
show: true,//true - 可还原地图缩放，数据栏筛选等功能
},
dataView: {//数据视图
optionToContent: function (opt) {
let series = opt.series[0].data; //折线图数据
let div = `<div style="display: flex;align-items: center;justify-content: center;height: 100%;">`
let tdHeads =
'<th style="padding: 0 50px">所在地区</th><th style="padding: 0 50px">销售额</th>'; //表头
let tdBodys = ""; //数据
let table =
`<table border="1" style="border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0; i < series.length; i++) {
table += `<tr>
<td style="padding: 0 50px">${series[i].name}</td>
<td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
</tr>`;
}
table += "</tbody></table></div>";
return div + table;
}
},
saveAsImage: {//保存为图片
name: this.parentInfo[this.parentInfo.length - 1].cityName + "地图"
},
dataZoom: {//数据区域缩放
show: false
},
magicType: {//动态类型切换
show: false
}
},
// 公用的 icon 样式设置
iconStyle: {
borderColor: "#1990DA" //图形的描边颜色
},
top: 15,//工具栏组件离容器上侧的距离
right: 35//工具栏组件离容器右侧的距离
},
// 视觉映射组件，将数据映射到视觉元素(左下方数据组件)
visualMap: {
min: min,//最小值
max: max,//最大值
left: "3%",//组件离容器左侧的距离
bottom: "5%",// 组件离容器下侧的距离
calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
seriesIndex: [0],//指定取哪个系列的数据，即哪个系列的 series.data
inRange: {//定义 在选中范围中 的视觉元素
color: ["#105389", "#3a8abc", "#0D96F1"]//从高到低颜色渐变
},
textStyle: {//文字的颜色
color: "#24CFF4"
}
},
series: [
{
name: "map3D地图分布",
type: "map3D",//地图
map: this.parentInfo.length === 1 ? 'china' : "map",//使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
label: {//图形上的文本标签
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
formatter: p => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
default:
break;
}
return p.name;
},
},
itemStyle: {//地图区域的多边形 图形样式
color: '#105389',
opacity: 1,
borderColor: "#53D9FF",
borderWidth: 1.3,
},
emphasis: {//高亮状态下的多边形和标签样式
label: {
show: true,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
show: false, // 是否显示地面。[ default: false ]
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
},
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#fff', // 主光源的颜色。[ default: #fff ]
intensity: 1, // 主光源的强度。[ default: 1 ]
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.2// 环境光的强度。[ default: 0.2 ]
}
},
data: mapData,
},]
},
true
);
let that = this;
// 解绑鼠标点击事件处理函数，以防重复点击
this.chart.off("click");
// 绑定鼠标点击事件处理函数
this.chart.on("click", params => {
if (
that.parentInfo[that.parentInfo.length - 1].code ==
params.data.cityCode
) {
return;
}
let data = params.data;
that.parentInfo.push({
cityName: data.name,
code: data.cityCode
});
that.getGeoJson(data.cityCode);
});
},
3.散点图
3.1 实际效果
您的浏览器不支持播放该视频！
3.2 echarts地图渲染
initEcharts(mapData) {
// 重绘图表时，把之前已经渲染好的图表清空,避免报错
if (this.chart) {
this.chart.dispose()
}
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.ScatterMap, { renderer: 'svg' });
//注册可用的地图，只在 geo 组件或者 map 图表类型中使用
if (this.parentInfo.length === 1) {
echarts.registerMap('china', this.geoJson); //注册
} else {
echarts.registerMap('map', this.geoJson); //注册
}
// 设置图表实例的配置项以及数据
this.chart.setOption({
// 背景色
// backgroundColor: "#03213D",
// 提示框
tooltip: {
trigger: "item",//触发类型,数据项图形触发
formatter: p => { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
let val = p.value[2];
if (!val) {
val = 0;
}
let txtCon = p.name + ":" + val.toFixed(2);
return txtCon;
}
},
// 标题
title: {
show: true,
left: "center",
top: "15",
text: this.parentInfo[this.parentInfo.length - 1].cityName,
textStyle: {
color: "rgba(147, 235, 248, .8)",
fontSize: 16
}
},
// 工具栏
toolbox: {
// 各工具配置项
feature: {
restore: {//配置项还原
show: true,//true - 可还原地图缩放，数据栏筛选等功能
},
dataView: {//数据视图
optionToContent: function (opt) {
let series = opt.series[0].data; //折线图数据
let div = `<div style="display: flex;align-items: center;justify-content: center;height: 100%;">`
let tdHeads =
'<th style="padding: 0 50px">所在地区</th><th style="padding: 0 50px">销售额</th>'; //表头
let tdBodys = ""; //数据
let table =
`<table border="1" style="border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0; i < series.length; i++) {
table += `<tr>
<td style="padding: 0 50px">${series[i].name}</td>
<td style="padding: 0 50px">${series[i].value[2].toFixed(2)}万</td>
</tr>`;
}
table += "</tbody></table></div>";
return div + table;
}
},
saveAsImage: {//保存为图片
name: this.parentInfo[this.parentInfo.length - 1].cityName + "地图"
},
dataZoom: {//数据区域缩放
show: false
},
magicType: {//动态类型切换
show: false
}
},
// 公用的 icon 样式设置
iconStyle: {
borderColor: "#1990DA" //图形的描边颜色
},
top: 15,//工具栏组件离容器上侧的距离
right: 35//工具栏组件离容器右侧的距离
},
geo3D: {
show: false,//是否显示地理坐标系组件
map: this.parentInfo.length === 1 ? 'china' : 'map', //使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
},
series: [
{
name: "map3D地图分布",
type: "map3D",//地图
map: this.parentInfo.length === 1 ? 'china' : "map",//使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
label: {//图形上的文本标签
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
formatter: p => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
default:
break;
}
return p.name;
},
},
itemStyle: {//地图区域的多边形 图形样式
color: '#105389',
opacity: 1,
borderColor: "#53D9FF",
borderWidth: 1.3,
},
emphasis: {//高亮状态下的多边形和标签样式
label: {
show: true,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
show: false, // 是否显示地面。[ default: false ]
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
},
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#fff', // 主光源的颜色。[ default: #fff ]
intensity: 1, // 主光源的强度。[ default: 1 ]
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.2// 环境光的强度。[ default: 0.2 ]
}
},
data: mapData,
},
{
name: '散点',
type: 'scatter3D',//类型
data: mapData,
coordinateSystem: 'geo3D',//使用地理坐标系
geo3DIndex: 0,
symbol: 'pin',
symbolSize: function (val) {//设置点的大小
return val[2] / 1.5
},
label: {//图形上的文本标签
show: false,//地图上是否有文字
formatter: p => {
return p.value[2].toFixed()
},
position: 'center',
color: '#fff'
},
emphasis: {//高亮的图形和标签样式
label: {
show: false,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
itemStyle: {//图形样式
color: '#f9b207', //地图点的颜色
borderWidth: 0.5,
borderColor: '#fff'
},
zlevel: 10,
}]
},
true
);
let that = this;
// 解绑鼠标点击事件处理函数，以防重复点击
this.chart.off("click");
// 绑定鼠标点击事件处理函数
this.chart.on("click", params => {
console.log('params :>> ', params);
if (!params.data) {
return
}
if (
that.parentInfo[that.parentInfo.length - 1].code ==
params.data.cityCode
) {
return;
}
let data = params.data;
that.parentInfo.push({
cityName: data.name,
code: data.cityCode
});
that.getGeoJson(data.cityCode);
});
},
4.飞线图
4.1 实际效果
您的浏览器不支持播放该视频！
4.2 echarts地图渲染
initEcharts(mapData, lineToLf) {
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
// 重绘图表时，把之前已经渲染好的图表清空,避免报错
if (this.chart) {
this.chart.dispose()
}
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.FlightMap, { renderer: 'svg' });
//注册可用的地图，只在 geo 组件或者 map 图表类型中使用
if (this.parentInfo.length === 1) {
echarts.registerMap('china', this.geoJson); //注册
} else {
echarts.registerMap('map', this.geoJson); //注册
}
// 设置图表实例的配置项以及数据
this.chart.setOption({
// 背景色
// backgroundColor: "#03213D",
renderAsFlat: false, // 设置为 false，以启用三维效果
// 提示框
tooltip: {
trigger: "item",//触发类型,数据项图形触发
formatter: p => { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
let txtCon = ''
if (p.seriesType === "scatter3D") {
let val = p.value[3];
if (!val) {
val = 0;
}
txtCon = p.name + ":" + val.toFixed(2);
} else if (p.seriesType === "lines3D") {
txtCon = p.data.lineToName[0] + " - " + p.data.lineToName[1]
}
return txtCon;
}
},
// 标题
title: {
show: true,
left: "center",
top: "15",
text: this.parentInfo[this.parentInfo.length - 1].cityName,
textStyle: {
color: "rgba(147, 235, 248, .8)",
fontSize: 16
}
},
// 工具栏
toolbox: {
// 各工具配置项
feature: {
restore: {//配置项还原
show: true,//true - 可还原地图缩放，数据栏筛选等功能
},
dataView: {//数据视图
optionToContent: function (opt) {
let series = opt.series[0].data; //折线图数据
let div = `<div style="display: flex;align-items: center;justify-content: center;height: 100%;">`
let tdHeads =
'<th style="padding: 0 50px">所在地区</th><th style="padding: 0 50px">销售额</th>'; //表头
let tdBodys = ""; //数据
let table =
`<table border="1" style="border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0; i < series.length; i++) {
table += `<tr>
<td style="padding: 0 50px">${series[i].name}</td>
<td style="padding: 0 50px">${series[i].value[2].toFixed(2)}万</td>
</tr>`;
}
table += "</tbody></table></div>";
return div + table;
}
},
saveAsImage: {//保存为图片
name: this.parentInfo[this.parentInfo.length - 1].cityName + "地图"
},
dataZoom: {//数据区域缩放
show: false
},
magicType: {//动态类型切换
show: false
}
},
// 公用的 icon 样式设置
iconStyle: {
borderColor: "#1990DA" //图形的描边颜色
},
top: 15,//工具栏组件离容器上侧的距离
right: 35//工具栏组件离容器右侧的距离
},
geo3D: {
show: false,//是否显示地理坐标系组件
map: this.parentInfo.length === 1 ? 'china' : 'map', //使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
},
series: [
{
name: "map3D地图分布",
type: "map3D",//地图
map: this.parentInfo.length === 1 ? 'china' : "map",//使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
label: {//图形上的文本标签
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
formatter: p => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
default:
break;
}
return p.name;
},
},
itemStyle: {//地图区域的多边形 图形样式
color: '#105389',
opacity: 1,
borderColor: "#53D9FF",
borderWidth: 1.3,
},
emphasis: {//高亮状态下的多边形和标签样式
label: {
show: true,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
show: false, // 是否显示地面。[ default: false ]
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
},
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#fff', // 主光源的颜色。[ default: #fff ]
intensity: 1, // 主光源的强度。[ default: 1 ]
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.2// 环境光的强度。[ default: 0.2 ]
}
},
data: mapData,
},
{
name: '散点',
type: 'scatter3D',//类型
data: mapData,
coordinateSystem: 'geo3D',//使用地理坐标系
geo3DIndex: 0,
symbol: 'pin',
symbolSize: 20,
// symbolSize: function (val) {//设置点的大小
// return val[2] / 1.5
// },
label: {//图形上的文本标签
show: false,//地图上是否有文字
formatter: p => {
return p.value[3].toFixed()
},
position: 'center',
color: '#fff'
},
emphasis: {//高亮的图形和标签样式
label: {
show: false,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
itemStyle: {//图形样式
color: '#f9b207', //地图点的颜色
borderWidth: 0.5,
borderColor: '#fff'
},
zlevel: 10,
},
// 地图线的动画效果
{
name: '地图线',
type: 'lines3D',
coordinateSystem: 'geo3D',
geo3DIndex: 0,
effect: { // 尾迹线(动画线)
show: true,
trailWidth: 2, // 宽度
trailOpacity: 0.5, // 透明度
trailLength: 0.5, // 尾迹线长度
constantSpeed: 5, // 速度
period: 4 // 箭头指向速度，值越小速度越快
},
blendMode: 'lighter',
lineStyle: { // 参考线
color: '#f9b207',
width: 2,
opacity: 0.2
},
data: lineToLf,
// zlevel: 8,
}]
},
true
);
let that = this;
// 解绑鼠标点击事件处理函数，以防重复点击
this.chart.off("click");
// 绑定鼠标点击事件处理函数
this.chart.on("click", params => {
console.log('params :>> ', params);
// 只有点击散点可以下钻
if (params.seriesType !== "scatter3D") {
return
}
if (!params.data) {
return
}
if (
that.parentInfo[that.parentInfo.length - 1].code ==
params.data.cityCode
) {
return;
}
let data = params.data;
that.parentInfo.push({
cityName: data.name,
code: data.cityCode
});
that.getGeoJson(data.cityCode);
});
},
5.分布散点地图
5.1 实际效果
您的浏览器不支持播放该视频！
5.2 echarts地图渲染
initEcharts(mapData, scatterData) {
// 获取最小值
var min = mapData[mapData.length - 1].value;
// 获取最大值
var max = mapData[0].value;
// length === 1 时默认本身为最大值，最小值取 0
if (mapData.length === 1) {
min = 0;
}
// 重绘图表时，把之前已经渲染好的图表清空,避免报错
if (this.chart) {
this.chart.dispose()
}
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.AllMap, { renderer: 'svg' });
//注册可用的地图，只在 geo 组件或者 map 图表类型中使用
if (this.parentInfo.length === 1) {
echarts.registerMap('china', this.geoJson); //注册
} else {
echarts.registerMap('map', this.geoJson); //注册
}
// 设置图表实例的配置项以及数据
this.chart.setOption({
// 背景色
backgroundColor: "#03213D",
// 提示框
tooltip: {
trigger: "item",//触发类型,数据项图形触发
// formatter: p => { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
// let val = p.value[2];
// if (!val) {
// val = 0;
// }
// let txtCon = p.name + ":" + val.toFixed(2);
// return txtCon;
// }
},
// 标题
title: {
show: true,
left: "center",
top: "15",
text: this.parentInfo[this.parentInfo.length - 1].cityName,
textStyle: {
color: "rgba(147, 235, 248, .8)",
fontSize: 16
}
},
grid: {
right: '2%',
top: '12%',
bottom: '8%',
width: '20%'
},
// 工具栏
toolbox: {
// 各工具配置项
feature: {
restore: {//配置项还原
show: true,//true - 可还原地图缩放，数据栏筛选等功能
},
dataView: {//数据视图
optionToContent: function (opt) {
let series = opt.series[0].data; //折线图数据
let div = `<div style="display: flex;align-items: center;justify-content: center;height: 100%;">`
let tdHeads =
'<th style="padding: 0 50px">所在地区</th><th style="padding: 0 50px">销售额</th>'; //表头
let tdBodys = ""; //数据
let table =
`<table border="1" style="border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0; i < series.length; i++) {
table += `<tr>
<td style="padding: 0 50px">${series[i].name}</td>
<td style="padding: 0 50px">${series[i].value[2].toFixed(2)}万</td>
</tr>`;
}
table += "</tbody></table></div>";
return div + table;
}
},
saveAsImage: {//保存为图片
name: this.parentInfo[this.parentInfo.length - 1].cityName + "地图"
},
dataZoom: {//数据区域缩放
show: false
},
magicType: {//动态类型切换
show: false
}
},
// 公用的 icon 样式设置
iconStyle: {
borderColor: "#1990DA" //图形的描边颜色
},
top: 15,//工具栏组件离容器上侧的距离
right: 35//工具栏组件离容器右侧的距离
},
// 视觉映射组件，将数据映射到视觉元素(左下方数据组件)
visualMap: {
type: 'continuous',
min: min,//最小值
max: max,//最大值
left: "3%",//组件离容器左侧的距离
bottom: "5%",// 组件离容器下侧的距离
calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
seriesIndex: [0],//指定取哪个系列的数据，即哪个系列的 series.data
inRange: {//定义 在选中范围中 的视觉元素
color: ['#24CFF4', '#2E98CA', '#1E62AC']//从高到低颜色渐变
},
textStyle: {//文字的颜色
color: "#24CFF4"
}
},
geo3D: {
show: false,//是否显示地理坐标系组件
map: this.parentInfo.length === 1 ? 'china' : 'map', //使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
// viewControl: { // 用于鼠标的旋转，缩放等视角控制。
// projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
// autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
// autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
// autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
// autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
// damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
// rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
// zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
// panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
// panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
// rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
// distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
// minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
// maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
// alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
// beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
// minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
// maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
// minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
// maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
// center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
// animation: true, // 是否开启动画。[ default: true ]
// animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
// animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
// },
},
series: [{
name: "map3D地图分布",
type: "map3D",//地图
map: this.parentInfo.length === 1 ? 'china' : "map",//使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
label: {//图形上的文本标签
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
formatter: p => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
default:
break;
}
return p.name;
},
},
itemStyle: {//地图区域的多边形 图形样式
color: '#105389',
opacity: 1,
borderColor: "#53D9FF",
borderWidth: 1.3,
},
emphasis: {//高亮状态下的多边形和标签样式
label: {
show: true,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
// 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
// environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置为垂直渐变的背景
// offset: 0, color: '#00aaff' // 天空颜色
// }, {
// offset: 0.7, color: '#998866' // 地面颜色
// }, {
// offset: 1, color: '#998866' // 地面颜色
// }], false),
groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
show: false, // 是否显示地面。[ default: false ]
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
},
// shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
// 'color' 只显示颜色，不受光照等其它因素的影响。
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#fff', // 主光源的颜色。[ default: #fff ]
intensity: 1, // 主光源的强度。[ default: 1 ]
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.2// 环境光的强度。[ default: 0.2 ]
}
},
// viewControl: { // 用于鼠标的旋转，缩放等视角控制。
// projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
// autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
// autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
// autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
// autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
// damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
// rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
// zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
// panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
// panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
// rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
// distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
// minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
// maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
// alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
// beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
// minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
// maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
// minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
// maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
// center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
// animation: true, // 是否开启动画。[ default: true ]
// animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
// animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
// },
data: mapData,
}, {
name: '散点',
type: 'scatter3D',//类型
data: scatterData,
coordinateSystem: 'geo3D',//使用地理坐标系
geo3DIndex: 0,
symbol: 'pin',
symbolSize: 20,
// symbolSize: function (val) {//设置点的大小
// return val[2] / 1.5
// },
label: {//图形上的文本标签
show: false,//地图上是否有文字
formatter: p => {
return p.value[2].toFixed()
},
position: 'center',
color: '#fff'
},
emphasis: {//高亮的图形和标签样式
label: {
show: false,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
itemStyle: {//图形样式
color: '#f9b207', //地图点的颜色
borderWidth: 0.5,
borderColor: '#fff'
},
zlevel: 10,
}]
},
true
);
let that = this;
// 解绑鼠标点击事件处理函数，以防重复点击
this.chart.off("click");
// 绑定鼠标点击事件处理函数
this.chart.on("click", params => {
if (!params.data) {
return
}
if (
that.parentInfo[that.parentInfo.length - 1].code ==
params.data.cityCode
) {
return;
}
let data = params.data;
that.parentInfo.push({
cityName: data.name,
code: data.cityCode
});
that.getGeoJson(data.cityCode);
});
},
6.完整代码
以分布图为示例，只需要把 initEcharts() 函数替换即可。
<template>
<div class="echarts">
<div style="width:100;height:100%" ref="DistributionMap"></div>
<div class="mapChoose">
<span v-for="(item, index) in parentInfo" :key="item.code">
<button class="button type1" @click="chooseArea(item, index)">
{{ item.cityName == '全国' ? '中国' : item.cityName }}
</button>
<span class="iconfont icon-xiayige" v-show="index + 1 != parentInfo.length"></span>
</span>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './mixins/resize'
import 'echarts-gl'
export default {
name: "DistributionMap",
mixins: [resize],
data() {
return {
chart: null, //地图实列
geoJson: { //高德api获取的地理信息
features: []
},
parentInfo: [{ //地图列表（默认为全国-中国）
cityName: "全国", //
code: 100000 //全国的区划编码
}]
};
},
mounted() {
// 初始化地理信息，并实例化地图
this.$nextTick(() => {
this.getGeoJson(100000);
})
},
//页面销毁前，销毁事件和实例
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
/**
* @description 根据区划编码调用高德api获取地理信息
* @param {number} adcode 区划编码
*/
getGeoJson(adcode) {
let that = this;
// 高德api获取初始化地理信息，详情可查看 https://lbs.amap.com/api/amap-ui/reference-amap-ui/geo/district-explorer
// DistrictExplorer（行政区划浏览） 提供了全国范围内到区县一级的行政区划数据（含边界）
AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
var districtExplorer = new DistrictExplorer();
districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
// 错误信息 - error
if (error) {
console.error(error);
return;
}
// 区域节点 - AreaNode
// getSubFeatures() 返回该区域中全部的子级区划Feature数组
let Json = areaNode.getSubFeatures();
// 存在子级区域时，直接赋值
if (Json.length > 0) {
that.geoJson.features = Json;
} else if (Json.length === 0) {
// 不存在子级区域时，在原数组中筛选自己本身
that.geoJson.features = that.geoJson.features.filter(
item => item.properties.adcode == adcode
);
if (that.geoJson.features.length === 0) return;
}
that.getMapData();
});
});
},
/**
* @description 获取并整理形成需要的数据
*/
getMapData() {
let mapData = this.geoJson.features.map(item => {
return {
name: item.properties.name,
value: Math.random() * 1000,
cityCode: item.properties.adcode
};
});
// 排序，方便后续更快获取最大值和最小值
mapData = mapData.sort(function (a, b) {
return b.value - a.value;
});
this.initEcharts(mapData);
},
/**
* @description 渲染echarts
* @param {array} mapData 图表数据 [{name: string,value: number,cityCode:number}]
*/
initEcharts(mapData) {
// 获取最小值
var min = mapData[mapData.length - 1].value;
// 获取最大值
var max = mapData[0].value;
// length === 1 时默认本身为最大值，最小值取 0
if (mapData.length === 1) {
min = 0;
}
// 重绘图表时，把之前已经渲染好的图表清空,避免报错
if (this.chart) {
this.chart.dispose()
}
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.DistributionMap, { renderer: 'svg' });
//注册可用的地图，只在 geo 组件或者 map 图表类型中使用
if (this.parentInfo.length === 1) {
echarts.registerMap('china', this.geoJson); //注册
} else {
echarts.registerMap('map', this.geoJson); //注册
}
// 设置图表实例的配置项以及数据
this.chart.setOption({
// 背景色
// backgroundColor: "#03213D",
// 提示框
tooltip: {
trigger: "item",//触发类型,数据项图形触发
formatter: p => { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
let val = p.value;
if (!val) {
val = 0;
}
let txtCon = p.name + ":" + val.toFixed(2);
return txtCon;
}
},
// 标题
title: {
show: true,
left: "center",
top: "15",
text: this.parentInfo[this.parentInfo.length - 1].cityName,
textStyle: {
color: "rgba(147, 235, 248, .8)",
fontSize: 16
}
},
// 工具栏
toolbox: {
// 各工具配置项
feature: {
restore: {//配置项还原
show: true,//true - 可还原地图缩放，数据栏筛选等功能
},
dataView: {//数据视图
optionToContent: function (opt) {
let series = opt.series[0].data; //折线图数据
let div = `<div style="display: flex;align-items: center;justify-content: center;height: 100%;">`
let tdHeads =
'<th style="padding: 0 50px">所在地区</th><th style="padding: 0 50px">销售额</th>'; //表头
let tdBodys = ""; //数据
let table =
`<table border="1" style="border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0; i < series.length; i++) {
table += `<tr>
<td style="padding: 0 50px">${series[i].name}</td>
<td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
</tr>`;
}
table += "</tbody></table></div>";
return div + table;
}
},
saveAsImage: {//保存为图片
name: this.parentInfo[this.parentInfo.length - 1].cityName + "地图"
},
dataZoom: {//数据区域缩放
show: false
},
magicType: {//动态类型切换
show: false
}
},
// 公用的 icon 样式设置
iconStyle: {
borderColor: "#1990DA" //图形的描边颜色
},
top: 15,//工具栏组件离容器上侧的距离
right: 35//工具栏组件离容器右侧的距离
},
// 视觉映射组件，将数据映射到视觉元素(左下方数据组件)
visualMap: {
min: min,//最小值
max: max,//最大值
left: "3%",//组件离容器左侧的距离
bottom: "5%",// 组件离容器下侧的距离
calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
seriesIndex: [0],//指定取哪个系列的数据，即哪个系列的 series.data
inRange: {//定义 在选中范围中 的视觉元素
color: ["#105389", "#3a8abc", "#0D96F1"]//从高到低颜色渐变
},
textStyle: {//文字的颜色
color: "#24CFF4"
}
},
series: [
{
name: "map3D地图分布",
type: "map3D",//地图
map: this.parentInfo.length === 1 ? 'china' : "map",//使用 registerMap 注册的地图名称 ,必须和 registerMap 注册的一致
label: {//图形上的文本标签
show: true,
color: "rgb(249, 249, 249)", //省份标签字体颜色
formatter: p => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
default:
break;
}
return p.name;
},
},
itemStyle: {//地图区域的多边形 图形样式
color: '#105389',
opacity: 1,
borderColor: "#53D9FF",
borderWidth: 1.3,
},
emphasis: {//高亮状态下的多边形和标签样式
label: {
show: true,
color: "#f75a00"
},
itemStyle: {
color: '#8dd7fc',
opacity: 1,
}
},
groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
show: false, // 是否显示地面。[ default: false ]
color: '#aaa' // 地面颜色。[ default: '#aaa' ]
},
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#fff', // 主光源的颜色。[ default: #fff ]
intensity: 1, // 主光源的强度。[ default: 1 ]
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.2// 环境光的强度。[ default: 0.2 ]
}
},
data: mapData,
},]
},
true
);
let that = this;
// 解绑鼠标点击事件处理函数，以防重复点击
this.chart.off("click");
// 绑定鼠标点击事件处理函数
this.chart.on("click", params => {
if (
that.parentInfo[that.parentInfo.length - 1].code ==
params.data.cityCode
) {
return;
}
let data = params.data;
that.parentInfo.push({
cityName: data.name,
code: data.cityCode
});
that.getGeoJson(data.cityCode);
});
},
/**
* @description 选择切换市县
* @param {object} val
* @param {number} index
*/
chooseArea(val, index) {
// 如果点击自己，直接return
if (this.parentInfo.length === index + 1) {
return
}
//从aparentInfo索引为 index + 1 的位置开始其后面的都删除，返回的是移除的所有元素所构成的新数组
this.parentInfo.splice(index + 1)
this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code);
}
}
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
position: relative;
}
.mapChoose {
position: absolute;
left: 20px;
top: 55px;
color: #eee;
.button {
position: relative;
padding: 8px 15px;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
font-size: 14px;
}
.button.type1 {
color: rgba(147, 235, 248, .8);
}
}
</style>
扫一扫
2316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
