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

原创

已于 2022-11-30 17:49:13 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #前端

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

关键部分解释

成果截图

代码

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,
          },
        });
        serdata.push({
          name: item.properties.xzqhmc,
          value: item.