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

玖柒的小窝

修改于 2021-10-20 10:15:34

2.3K0

修改于 2021-10-20 10:15:34

文章被收录于专栏：各类技术文章~各类技术文章~

前言

今天后端突然告诉我说，需要我实现一下通过点击地图，获取地图的地址，然后通过地址名称来拿取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 删除。

渲染

登录后参与评论

0 条评论

热度