preface

Today, the backend suddenly told me that I needed to realize the linkage between table and data by clicking on the map to obtain the address of the map, and then using the address name to get the data of the table. I thought, why not add a click event, simple, the result…

Required functions

Change the table data by clicking the address on the map

For example, click Shaoxing City, then the content in the drop-down selection box will show Shaoxing City, and the content in the table will also show the data of Shaoxing City

Render maps and tables

Apply colours to a drawing map

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: "Population density of 18 Districts in Hong Kong ",
              type: "map".mapType: "zhejiang".// Custom extended chart types
              geo: {
                itemStyle: {
                  normal: {
                    shadowColor: "Rgba,39,44,1 (1)".shadowOffsetX: 0.shadowOffsetY: 8,}}},itemStyle: {
                normal: {
                  areaColor: "#5599FF".// Map color
                  borderColor: "white".// Boundary color
                  label: { show: true}},emphasis: { label: { show: true}},center: [50.10],},label: {
                show: true.normal: {
                  textStyle: {
                    color: "white",}}},data: [{name: Zhuji City.value: 2057 },
                { name: "Shengzhou".value: 1577 },
                { name: "Keqiao District".value: 3186 },
                { name: "Cross town".value: 3992 },
                { name: "Shangyu District".value: 3045 },
                { name: Xinchang County.value: 4689},],},],}); myChart.on("click".function (params) {
          this.selectvalue = params.name;
          // alert(this.selectvalue);
          console.log(this.selectvalue);
         this.getexList();
         
        });
      });
      console.log(33333);
    },
Copy the code

Mychart. on = myChart. mounted = drawMap (

Build a table

You can use the Table table from elementUi’s official website to copy and paste it in and change the rendered content and fields

Retrieve the query interface

Write a query method to call up the query interface

 // Get data
    getexList() {
        this.tableLoading = true;
      sysdetail({
        time_type: this.radio1,
        style: this.playvalue == "All" ? "" : 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;
      });
    },
Copy the code

The table, the map, and the query interface are all set up, and THEN I thought I was finished, it was so easy, and then I opened the page, click on the map, and the data did not change… I feel a little pain in my face… The following error occurs when the console is opened:

Log (this, console.log(this)); this, console.log(this); this, console.log(this)

So the gettexList query method is not found

The end of the

Since this refers to echarts, instead of using this directly, use the arrow function to change this to call the query method. The code changes as follows:

 myChart.on("click".(params) = > {
          this.selectvalue = params.name;
          // alert(this.selectvalue);
          console.log(this.selectvalue);
          console.log(this)
         this.getexList();
        });
Copy the code

Ok, so you can change the table data by clicking the address on the map