首先导入相对应的省市区json文件 与 js文件
<template>
<div>
<el-row>
<el-col :span="16">
<div id="mapChart"
class="chart"
style="width: 100%;height:500px;"></div>
</el-col>
<el-col :span="8">
<el-table :data="tableData">
<el-table-column label="名称"
prop="name"></el-table-column>
<el-table-column label="个数"
prop="value"></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
import cityMap from '../../../public/map/cityMap'
import provinces from '../../../public/map/provinces'
//中国地图(第一级地图)的ID、Name、Json数据
// var chinaId = 100000;
var chinaName = "china";
var chinaJson = null;
//Echarts地图全局变量,主要是在返回上级地图的方法中会用到
var myChart = null;
var provincesName = null;
export default {
components: {},
data () {
return {
mapChartOption1: {
},
tableData: [],
mapChinaOptions: [
{
areaCode: "新疆",
total: 88
},
{
areaCode: "辽宁",
total: 1199
}
],
mapProvincesOptions: [
{
areaCode: "大连市",
total: 3243
},
{
areaCode: "沈阳市",
total: 33333
},
],
mapCityOptions: [
{
areaCode: "庄河市",
total: 999999
},
{
areaCode: "瓦房店市",
total: 7778678
},
]
};
},
computed: {},
// 监听图表数据的变化
watch: {
mapChartOption1: {
handler (newVal, oldVal) {
if (myChart) {
// 如何有变化 就获取最新的数据 并且渲染
myChart.setOption(newVal);
} else {
// 如何无变化 还是老数据
myChart.setOption(oldVal);
}
},
deep: true,
},
},
methods: {
mapChart (divid) {
this.mapData = [];
var that = this;
//chinaId 为上边定义的变量 值为100000
axios({
url:
"/map/china.json",
withCredentials: false,
}).then((response) => {
//进入页面后 传递的参数为全国的id 然后向json文件发起请求 找到文件名为100000的json文件
//获取到全国的地图文件 渲染出来
const mapJson = response.data;
for (var i = 0; i < mapJson.features.length; i++) {
//mapData为定义的变量 获取到当前所以省份地图json文件中的省份名和区域划代码
this.mapData.push({
name: mapJson.features[i].properties.name,
id: mapJson.features[i].id,
value: 0,
});
}
// //让json地图文件中的区域划代码和请求返回的行政编码作比较 如果相等
// // 进获取数据进行赋值
console.log(this.mapData);
this.mapData.forEach((item) => {
this.mapChinaOptions.forEach((item1) => {
if (item.name == item1.areaCode) {
item.value = item1.total;
}
});
});
console.log(this.mapData);
//省份的json数据赋值
chinaJson = mapJson;
// console.log(chinaJson);
//生成图表
myChart = echarts.init(document.getElementById(divid));
//把上边的数据 都当做参数传递给 函数中
this.registerAndsetOption(myChart, chinaName, mapJson);
const list1 = []
this.mapData.forEach(item => {
console.log(item);
if (item.value !== 0) {
list1.push({
name: item.name,
value: item.value
})
}
})
this.tableData = list1
this.mapChartOption1.series[0].data = this.mapData;
// //这里为当点击某个省份或城市的时候的点击事件
myChart.on("click", function (param) {
that.show = 0;
that.mapData2 = [];
provincesName = provinces.provinces[param.name]
// 获取到当前点击的这个城市的 code
//如果有这个城市的id 就可以请求json 获取子级地图信息
if (provincesName) {
if (provincesName) {
//代表有下级地图
axios({
url:
"/map/province/" +
provincesName +
".json",
withCredentials: false,
}).then((response) => {
// 获取到城市新的json数据
const mapJson = response.data || response;
that.mapData2 = [];
//重新获取相同的数据 给 that.mapData2赋值
for (var i = 0; i < mapJson.features.length; i++) {
that.mapData2.push({
name: mapJson.features[i].properties.name,
value: 0,
});
}
that.mapData2.forEach((item) => {
that.mapProvincesOptions.forEach((item1) => {
if (item.name == item1.areaCode) {
item.value = item1.total;
}
});
});
const list2 = []
that.mapData2.forEach(item => {
console.log(item);
if (item.value !== 0) {
list2.push({
name: item.name,
value: item.value
})
}
})
that.tableData = list2
//重新调用 生成新的地图
that.registerAndsetOption(myChart, param.name, mapJson);
that.mapChartOption1.series[0].data = that.mapData2;
});
} else {
that.show = 1;
// 如果没有就在最后一级 再次点击返回中国地图
//把上边的数据 都当做参数传递给 函数中
that.registerAndsetOption(myChart, chinaName, mapJson);
//返回中国地图 并且把数据重新赋值 给data 防止返回的时候 data数据为空了
that.tableData = that.list1
that.mapChartOption1.series[0].data = that.mapData;
}
} else {
let cityId = cityMap.cityMap[param.name]
that.mapData3 = [];
if (cityId) {
//代表有下级地图
axios({
url:
"/map/city/" +
cityId +
".json",
withCredentials: false,
}).then((response) => {
// 获取到城市新的json数据
const mapJson = response.data
console.log(mapJson);
for (var i = 0; i < mapJson.features.length; i++) {
that.mapData3.push({
name: mapJson.features[i].properties.name,
id: mapJson.features[i].id,
value: 0,
});
}
that.mapData3.forEach((item) => {
that.mapCityOptions.forEach((item1) => {
if (item.name == item1.areaCode) {
item.value = item1.total;
}
});
});
const list3 = []
that.mapData3.forEach(item => {
console.log(item);
if (item.value !== 0) {
list3.push({
name: item.name,
value: item.value
})
}
})
that.tableData = list3
//重新调用 生成新的地图
that.registerAndsetOption(myChart, param.name, mapJson);
that.mapChartOption1.series[0].data = that.mapData3;
//把数据传递给图表data
});
} else {
that.show = 1;
// 如果没有就在最后一级 再次点击返回中国地图
//把上边的数据 都当做参数传递给 函数中
that.registerAndsetOption(myChart, chinaName, mapJson);
//返回中国地图 并且把数据重新赋值 给data 防止返回的时候 data数据为空了
that.tableData = list1
that.mapChartOption1.series[0].data = that.mapData;
}
}
});
});
},
registerAndsetOption (myChart, name, mapJson) {
//把获取到的城市name和 城市地图json 用来注册地图
echarts.registerMap(name, mapJson);
// console.log(name, mapJson);
//图表的配置文件
this.mapChartOption1 = {
//鼠标放置在地图上的显示
tooltip: {
trigger: "item",
formatter: (p) => {
// console.log('guo');
// console.log(p);
//这里p可以获取到所有的数据
let val = p.value;
if (window.isNaN(val)) {
val = 0;
}
let txtCon =
"<div style='text-align:center'>" +
p.name +
":<br />总数:" +
val +
"</div>";
return txtCon;
},
},
series: [
{
type: "map",
map: name,
itemStyle: {
normal: {
//未选中样式
//背景颜色
areaColor: "#909399",
//边框颜色
borderColor: "#fbfdfe",
//边框宽度
borderWidth: 1,
},
emphasis: {
// 选中样式
borderWidth: 1,
//高亮颜色
areaColor: "#2062e6",
label: {
//显示文字
show: true,
textStyle: {
//鼠标移入的字体颜色
color: "black",
},
},
},
},
data: [],
},
],
};
// console.log("111");
// console.log(this.mapChartOption1);
// option && myChart.setOption(this.mapChartOption1);
myChart.setOption(this.mapChartOption1, true);
// alert('1')
},
},
created () {
},
// 图表宽度自适应
mounted () {
this.mapChart("mapChart");
// 自适应
window.onresize = () => {
myChart.resize();
};
},
}
</script>
<style scoped>
</style>