echarts中国地图渲染数据的处理_echarts map 数据渲染-优快云博客

本文详细介绍了如何处理后端返回的项目和集团数据，将其与省市区编码信息整合，以便于使用ECharts渲染中国地图。通过双重循环筛选数据，修正name属性并设置value和projectNum，确保数据符合ECharts的渲染要求。同时，文章还展示了错误的处理方式及其后果，以及正确的数据处理方法。

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

echarts中国地图的渲染方法

 // 获取中国地图
    getChinaMap() {
      // console.log(this.provinceData, "中国地图22222222");
      var myEcharts = echarts.init(document.getElementById("china"));
      var option = {
        // title: {
        //   //标题样式
        //   text: "中国地图",
        //   x: "center",
        //   textStyle: {
        //     fontSize: 18,
        //     color: "black"
        //   }
        // },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            console.log(params);
            if (params.name) {
              return (
                params.name +
                // " : " +
                "<br/>" +
                // "集团:" +
                // (isNaN(params.value) ? 0 : parseInt(params.value)) +
                // "<br/>" +
                "项目:" +
                (isNaN(params.projectNum) ? 0 : parseInt(params.projectNum))
              );
            }
          }
        },
        visualMap: {
          show: false,
          //视觉映射组件
          top: "bottom",
          left: "left",
          min: 10,
          max: 500000,
          //text: ['High', 'Low'],
          realtime: false, //拖拽时，是否实时更新
          calculable: true, //是否显示拖拽用的手柄
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"]
          }
        },
        series: [
          {
            name: "模拟数据",
            type: "map",
            mapType: "china",
            roam: false, //是否开启鼠标缩放和平移漫游
            itemStyle: {
              //地图区域的多边形 图形样式
              normal: {
                //是图形在默认状态下的样式
                label: {
                  show: true, //是否显示标签
                  textStyle: {
                    color: "black"
                  }
                }
              },
              zoom: 1.5, //地图缩放比例,默认为1
              emphasis: {
                //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: { show: true }
              }
            },
            top: "0%",
            bottom: "0%", //组件距离容器的距离
            data: this.provinceData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myEcharts.setOption(option);
      window.addEventListener("resize", () => {
        if (myEcharts) {
          myEcharts.resize();
        }
      });
    },

provinceData为需要渲染的数据，后端现在返给我们的是这样的数据类型，暂且称res.data

因为后端返给我们的是有项目（projectNum）和集团（groupNum）的对象，需要根据provindeGeccode（各省编码），结合中国各省市的数据(可以百度获取,这里是provinceList)来进行重新整合

下面这是百度获取的省市的编码信息,我们暂且叫它provinceList

下面是具体的数据处理代码：

 // 获取省市项目和集团
    obtainProvinceProject() {
      // console.log("77777777", this.groupId, this.projectId);
      const obj = {
        groupId: this.groupId,
        projectId: this.projectId
      };
      getProvinceProject(obj)
        .then(res => {
          console.log("resulting", res.data, this.provinceList);

          if (res && res.data && res.data.length !== 0) {
            this.provinceList.push({
              name: "台湾省"
            });
            // let datas = {};
            for (let i of this.provinceList) {
              for (let j of res.data) {
                if (i.code == j.provinceGeocode) {
                  console.log("code相同", i, j);
                  // i.name = i.name.slice(0, 1);
                  i.value = j.groupNum;
                  i.projectNum = j.projectNum;

                  // datas.value = j.projectNum;
                  // datas.projectNum = j.groupNum;

                  // i.value = j.projectNum;
                  // i.projectNum = j.groupNum;
                } else {
                  i.value = 0;
                  i.projectNum = 0;

                  // datas.value = 0;
                  // datas.projectNum = 0;
                }
                const name = i.name;
                console.log("i.name", i.name, "i", i, "j", j);
                if (i.name == "黑龙江省") {
                  i.name = i.name.slice(0, 3);
                } else if (i.name == "内蒙古自治区") {
                  i.name = i.name.slice(0, 3);
                } else if (
                  i.name == "新疆维吾尔自治区" ||
                  "西藏自治区" ||
                  "宁夏回族自治区" ||
                  "广西壮族自治区"
                ) {
                  i.name = i.name.slice(0, 2);
                } else {
                  i.name = i.name.slice(0, name.length - 1);
                }

                // this.provinceData.push(i);
                // const num = [];
                // num.push(datas);
                // console.log(num);
                // this.provinceData = new Set(num);
                this.provinceData.push(i);
              }
            }
            console.log(this.provinceData, "22222222");
            // this.provinceData = [
            //   { name: "北京", value: 350000, key: "1" },

            //   ...this.provinceList
            // ];
          }
        })
        .catch(err => {});
    },

这样处理的结果是不对的，双重循环筛选之后的数据，由原来的31个变成了96个，因为经历了双重遍历，定义了新数据provinceData去接收

正确的做法如下:

  // 获取省市项目和集团
    obtainProvinceProject() {
      const obj = {
        groupId: this.groupId,
        projectId: this.projectId
      };
      getProvinceProject(obj)
        .then(res => {
          console.log("resulting", res.data, this.provinceList);
          if (res && res.data && res.data.length !== 0) {
            this.provinceList.push({
              name: "台湾省"
            });
            for (let a = 0; a < this.provinceList.length; a++) {
              let i = this.provinceList[a];
              i.value = 0;
              i.groupNum = 0;
              for (let j of res.data) {
                if (i.code == j.provinceGeocode) {
                  // this.$set(i, "value", j.projectNum);
                  i.value = j.projectNum;
                  i.groupNum = j.groupNum;
                  console.log("item", i, j);
                }
                if (
                  i.name == "新疆维吾尔自治区" ||
                  i.name == "西藏自治区" ||
                  i.name == "宁夏回族自治区" ||
                  i.name == "广西壮族自治区"
                ) {
                  i.name = i.name.slice(0, 2);
                } else if (i.name === "内蒙古自治区") {
                  i.name = i.name.slice(0, 3);
                } else {
                  i.name = i.name.replace("省", "");
                  i.name = i.name.replace("市", "");
                }
              }
            }
            console.log(this.provinceList, "22222222");
          }
        })
        .catch(err => {});
    },

不定义新数据provinceData去接收，而是直接改变了provinceList（省市区编码信息），最终直接去渲染改变后的provinceList，而且echarts中国地图数据渲染有要求，要对name进行一定的处理，才能渲染上去，（echarts的数据必须要包含label和value）