echarts国地图渲染数据的处理

echarts中国地图的渲染方法

1.  
   // 获取中国地图
2.  
   getChinaMap() {
3.  
   // console.log(this.provinceData, "中国地图22222222");
4.  
   var myEcharts = echarts.init(document.getElementById("china"));
5.  
   var option = {
6.  
   // title: {
7.  
   // //标题样式
8.  
   // text: "中国地图",
9.  
   // x: "center",
10.  
    // textStyle: {
11.  
    // fontSize: 18,
12.  
    // color: "black"
13.  
    // }
14.  
    // },
15.  
    tooltip: {
16.  
    trigger: "item",
17.  
    formatter: function(params) {
18.  
    console.log(params);
19.  
    if (params.name) {
20.  
    return (
21.  
    params.name
22.  
    // " : "
23.  
    "<br/>"
24.  
    // "集团:"
25.  
    // (isNaN(params.value) ? 0 : parseInt(params.value))
26.  
    // "<br/>"
27.  
    "项目:"
28.  
    (isNaN(params.projectNum) ? 0 : parseInt(params.projectNum))
29.  
    );
30.  
    }
31.  
    }
32.  
    },
33.  
    visualMap: {
34.  
    show: false,
35.  
    //视觉映射组件
36.  
    top: "bottom",
37.  
    left: "left",
38.  
    min: 10,
39.  
    max: 500000,
40.  
    //text: ['High', 'Low'],
41.  
    realtime: false, //拖拽时，是否实时更新
42.  
    calculable: true, //是否显示拖拽用的手柄
43.  
    inRange: {
44.  
    color: ["lightskyblue", "yellow", "orangered"]
45.  
    }
46.  
    },
47.  
    series: [
48.  
    {
49.  
    name: "模拟数据",
50.  
    type: "map",
51.  
    mapType: "china",
52.  
    roam: false, //是否开启鼠标缩放和平移漫游
53.  
    itemStyle: {
54.  
    //地图区域的多边形 图形样式
55.  
    normal: {
56.  
    //是图形在默认状态下的样式
57.  
    label: {
58.  
    show: true, //是否显示标签
59.  
    textStyle: {
60.  
    color: "black"
61.  
    }
62.  
    }
63.  
    },
64.  
    zoom: 1.5, //地图缩放比例,默认为1
65.  
    emphasis: {
66.  
    //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
67.  
    label: { show: true }
68.  
    }
69.  
    },
70.  
    top: "0%",
71.  
    bottom: "0%", //组件距离容器的距离
72.  
    data: this.provinceData
73.  
    }
74.  
    ]
75.  
    };
76.  
    // 使用刚指定的配置项和数据显示图表。
77.  
    myEcharts.setOption(option);
78.  
    window.addEventListener("resize", () => {
79.  
    if (myEcharts) {
80.  
    myEcharts.resize();
81.  
    }
82.  
    });
83.  
    },

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

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

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

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

1.  
   // 获取省市项目和集团
2.  
   obtainProvinceProject() {
3.  
   // console.log("77777777", this.groupId, this.projectId);
4.  
   const obj = {
5.  
   groupId: this.groupId,
6.  
   projectId: this.projectId
7.  
   };
8.  
   getProvinceProject(obj)
9.  
   .then(res => {
10.  
    console.log("resulting", res.data, this.provinceList);
11.  
     
12.  
    if (res && res.data && res.data.length !== 0) {
13.  
    this.provinceList.push({
14.  
    name: "台湾省"
15.  
    });
16.  
    // let datas = {};
17.  
    for (let i of this.provinceList) {
18.  
    for (let j of res.data) {
19.  
    if (i.code == j.provinceGeocode) {
20.  
    console.log("code相同", i, j);
21.  
    // i.name = i.name.slice(0, 1);
22.  
    i.value = j.groupNum;
23.  
    i.projectNum = j.projectNum;
24.  
     
25.  
    // datas.value = j.projectNum;
26.  
    // datas.projectNum = j.groupNum;
27.  
     
28.  
    // i.value = j.projectNum;
29.  
    // i.projectNum = j.groupNum;
30.  
    } else {
31.  
    i.value = 0;
32.  
    i.projectNum = 0;
33.  
     
34.  
    // datas.value = 0;
35.  
    // datas.projectNum = 0;
36.  
    }
37.  
    const name = i.name;
38.  
    console.log("i.name", i.name, "i", i, "j", j);
39.  
    if (i.name == "黑龙江省") {
40.  
    i.name = i.name.slice(0, 3);
41.  
    } else if (i.name == "内蒙古自治区") {
42.  
    i.name = i.name.slice(0, 3);
43.  
    } else if (
44.  
    i.name == "新疆维吾尔自治区" ||
45.  
    "西藏自治区" ||
46.  
    "宁夏回族自治区" ||
47.  
    "广西壮族自治区"
48.  
    ) {
49.  
    i.name = i.name.slice(0, 2);
50.  
    } else {
51.  
    i.name = i.name.slice(0, name.length - 1);
52.  
    }
53.  
     
54.  
    // this.provinceData.push(i);
55.  
    // const num = [];
56.  
    // num.push(datas);
57.  
    // console.log(num);
58.  
    // this.provinceData = new Set(num);
59.  
    this.provinceData.push(i);
60.  
    }
61.  
    }
62.  
    console.log(this.provinceData, "22222222");
63.  
    // this.provinceData = [
64.  
    // { name: "北京", value: 350000, key: "1" },
65.  
     
66.  
    // ...this.provinceList
67.  
    // ];
68.  
    }
69.  
    })
70.  
    .catch(err => {});
71.  
    },

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

 正确的做法如下:

1.  
   // 获取省市项目和集团
2.  
   obtainProvinceProject() {
3.  
   const obj = {
4.  
   groupId: this.groupId,
5.  
   projectId: this.projectId
6.  
   };
7.  
   getProvinceProject(obj)
8.  
   .then(res => {
9.  
   console.log("resulting", res.data, this.provinceList);
10.  
    if (res && res.data && res.data.length !== 0) {
11.  
    this.provinceList.push({
12.  
    name: "台湾省"
13.  
    });
14.  
    for (let a = 0; a < this.provinceList.length; a ) {
15.  
    let i = this.provinceList[a];
16.  
    i.value = 0;
17.  
    i.groupNum = 0;
18.  
    for (let j of res.data) {
19.  
    if (i.code == j.provinceGeocode) {
20.  
    // this.$set(i, "value", j.projectNum);
21.  
    i.value = j.projectNum;
22.  
    i.groupNum = j.groupNum;
23.  
    console.log("item", i, j);
24.  
    }
25.  
    if (
26.  
    i.name == "新疆维吾尔自治区" ||
27.  
    i.name == "西藏自治区" ||
28.  
    i.name == "宁夏回族自治区" ||
29.  
    i.name == "广西壮族自治区"
30.  
    ) {
31.  
    i.name = i.name.slice(0, 2);
32.  
    } else if (i.name === "内蒙古自治区") {
33.  
    i.name = i.name.slice(0, 3);
34.  
    } else {
35.  
    i.name = i.name.replace("省", "");
36.  
    i.name = i.name.replace("市", "");
37.  
    }
38.  
    }
39.  
    }
40.  
    console.log(this.provinceList, "22222222");
41.  
    }
42.  
    })
43.  
    .catch(err => {});
44.  
    },

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

这篇好文章是转载于：学新通技术网