vue中如何使用echarts实现地图数据绑定、获取后端接口数据

echarts的地图组件很多人都在前端项目中使用过，是不是方便又快捷，地图动态数据如何与后端发来的数据进行绑定呢？

简单来讲，就是从接口获取到的数据，需要在图表的方法里再次定义一下，然后用setOption方法就可以获取到了。

首先看后端发来的数据长什么样子

• 0: {Address: "吉林", Count: 1}
• 1: {Address: "宁夏", Count: 1}
• 2: {Address: "海南", Count: 1}
• 3: {Address: "河北", Count: 1}
• 4: {Address: "内蒙古", Count: 1}
• 5: {Address: "山东", Count: 2}
• 6: {Address: "江西", Count: 1}
• 7: {Address: "广西", Count: 1}

地图的需求是鼠标放在某一个地区，要显示对应的内容，还有个各个省的数据。

data中的定义

profileData: [], // 地图数据
Address: '', // 地址所在省份
Count: '', // 当前省份的设备数量

前端代码实现
 

 loadDeviceData() {
      const parameters = {
        pageIndex: this.query.pageIndex,
        pageSize: this.query.pageSize,
      };
      console.log('请求参数:', parameters); // 记录请求参数
      this.$http.post('http://localhost:8081/ktsEcloud/DeviceController/GetDeviceLocation', parameters)
          .then(response => {
            console.log('响应数据:', response.data); // 记录响应数据
            const addressData = response.data.data; // 获取后端返回的数据

            // 检查 addressData 是否为数组
            if (Array.isArray(addressData)) {
              // 将后端数据直接转换为图表需要的数据格式
              this.map = addressData.map(item => ({
                Address: item.Address, // 省份名称
                Count: item.Count // 设备数量
              }));

              // 调用绘制地图的方法
              this.loadMap(this.map);
            } else {
              console.error('返回的数据格式不正确:', addressData);
              this.map = [{ Address: '无数据', Count: 0 }];
              this.loadMap(this.map);
            }
          })
          .catch(error => {
            console.error('获取设备数据失败:', error);
            // 如果有错误，也可以显示一个空地图
            this.map = [{ Address: '无数据', Count: 0 }];
            this.loadMap(this.map);
          });
    },

    loadMap(data) {
      const worldMapContainer1 = document.getElementById('distribution_map');
      this.myChart = this.$echarts.init(worldMapContainer1);

      // 定义用于 ECharts 的数据
      const chartData = data.map(item => ({
        name: item.Address,
        value: item.Count
      }));

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'bottom',
          data: ['已安装设备'],
          textStyle: {
            color: '#ccc'
          }
        },
        visualMap: {
          min: 0,
          max: Math.max(...data.map(item => item.Count)) || 1, // 动态设置最大值
          left: 'right',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          color: ['#26cfe4', '#f2b600', '#ec5845'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '已安装设备',
            type: 'map',
            aspectScale: 0.75,
            zoom: 1.5,
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: { color: '#c71585' }
              },
              emphasis: {
                show: true,
                textStyle: { color: '#800080' }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#009fe8',
                areaColor: '#ffffff'
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#4b0082',
                areaColor: '#ffdead'
              }
            },
            data: chartData // 使用转换后的数据
          }
        ]
      };
      this.myChart.setOption(option);
      this.myChart.on('click', function (params) {
        if (params.componentType === 'series') {
          // 点击事件处理
        }
      });
    },
    showAlarmRecords(company) {
      this.selectedCompany = company;
      this.showAlarmDialog = true;
    },
    goToHistoryData(company) {
      this.$router.push({ name: 'EquipmentCharts.vue', params: { company } });
    },
    goToConfiguration(company) {
      // 逻辑处理
    }
  }

效果