echarts实现山西省地图下钻及返回
最近在项目实际业务中为了更清晰的展示省市的数据，使用echarts实现了地图的下钻和返回。因为里面加了实际业务，所以代码有些冗余。
先来看下效果图
一、下载安装echarts
npm install echarts --save
1.echarts不同版本引入方式不同
//5.0以下版本：
import echarts from 'echarts ’
//5.0以上版本：
import * as echarts from ‘echarts’
2.初始化echarts
初始化echarts有两种方法：
html部分：
<div id="main" ref="shanxi" class="map"></div>
js部分：
//
let myChart = echarts.init(document.getElementById("main"));
let.myChart = echarts.init(this.$refs.shanxi);
3.绘制图标（官方案例）
数据添加到setOption里面，有两种方式 第一种：
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表 -----------第一种方式
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
第二种：
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表 -----------第二种方式
var option ={
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChartall.setOption(option);-------第二种方式
二、地图绘制
2.1下载地图的Json文件
第一种方法：DATAV.GeoAtlas:是阿里推出的一个用于获取全国、各省、各市以及个县级市详细地图信息的json文件。
第二种方法：最新全国省市区县geoJSON格式的地图数据，可直接用于echarts地图展示：https://github.com/lyhmyd1211/GeoMapData_CN
- 全国地图: china
- 全国各省地图：province
- 全国各市地图：city
- 全国各区县地图：county
2.2下载好的JSON文件在项目中的使用（本文以山西省为例，山西省都是14开头的JSON文件）
2.3vue页面展示省地图
2.3.1引入外部资源文件
首先将140000.json文件引入到项目当中去。我的项目当中的public文件路径配置是这样的。
2.3.2vue页面html部分
<template>
<div class="main">
<h1 style="font-weight: 600; font-size: 20px">
山西省各市地区供电所数量分布情况
</h1>
<el-button type="text" @click.native="onBack">{{
"山西省" + this.cityName + this.countyName
}}</el-button>
<div id="main" ref="shanxi" class="map"></div>
</div>
</template>
2.3.3地图展示需要引入的js文件
import * as echarts from "echarts";
import shanxiJson from "../../../../public/json/140000.json";
import axios from "axios";
2.3.4省地图实现
fn() {
var that = this;
// var myChart = echarts.init(document.getElementById("main"));
that.myChart = echarts.init(this.$refs.shanxi);
echarts.registerMap("shanxi", shanxiJson); //
that.mapData = shanxiJson.features.map((item, index) => {
return {
name: item.properties.name,
value: Math.floor(Math.random() * 200) + 50,
id: item.id,
level: item.properties.level,
cityCode: item.properties.adcode,
};
});
that.myChart.setOption(
{
//数据映射
visualMap: {
type: "piecewise", //分段标签
min: 50, //最小值
max: 200, //最大值，不设置为无限大
right: 0, //距离右侧位置
bottom: 50, //距离底部位置
orient: "vertical", //组件竖直放置
align: "left", //色块在左
textGap: 11, //文字主体之间的距离
itemSymbol: "circle", //右下角映射组件使用圆点形状
show: true,
seriesIndex: 0, //指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
//一以下是分段式视觉映射组件的每一段的范围
//gt：大于、gte：大于等于、lt：小于、lte：小于等于。
pieces: [
{
gt: 150,
label: "150个以上",
color: "#427d7a",
},
{
gte: 100,
lte: 150,
label: "100-150个",
color: "#4a8a87",
},
{
gte: 50,
lte: 100,
label: "50-100个",
color: "#59a3a0",
},
],
},
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item", // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
alwaysShowContent: false,
backgroundColor: "#427d7a",
borderColor: "rgba(0, 0, 0, 0.16);",
hideDelay: 100,
triggerOn: "mousemove",
enterable: true,
textStyle: {
color: "#DADADA",
fontSize: "12",
width: 20,
height: 30,
overflow: "break",
},
formatter(params) {
return `${params.data.name + ":"}</br>供电所数量:${
params.data.value
}`;
},
showDelay: 100,
},
geo: {
map: "shanxi",
type: "map",
center: [104.114129, 37.550339], //当前视角的中心点
zoom: 1, //当前视角的缩放比例
},
series: [
{
name: "shanxi",
type: "map",
roam: false,
mapType: "shanxi",
data: that.mapData,
layoutCenter: ["50%", "50%"],
layoutSize: "92%",
itemStyle: {
normal: {
show: true,
areaColor: "#59a3a0",
},
},
emphasis: {
itemStyle: {
show: true,
areaColor: "#2b6461", //鼠标滑过区域颜色
},
label: {
show: true,
textStyle: {
color: "#fff", //鼠标经过字体颜色
},
},
},
select: {
// 地图选中区域样式
label: {
// 选中区域的label(文字)样式
color: "#fff",
},
itemStyle: {
// 选中区域的默认样式
areaColor: "#2b6461",
},
},
label: {
normal: {
show: true,
textStyle: {
color: "#000",
},
},
},
},
],
},
true
);
//点击某市地图，加载渲染当前某城市地图
that.myChart.on("click", function (params) {
let cityname = params.data.name;
that.cityName = "—" + cityname;
localStorage.setItem("cityname", JSON.stringify(that.cityName));
if (!cityname) {
that.$message({
message: "无此区域地图显示",
type: "warning",
duration: 1300,
});
} else if (that.cityList.indexOf(cityname) == -1) {
return;
} else {
that.shiji(params.data.id, cityname);
}
});
},
2.3.5山西省地图鼠标单击下钻和右击返回的实现方法
async shiji(cityId, cityname) {
var that = this;
this.orgmap();
axios.get("./json/" + cityId + ".json").then((response) => {
that.myChart = echarts.init(this.$refs.shanxi);
// 重新生成地图的Json数据
echarts.registerMap(cityname, response);
that.cityData = response.features.map((item, index) => {
return {
name: item.properties.name,
value: Math.floor(Math.random() * 100) + 50,
id: "1",
level: item.properties.level,
cityCode: item.properties.adcode,
};
});
that.myChart.setOption({
series: [
{
name: "cityMap",
type: "map",
roam: false,
data: that.cityData,
mapType: cityname,
layoutCenter: ["48%", "50%"],
layoutSize: "68%",
},
],
});
//县级地区左键点击事件
that.myChart.on("click", function (params) {
if (!cityname) {
that.$message({
message: "无此区域地图显示",
type: "warning",
duration: 1300,
});
}
});
let chartBox = this.$refs.shanxi;
chartBox.oncontextmenu = function () {
return false;
}; //阻止浏览器指定区域的右键默认事件
that.myChart.on("contextmenu", (params) => {
that.onBack();
});
});
},
// 地图返回上一级地图事件
onBack() {
this.cityName = "";
setTimeout(() => {
this.fn();
}, 100);
},
703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
