前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue实现echarts地图与table表格数据联动

Vue实现echarts地图与table表格数据联动

作者头像
玖柒的小窝
修改2021-10-20 10:15:34
2.2K0
修改2021-10-20 10:15:34
举报
文章被收录于专栏:各类技术文章~各类技术文章~

前言

今天后端突然告诉我说,需要我实现一下通过点击地图,获取地图的地址,然后通过地址名称来拿取table表格的数据,从而实现表格和数据的联动,我一想,不就添加一个点击事件嘛,简单,结果。。。。

要求实现功能

通过点击地图上面的地址,来改变table表格数据

image.png
image.png

例如点击绍兴市,那么下拉选择框里面的内容就显示绍兴市,table表格里面的内容也显示绍兴市的数据

进行地图以及表格的渲染

渲染地图

代码语言:javascript
复制
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表格,直接复制粘贴过来后,将需要渲染的内容以及字段更改即可

调取查询接口

写上一个查询方法,来调取查询接口

代码语言:javascript
复制
 //获取数据
    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,然后打开页面,点击地图,结果数据没有发生改变。。。。感觉脸有点疼。。。 打开控制台报错如下:

image.png
image.png

找不到这个方法,直接给我干懵了,看了一下方法名,没有写错,那就是this指向有问题了,打印一下thisconsole.log(this),果然有问题

image.png
image.png
image.png
image.png

所以找不到gettexList查询方法

结束

既然this指向echarts,那么久不直接使用this,而是通过箭头函数,来改变this指向从而调取查询方法,更改代码如下:

代码语言:javascript
复制
 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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 要求实现功能
  • 进行地图以及表格的渲染
  • 构建表格
  • 调取查询接口
  • 结束
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档