vue+echart地图(使用后台加载回来的数据动态切换)

Ts____

已于 2022-11-30 17:49:13 修改

阅读量1.1k

点赞数

分类专栏： vue-echart 文章标签： vue.js echarts 前端

于 2022-11-30 17:43:07 首次发布

本文链接：https://blog.csdn.net/song766426/article/details/128118768

版权

本文介绍如何在Vue.js应用中结合Echarts，使用后台返回的数据动态切换地图。重点在于处理后台数据格式，确保`type`为`MultiPolygon`，并正确设置`coordinates`结构。同时，展示了将数据与地图显示数值和名称对应的方法，以及最终实现的成果截图。文章鼓励读者点赞和在评论区交流问题。

摘要由CSDN通过智能技术生成

代码

关键部分解释

成果截图

代码

let that = this;
      if (
        that.myChart1 != null &&
        that.myChart1 != "" &&
        that.myChart1 != undefined
      ) {
        that.myChart1.dispose(); //销毁
      }
      var chartDom = document.getElementById("mapChart");
      that.myChart1 = that.$echarts.init(chartDom);
      var option;
      let serdata = [];
      let params = {
        type: "FeatureCollection",
        features: [],
      };
      this.mapData.features.forEach((item) => {
        params.features.push({
          type: "Feature",
          geometry: {
            coordinates: [item.geometry.coordinates],
            type: "MultiPolygon",
          },
          properties: {
            name: item.properties.xzqhmc,
            value: item.properties.zongmianji,
          },
        });