vue+echarts实现省市县三级联动、以及类似地图的聚合功能
一、效果图如下:二、数据准备:1、全国、各省份以及区县的Json数据(具体视业务而定)三、实现方式:1、联动的实现是比较简单的,我这边是根据点击行政区域来跳转到,然后根据按钮来回到上一级。2、其次是聚合,这里echarts实现的聚合跟传统leaflet、openlayer等Gis框架有所不同,后者是根据缩放比例来控制聚合点的个数和内部数量,而我这里实际上就是根据数量的差异来控制显示,不能根据缩放来
·
一、效果图如下:
二、数据准备:
1、全国、各省份以及区县的Json数据(具体视业务而定)
三、实现方式:
1、联动的实现是比较简单的,我这边是根据点击行政区域来跳转到,然后根据按钮来回到上一级。
2、其次是聚合,这里echarts实现的聚合跟传统leaflet、openlayer等Gis框架有所不同,后者是根据缩放比例来控制聚合点的个数和内部数量显示; 而我这里实际上就是根据数量的差异来控制显示大小,不是根据缩放来动态改变,而是在改变显示区域等级时由后端返回区域显示数据。
3、总体实现步骤如下:
(1)data:
data1、2、3用来存储省市县三级数据,毕竟每次加载都走请求的话也是毕竟较慢的
mychart是图表对象
products是数据集合,单个包含areaId和count两个字段
[{
"areaId": 410000,
"count": 1
},{
"areaId": 420000
"count": 5
},{
"areaId": 430000,
"count": 8
}]
stop_level是否当前区域级别,对应关系如data
(2)代码:
mounted() {
let _this = this;
this.myChart = echarts.init(document.getElementById("echartMap"));
axios
.get("../geoJson/100000.json")
.then((res) => {
_this.data1 = res.data
_this.activeAdcode = 0
_this.drawEchart(res.data);
})
.catch((err) => {
console.log(err);
});
},
destroyed() {
this.myChart.dispose()
},
watch: {
stop_level(newV,oldV) {
if (newV === 2 || newV === 3) {
this.$emit('btnControl',true)
} else if (newV ===1) {
this.$emit('btnControl',false)
}
},
activeAdcode(newV) {
this.ready = false
let param = {
"code": newV,
"level": this.stop_level-1
}
this.getPointsData(param)
}
},
methods: {
drawEchart(data) {
let _this = this
echarts.registerMap("全国", data); // 注册地图数据
const option = {
geo: {
map: "全国",
roam: true, //控制拖动及缩放
zoom: 2,
scaleLimit: {
min: 1,
max: 18,
},
label: { show: true },
// silent: true, // 关闭悬浮事件
itemStyle: {
// 定义样式
normal: {
// 普通状态下的样式
areaColor: "#f8f8f8",
borderColor: "#a4a4a4",
},
},
},
color: ["#FF7B16"],
legend: {
show: true,
orient: "vertical",
y: "bottom",
x: "left",
data: [
{
name: "项目",
},
],
},
tooltip: {
trigger: "item",
formatter: function (params) {
return params.name;
},
},
series: [
{
name: "项目",
type: "scatter",
coordinateSystem: "geo",
data: _this.products,
symbolSize: (value,param) => {
let px = param.data.childrenNum*5 + 5
return px>60? 60: px
},
tooltip: {
formatter: (param) => {
return `地点: ${param.data.name};`+ '\n' + `项目数:${param.data.childrenNum};`
},
extraCssText:'width:120px; white-space:pre-wrap'
},
label: {
show: true,
formatter: (param) => {
return param.data.childrenNum
},
emphasis: {
show: true,
},
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option, true);
this.myChart.off('click');// 这里使用off避免重复调用
this.myChart.on('click', (param,value) => {
let data,url;
switch(this.stop_level) {
case 1:
data = this.data1
break
case 2:
data = this.data2
break
case 3:
data = this.data3
}
const item = this.getItemByName(data.features,param.name)
if(this.stop_level === 1) {
url = `../geoJson/${item.properties.adcode}/province.json`
} else {
url = `../geoJson/${item.properties.parent.adcode}/${item.properties.adcode}.json`
}
axios
.get(url)
.then((res) => {
if(this.stop_level<3) this.stop_level += 1
if(this.stop_level === 2) {
this.data2 = res.data
} else if (this.stop_level === 3) {
this.data3 = res.data
} else if (this.stop_level === 1) {
this.data1 = res.data
}
this.activeAdcode = item.properties.adcode
//取消加过渡效果
// this.myChart.dispose()
this.myChart.clear()
this.drawEchart(res.data);
})
.catch((err) => {
this.$message.warning('暂无行政区划数据!')
});
})
}
},
goBack() {
if(this.stop_level === 3) {
this.drawEchart(this.data2)
this.stop_level = 2
this.activeAdcode = this.data2.features[0].properties.parent.adcode
} else if(this.stop_level === 2) {
this.drawEchart(this.data1)
this.stop_level = 1
this.activeAdcode = 0
}
},
结束!如果对您有帮助,可以点赞加关注,欢迎各位道友在评论区留言讨论
更多推荐
已为社区贡献2条内容
所有评论(0)