准备工作
- 在阿里云的DataV中下载需要的地图json文件
地址:http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.29b915ddkUHa9E
开始开发
- 引入json文件
import * as echarts from "echarts";
import ningxia from "../assets/json/宁夏回族自治区.json";
import shizuishan from "../assets/json/石嘴山市.json";
import yinchuan from "../assets/json/银川市.json";
import wuzhong from "../assets/json/吴忠市.json";
import zhongwei from "../assets/json/中卫市.json";
import guyuan from "../assets/json/固原市.json";
- 初始化地图
data() {
return {
mapData: "",
cityData: [
{ 石嘴山市: shizuishan },
{ 银川市: yinchuan },
{ 吴忠市: wuzhong },
{ 中卫市: zhongwei },
{ 固原市: guyuan },
],
};
},
initEchart() {
// 注册地图
echarts.registerMap("ningxia", ningxia); // 如果是js引入就不需要这一行了
var myChart = echarts.init(document.getElementById("mapChart"));
window.mapChart = myChart;
// this.mapData = ningxia.features;
// 初始化
myChart.setOption({
tooltip: {
show: false,
},
geo: {
show: true,
map: "ningxia",
selectedMode: "single",
zoom: 1,
roam: false,
label: {
normal: {
show: false, // 省份名展示
color: "#FFF",
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
areaColor: "#0093E2",
borderColor: "#2FB5FA",
borderWidth: 2,
shadowColor: "#01273F",
shadowOffsetX: 0,
shadowOffsetY: 10,
},
emphasis: {
areaColor: "#2C7FD6",
},
},
},
series: [
{
name: "light",
zlevel: 30,
type: "effectScatter",
coordinateSystem: "geo",
data: null,
symbolSize: function (val) {
return val ? val[2] / 10 : 0;
},
symbolOffset: ["-100%", "0"],
encode: {
value: 2,
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
color: "#0efacc",
period: 9,
scale: 5,
},
hoverAnimation: true,
itemStyle: {
color: "#fff",
shadowBlur: 2,
shadowColor: "#333",
},
},
{
type: "map",
zlevel: 20,
//注册的大地图
map: "ningxia",
roam: false,
zoom: 1,
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
emphasis: {
show: false,
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
normal: {
areaColor: "#0B58BA",
borderColor: "#2FB5FA",
borderWidth: 2,
},
emphasis: {
areaColor: "#2C7FD6",
},
},
data: null,
},
{
name: "scatter",
zlevel: 30,
type: "scatter",
coordinateSystem: "geo",
symbol: "rect",
symbolSize: function (value, params) {
return [params.name.length * 16.67, 18];
},
data: null,
itemStyle: {
normal: {
color: "transparent",
// color: '#fff'
},
},
label: {
normal: {
formatter: function (params) {
const name = "m." + params.name;
if (this.$t(name).startsWith("m.")) {
return params.name;
}
return this.$t(name);
}.bind(this),
show: false,
fontSize: 18,
color: "#fff",
fontWeight: 550,
},
emphasis: {
show: false,
fontSize: 20,
color: "#00DFFF",
},
},
},
],
});
// 单击
myChart.on("click", (params) => {
let _this = this;
let cityArr = _this.cityData.filter((item) => item[params.name]);
let cityName = cityArr[0][params.name];
//注册点击进入的小地图
echarts.registerMap(`${cityName}`, cityName);
myChart.setOption({
geo: {
show: true,
map: `${cityName}`,
selectedMode: "single",
zoom: 1,
roam: false,
},
series: [
{
name: "light",
zlevel: 30,
type: "effectScatter",
coordinateSystem: "geo",
},
{
type: "map",
zlevel: 20,
//注册的小地图
map: `${cityName}`,
roam: false,
zoom: 1,
showLegendSymbol: false, // 存在legend时显示
data: null,
},
{
name: "scatter",
zlevel: 30,
type: "scatter",
coordinateSystem: "geo",
symbol: "rect",
data: null,
},
],
});
// }, 1000);
});
// 双击返回大地图
myChart.on("dblclick", () => {
myChart.setOption({
geo: {
show: true,
map: "ningxia",
selectedMode: "single",
zoom: 1,
roam: false,
},
series: [
{
name: "light",
zlevel: 30,
type: "effectScatter",
coordinateSystem: "geo",
},
{
type: "map",
zlevel: 20,
map: "ningxia",
roam: false,
zoom: 1,
showLegendSymbol: false, // 存在legend时显示
data: null,
},
{
name: "scatter",
zlevel: 30,
type: "scatter",
coordinateSystem: "geo",
symbol: "rect",
data: null,
},
],
});
});
},
(完结)