今天后端突然告诉我说,需要我实现一下通过点击地图,获取地图的地址,然后通过地址名称来拿取table表格的数据,从而实现表格和数据的联动,我一想,不就添加一个点击事件嘛,简单,结果。。。。
通过点击地图上面的地址,来改变table
表格数据
例如点击绍兴市
,那么下拉选择框里面的内容就显示绍兴市,table
表格里面的内容也显示绍兴市的数据
渲染地图
drawMap() {
console.log(3333333);
let echarts = require("echarts");
let myChart = echarts.init(document.getElementById("map"));
var uploadedDataURL = "sx.json";
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap("zhejiang", geoJson);
myChart.setOption({
tooltip: {
formatter: "{b}",
},
series: [
{
// name: "香港18区人口密度",
type: "map",
mapType: "zhejiang", // 自定义扩展图表类型
geo: {
itemStyle: {
normal: {
shadowColor: "rgba(1,39,44,1)",
shadowOffsetX: 0,
shadowOffsetY: 8,
},
},
},
itemStyle: {
normal: {
areaColor: "#5599FF", //地图颜色
borderColor: "white", //边界线颜色
label: { show: true },
},
emphasis: { label: { show: true } },
center: [50, 10],
},
label: {
show: true,
normal: {
textStyle: {
color: "white",
},
},
},
data: [
{ name: "诸暨市", value: 2057 },
{ name: "嵊州市", value: 1577 },
{ name: "柯桥区", value: 3186 },
{ name: "越城区", value: 3992 },
{ name: "上虞区", value: 3045 },
{ name: "新昌县", value: 4689 },
],
},
],
});
myChart.on("click", function (params) {
this.selectvalue = params.name;
// alert(this.selectvalue);
console.log(this.selectvalue);
this.getexList();
});
});
console.log(33333);
},
复制代码
给地图添加点击事件,使用myChart.on
方法,之后在mounted
里面调用drawMap
方法即可生成地图
表格可以使用elementui官网里面的table表格,直接复制粘贴过来后,将需要渲染的内容以及字段更改即可
写上一个查询方法,来调取查询接口
//获取数据
getexList() {
this.tableLoading = true;
sysdetail({
time_type: this.radio1,
style: this.playvalue == "全部" ? "" : this.playvalue,
industry: this.namevalue,
from_time: this.datevalue,
area: this.selectvalue,
}).then((res) => {
this.tableLoading = false;
console.log(666666);
console.log(res.data);
console.log(this.datevalue);
this.tableData = res.data;
}).catch(() => {
this.tableLoading = false;
});
},
复制代码
好了,到这里就已经把表格以及地图和查询接口都搞定了,然后我以为结束了,简直是so easy
,然后打开页面,点击地图,结果数据没有发生改变。。。。感觉脸有点疼。。。 打开控制台报错如下:
找不到这个方法,直接给我干懵了,看了一下方法名,没有写错,那就是this
指向有问题了,打印一下this
,console.log(this)
,果然有问题
所以找不到gettexList
查询方法
既然this
指向echarts
,那么久不直接使用this
,而是通过箭头函数
,来改变this
指向从而调取查询方法,更改代码如下:
myChart.on("click", (params)=> {
this.selectvalue = params.name;
// alert(this.selectvalue);
console.log(this.selectvalue);
console.log(this)
this.getexList();
});
复制代码
Ok,这样就实现了通过点击地图上面的地址来改变table
表格数据的功能
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。