echarts实现省份迁徙图

深碍√TFBOYSˉ_ 2022-09-07 12:09 261阅读 0赞

## 一、实现效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMDk3OA_size_16_color_FFFFFF_t_70]

## 二、分析 ##

需求分析：

> 1、实现的省份图，边框的阴影是一层一层的  
> 2、实现迁徙图  
> 3、上面有小图标

## 三、实现的逻辑 ##

> 1、引入json，注册registerMap(地图名字，引入json的名字)  
> 2、geo中regions设置图层阴影  
> 3、symbol放图标地址

## 四、代码 ##

代码在别人的基础上改的，代码较多，较乱，有时间再整理

<template>
      <div class="echart-map-container">
        <div id="echartsDivMap" ref="echartsDivMap" class="is-echart"></div>
      </div>
    </template>
    
    <script>
    import * as echarts from "echarts";
    import ShanXiJsonObj from "@/components/echartsMapJson/spg_city1";
    // import countiesJsonObj from "./spg_country";
    // import piePatternSrc2 from "./image1"
    // import piePatternSrc from "./image2"
    // import axios from "axios";
    
    export default {
          
      name: "EchartsMap",
      data() {
          
        return {
          
          myEcharts: null,
          regionNames: [],
          max: 0,
          min: 0,
          bigScreenWidth: 5124,
          defautlRegionName: "Shanxi", // 默认加载地图区域名称
          regionInfo: {
          
            regionCode: "",
            regionName: "",
          },
          barValueType: "unifiedLoad", // 柱形图上显示的数据 "unifiedLoad" 统调负荷, "unifiedElectricity"统调电量, "supplyLoad"上网负荷, "supplyElectricity"上网电量
          isChildRegion: false, // 当前正在显示区县地图
          cityGeoCoordMap: {
          }, // 城市中心点map
          cityInfos: {
          }, // 城市 名称-id-中心点
          countyGeoCoordMap: {
          }, // 区县中心点map
          countyInfos: {
          }, // 区县 名称-id-中心点
          currentCenter: [109.5996, 35.7396], // 当前地图中心点，默认是陕西的中心点
          defaultCenter: [109.5996, 35.7396], // 陕西中心点
          mapLinks: [],
        };
      },
      props: {
          },
      computed: {
          },
      watch: {
          },
      created() {
          
        this.initCityGeoCoordMap();
        // this.initCountyGeoCoordMap();
        // this.getMapLinks()
      },
      mounted() {
          
        this.$nextTick(() => {
          
          this.drawMapWidthData(this.defautlRegionName, ShanXiJsonObj);
        });
      },
      methods: {
          
        getMapLinks() {
          },
        drawMap() {
          },
    
        initCityGeoCoordMap() {
          
          let geoCoordMap = {
          },
            _cityInfos = {
          };
          let arr = ShanXiJsonObj.features;
          // 循环取出 城市名称和value值
          for (let j = 0; j < arr.length; j++) {
          
            let code = arr[j].properties.code;
            let center = arr[j].properties.center;
            let name = arr[j].properties.name;
    
            geoCoordMap[code] = center;
            let infoItem = {
           name, code, center };
            _cityInfos[name] = infoItem;
          }
    
          this.cityGeoCoordMap = geoCoordMap;
          this.cityInfos = _cityInfos;
        },
    
        // initCountyGeoCoordMap () {
          
        // 	let geoCoordMap = {}, _countyInfos = {};
        // 	let arr = countiesJsonObj.features;
        // 	// 循环取出 城市名称和value值
        // 	for (let j = 0; j < arr.length; j++) {
          
        // 		let code = arr[j].properties.code;
        // 		let center = arr[j].properties.center;
        // 		let name = arr[j].properties.NAME;
    
        // 		geoCoordMap[code] = center;
        // 		let infoItem = { name, code, center }
        // 		_countyInfos[name] = infoItem;
        // 	}
    
        // 	this.countyGeoCoordMap = geoCoordMap;
        // 	this.countyInfos = _countyInfos;
        // },
    
        // createGeoCoordMap_Child (regionCode) {
          
        // 	let cityJsonData = require('./echartsMapJson/myGeoCounties/' + regionCode + '.json');
        // 	let arr = cityJsonData.districts[0].districts;
        // 	let result = {};
        // 	for (let j = 0; j < arr.length; j++) {
          
        // 		let center = arr[j].center.split(',');
        // 		let centerArr = [+center[0], +center[1]];
        // 		result[arr[j].adcode] = centerArr;
        // 	}
        // 	return result;
        // },
    
        drawMapWidthData(jsonName, jsonData, geoCoordMap) {
          
          let that = this;
          let jsonName2 = jsonName + "2";
          echarts.registerMap(jsonName, jsonData);
          echarts.registerMap(jsonName2, jsonData);
    
          // that.myEcharts = echarts.init(that.$refs.echartsDivMap);
          let eleMapDiv = document.getElementById("echartsDivMap");
          that.myEcharts = echarts.init(eleMapDiv);
    
          let piePatternImg = new Image();
          // piePatternImg.src = piePatternSrc.piePatternSrc;
    
          let piePatternImg2 = new Image();
          // piePatternImg2.src = piePatternSrc2.piePatternSrc;
    
          // let center = that.myEcharts.convertToPixel('geo', that.currentCenter);
          // let mapTextureImg = import('../../assets/img/icon_shanxi_map.png');
          // let img = new Image();
          // img.src =  '../../assets/img/icon_shanxi_map.png';
          // img.width = '100%';
          // img.height = '100%';
    
          let domImg = document.createElement("img");
          domImg.style.height =
            domImg.height =
            domImg.width =
            domImg.style.width =
              "8px";
          domImg.src =
            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII=";
    
          //格式化数据
          let cityInfo_ = {
          };
          ShanXiJsonObj.features.map((item) => {
          
            return (cityInfo_[item.properties.name] = item.properties.centroid);
          });
          console.log(cityInfo_, "cityInfo_");
          let HHData = [
            [
              {
          
                name: "呼和浩特市",
              },
              {
          
                name: "鄂尔多斯市",
                value: 95,
              },
            ],
            [
              {
          
                name: "呼和浩特市",
              },
              {
          
                name: "乌兰察布市",
                value: 90,
              },
            ],
            [
              {
          
                name: "鄂尔多斯市",
              },
              {
          
                name: "阿拉善盟",
                value: "91",
              },
            ],
            [
              {
          
                name: "鄂尔多斯市",
              },
              {
          
                name: "巴彦淖尔市",
                value: "92",
              },
            ],
            [
              {
          
                name: "鄂尔多斯市",
              },
              {
          
                name: "包头市",
                value: "92",
              },
            ],
          ];
          //格式化文件
          let convertData = function (data) {
          
            let res = [];
    
            for (let i = 0; i < data.length; i++) {
          
              let dataItem = data[i];
              let fromCoord = cityInfo_[dataItem[0].name]; // 出发地的经纬度
              let toCoord = cityInfo_[dataItem[1].name]; // 目的地的经纬度
              if (fromCoord && toCoord) {
          
                res.push({
          
                  fromName: dataItem[0].name,
                  toName: dataItem[1].name,
                  coords: [fromCoord, toCoord],
                  value: dataItem[1].value,
                });
              }
            }
            return res;
          };
          // 图标定位
          let iconData = [
            {
          
              name: "阿拉善盟",
              value: [102.42556, 40.532392,240], //后面的是控制图标的大小
              type: "iconData",
            },
            {
          
              name: "锡林郭勒盟",
              value: [115.51632, 44.232965,240],
              type: "iconData",
            },
          ];
          let series = [];
          [["呼和浩特市", HHData],].forEach(function (item, index) {
          
            series.push(
              //图标的地址
              {
          
                name: "图标",
                type: "scatter",
                coordinateSystem: "geo",
                data: iconData,
                zlevel: 6,
                symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAACPCAYAAABHya34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDA2IDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ODFmOWNiZDQtNjdmMC00NjQwLWI0OTktMWFhODBiYTBmYjUyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAxQzEwQTU2Rjk4RjExRUJBRUQ4Q0REREEwNTMyM0YxIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAxQzEwQTU1Rjk4RjExRUJBRUQ4Q0REREEwNTMyM0YxIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDQ0ZDkzMmEtNmVmMS00Yzg0LTkyZDctYjg4YWViYmVjOTljIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgxZjljYmQ0LTY3ZjAtNDY0MC1iNDk5LTFhYTgwYmEwZmI1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',
                // symbolSize: function (val) {
          
                //   return val[2] / 7.5;
                // }, //这里计算不太好计算，就写了固定的宽高
                symbolSize:  [40, 80],
                symbolOffset:[0,'-40%'],
                itemStyle: {
          
                  normal:{
          
                    shadowBlur: 20, // 阴影模糊级别
                    shadowOffsetX: 3, // 阴影偏移量
                    shadowOffsetY: 0, // 阴影偏移量
                    // shadowColor: 'rgba(0,0,0,0.7)',
                    shadowColor: "rgba(0,187,255,0.8)",
                    top: '5%'
                  }
                },
                z: 7
              },
              //两地之间的动态轨迹
              {
          
                name: item[0],
                type: "line",
                zlevel: 5,
                color: '#CECC43',
                effect: {
          
                  show: true,
                  period: 6, //箭头指向速度，值越小速度越快
                  trailLength: 0.9, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: "diamond", //箭头图标
                  symbolSize: 3, //图标大小
                  color: '#e6db30',
                  loop:true,
                },
                lineStyle: {
          
                  normal: {
          
                    color: "#928464", //固定线的颜色
                    width: 0.3, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    // curveness: 0.3, //尾迹线条曲直度
                    curveness: 0.1,
                  },
                },
                data: convertData(item[1]),
              },
            );
          });
          console.log(series, 'series')
    
          let option = {
          
            animation: false,
            geo: [
              {
          
                map: jsonName, // 上面注册的地图名称
                // roam: true, // true-允许拖动和缩放
                // zoom: 1.155, // 地图初始大小
                // center: [116.366794, 40.400309], // 初始中心位置（这里不设置，表示使用默认值，就不需要每个地方都去设置一下了）
                // center: center,
                // layoutCenter: ['50%', '50%'],
                // layoutSize: '100%',
                
                label: {
          
                  normal: {
          
                    show: true, 
                    
                    color: "#7E7F81", //省份标签字体颜色
                  },
                  emphasis: {
          
                    show: true,
                    color: "#f75a00",
                  },
                },
                itemStyle: {
          
                  normal: {
          
                    areaColor: "transparent", // 地区块儿颜色
                    // borderColor: '#0ed7ff',
                    // borderWidth: 2
                  },
                  // emphasis: {
          
                  // areaColor: '#0ed7ff',
                  // borderColor: '#fff900',
                  // opacity: 0.4
                  // }
                },
                regions: [
                  // 这个是最上面的图层
                  //对不同的区块进行着色
                  {
          
                    name: "呼伦贝尔市", //区块名称
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#aaa",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                        borderColor: "#aaa",
                      },
                    },
                  },
                  {
          
                    name: "兴安盟",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#aaa",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                        borderColor: "#aaa",
                      },
                    },
                  },
                  {
          
                    name: "赤峰市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#aaa",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                        borderColor: "#aaa",
                      },
                    },
                  },
                  {
          
                    name: "通辽市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#aaa",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                        borderColor: "#aaa",
                      },
                    },
                  },
                  {
          
                    name: "呼和浩特市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "包头市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "乌海市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "鄂尔多斯市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "巴彦淖尔市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "乌兰察布市",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "锡林郭勒盟",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "阿拉善盟",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                  {
          
                    name: "薛家湾",
                    itemStyle: {
          
                      normal: {
          
                        borderColor: "#0ed7ff",
                        borderWidth: 2,
                      },
                    },
                    emphasis: {
          
                      itemStyle: {
          
                        areaColor: "#0ed7ff",
                        borderColor: "#fff900",
                        opacity: 0.4,
                      },
                    },
                  },
                ],
                z: 6,
              },
              {
          
                map: jsonName2, // 上面注册的地图名称 // 这层放纹理
                regions: [
                  //对不同的区块进行着色
                  {
          
                    name: "呼伦贝尔市", //区块名称
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "兴安盟",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "赤峰市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "通辽市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg2,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "呼和浩特市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "包头市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "乌海市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "鄂尔多斯市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "巴彦淖尔市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "乌兰察布市",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "锡林郭勒盟",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "阿拉善盟",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                  {
          
                    name: "薛家湾",
                    itemStyle: {
          
                      normal: {
          
                        areaColor: {
          
                          image: piePatternImg,
                          repeat: "repeat",
                        },
                      },
                    },
                  },
                ],
                z: 5,
                silent: true,
              },
              {
          
                map: jsonName2, // 上面注册的地图名称 这层放最上面的黑色阴影
                itemStyle: {
          
                  normal: {
          
                    areaColor: "#172532", // 地区块儿颜色
                    shadowBlur: 1, // 阴影模糊级别
                    shadowOffsetX: 0, // 阴影偏移量
                    shadowOffsetY: 5, // 阴影偏移量
                    // shadowColor: 'rgba(0,0,0, 0.9)',
                    // shadowColor: 'rgba(0,187,255, 0.5)',
                    shadowColor: "#172532",
                    // opacity: 0.8
                  },
                },
                z: 4,
                silent: true,
              },
              {
          
                map: jsonName2, // 上面注册的地图名称  这层放下面的蓝色描边
                itemStyle: {
          
                  normal: {
          
                    areaColor: "#fff", // 地区块儿颜色
                    shadowBlur: 2, // 阴影模糊级别
                    shadowOffsetX: 0, // 阴影偏移量
                    shadowOffsetY: 7, // 阴影偏移量
                    // shadowColor: 'rgba(0,255,255)',
                    // shadowColor: 'rgba(0,187,255, 0.5)',
                    shadowColor: "#20aabb",
                    // opacity: 0.8
                  },
                },
                z: 3,
                silent: true,
              },
              {
          
                map: jsonName2, // 上面注册的地图名称  这层放下面的蓝色发光
                itemStyle: {
          
                  normal: {
          
                    areaColor: "#00bbff", // 地区块儿颜色
                    shadowBlur: 5, // 阴影模糊级别
                    shadowOffsetX: 2, // 阴影偏移量
                    shadowOffsetY: 12, // 阴影偏移量
                    // shadowColor: 'rgba(0,0,0,0.7)',
                    shadowColor: "rgba(0,187,255,0.5)",
                    // opacity: 0.8
                  },
                },
                z: 2,
                silent: true,
              },
              {
          
                map: jsonName2, // 上面注册的地图名称  这层放最下面的黑色发光
                itemStyle: {
          
                  normal: {
          
                    areaColor: "#fff", // 地区块儿颜色
                    shadowBlur: 5, // 阴影模糊级别
                    shadowOffsetX: 2, // 阴影偏移量
                    shadowOffsetY: 20, // 阴影偏移量
                    shadowColor: "rgba(0,0,0,0.7)",
                    // opacity: 0.8
                  },
                },
                z: 1,
                silent: true,
              },
            ],
            series: series,
          };
          console.log(option,'option')
          // setTimeout(function () {
          
          //   let rawData = that.createRawData();
          //   that.renderEachCity(that.myEcharts, geoCoordMap, rawData);
          // }, 0);
    
          that.myEcharts.setOption(option, true); // 渲染地区，需要清空上次渲染的数据
    
          //防止重复触发点击事件
          if (that.myEcharts._$handlers.click) {
          
            that.myEcharts._$handlers.click.length = 0;
          }
          that.myEcharts.on("click", function (e) {
          
            let findItem = that.mapLinks.find((item) => item.cityName == e.name);
            if (findItem != undefined) {
          
              let tempWindow = window.open("_blank");
              tempWindow.location = findItem.cityLink;
            }
            return;
          });
        },
    
        createRawData() {
          
          let result = [];
    
          if (
            this.propsShowDatas &&
            this.propsShowDatas.datas &&
            this.propsShowDatas.datas.length
          ) {
          
            let arr = this.propsShowDatas.datas;
            this.max = 0;
            this.min = 0;
            // 循环取出 城市名称和value值
            for (let j = 0; j < arr.length; j++) {
          
              let data = +arr[j][this.barValueType];
              this.max = this.max > data ? this.max : data;
              this.min = this.min < data ? this.min : data;
              let item = [arr[j].regionCode, data, arr[j].regionName];
              result.push(item);
            }
          }
    
          return result;
        },
    
        renderEachCity(myChart, geoCoordMap, rawData) {
          
          let that = this;
          let option = {
           xAxis: [], yAxis: [], grid: [], series: [] };
    
          // echarts.util.each(rawData, function (dataItem, idx) {
          
          //   let geoCoord = geoCoordMap[dataItem[0]];
          //
          //   // if (!geoCoord) {
          
          //   //   continue;
          //   // }
          //
          //   let coord = myChart.convertToPixel('geo', geoCoord);
          //
          //   idx += '';
          //
          //   let data = [dataItem[1]];
          //
          //   option.xAxis.push({
          
          //     id: idx,
          //     gridId: idx,
          //     type: 'category',
          //     name: that.formatRegionName(dataItem[2]), // 柱形图下面显示的区域名称
          //     nameLocation: 'middle',
          //     splitLine: {
          
          //       show: false
          //     },
          //     axisTick: {
          
          //       show: false
          //     },
          //     axisLabel: {
          
          //       show: false
          //     },
          //     axisLine: {
          
          //       show: false,
          //       onZero: false,
          //       lineStyle: {
          
          //         color: '#e0e0e0'
          //       }
          //     },
          //     z: 100
          //   });
          //   option.yAxis.push({
          
          //     id: idx,
          //     min: that.min,
          //     max: that.max,
          //     gridId: idx,
          //     splitLine: {
          
          //       show: false
          //     },
          //     axisTick: {
          
          //       show: false
          //     },
          //     axisLabel: {
          
          //       show: false
          //     },
          //     axisLine: {
          
          //       show: false,
          //       lineStyle: {
          
          //         color: '#1C70B6'
          //       }
          //     },
          //     z: 100
          //   });
          //   option.grid.push({
          
          //     id: idx,
          //     width: that.convertSize(30),
          //     height: that.convertSize(40),
          //     left: that.convertSize(coord[0] - 20),
          //     top: that.convertSize(coord[1] - 55),
          //     z: 100
          //   });
          //   let barWidth = that.convertSize(8);
          //   option.series.push({
          
          //     // id: idx,
          //     type: 'bar',
          //     barWidth: barWidth,
          //     xAxisId: idx,
          //     yAxisId: idx,
          //     // barGap: 0,
          //     // barCategoryGap: 0,
          //     data: data,
          //     z: 10,
          //     itemStyle: {
          
          //       normal: {
          
          //         label: {
          
          //           show: true,
          //           borderColor: '#FFA32C',
          //           borderWidth: 1,//that.convertSize(2),
          //           borderRadius: that.convertSize(16),
          //           padding: that.convertSize(5),
          //           backgroundColor: '#190B02',
          //           position: 'top',	//在上方显示
          //           textStyle: {	    //数值样式
          //             color: '#FFA32C',
          //             fontSize: that.convertSize(10),
          //           },
          //           formatter: function (params) {
          
          //             let val = params.data;
          //             let type = that.barValueType == 'unifiedLoad' || that.barValueType == 'supplyLoad' ? 'MW' : 'MWh'
          //             return val + 'type';
          //           }
          //         },
          //         barBorderRadius: that.convertSize(12),
          //         color: new echarts.graphic.LinearGradient(
          //           0, 0, 0, 1,
          //           [
          //             {offset: 1, color: '#F77E2F'},
          //             {offset: 0, color: '#FFCD56'}
          //           ]
          //         )
          //       },
          //       emphasis: {
          
          //         barBorderRadius: that.convertSize(13),
          //         shadowBlur: that.convertSize(18),
          //         shadowColor: 'rgba(218,170, 58, 0.7)'
          //       }
          //     }
          //   });
          //   option.series.push({
          
          //     type: 'pictorialBar',
          //     xAxisId: idx,
          //     yAxisId: idx,
          //     symbolSize: [barWidth, that.convertSize(5)],
          //     symbolOffset: [0, 0],
          //     symbolPosition: 'end',
          //     z: 998,
          //     color: "#FF9600",
          //     data: data,
          //   });
          //   option.series.push({
          
          //     type: 'pictorialBar',
          //     xAxisId: idx,
          //     yAxisId: idx,
          //     symbolSize: [barWidth, that.convertSize(5)],
          //     symbolOffset: [0, 0],
          //     // symbolPosition: 'end',
          //     z: 999,
          //     color: "#E05800",
          //     data: data,
          //   });
          //   option.series.push({
          
          //     type: 'pictorialBar',
          //     xAxisId: idx,
          //     yAxisId: idx,
          //     symbolSize: [barWidth * 2, that.convertSize(5) * 2],
          //     symbolOffset: [0, 4],
          //     // symbolPosition: 'end',
          //     z: 1,
          //     color: "rgba(0,0,0,0.6)",
          //     data: data,
          //   });
          //   option.series.push({
          
          //     type: 'pictorialBar',
          //     xAxisId: idx,
          //     yAxisId: idx,
          //     symbolSize: [barWidth * 3, that.convertSize(5) * 2.5],
          //     symbolOffset: [0, 5],
          //     // symbolPosition: 'end',
          //     z: 1,
          //     color: "rgba(0,0,0,0.3)",
          //     data: data,
          //   });
          // });
          for (let idx = 0; idx < rawData.length; idx++) {
          
            let dataItem = rawData[idx];
            let geoCoord = geoCoordMap[dataItem[0]];
    
            if (!geoCoord) {
          
              console.log(
                dataItem[0] + "的geojson数据和服务器返回不一致（本地没有这个id）"
              );
              continue;
            }
    
            let coord = myChart.convertToPixel("geo", geoCoord);
    
            idx += "";
    
            let data = [dataItem[1]];
    
            option.xAxis.push({
          
              id: idx,
              gridId: idx,
              type: "category",
              name: that.formatRegionName(dataItem[2]), // 柱形图下面显示的区域名称
              nameLocation: "middle",
              nameTextStyle: {
          
                color: "#fff",
                // fontWeight:'bold',
                fontSize: 14,
              },
              splitLine: {
          
                show: false,
              },
              axisTick: {
          
                show: false,
              },
              axisLabel: {
          
                show: false,
              },
              offset: -35,
              axisLine: {
          
                show: false,
                onZero: false,
                lineStyle: {
          
                  color: "#ffffff",
                },
              },
              z: 100,
            });
            option.yAxis.push({
          
              id: idx,
              min: that.min,
              max: that.max,
              gridId: idx,
              position: "left",
              splitLine: {
          
                show: false,
              },
              axisTick: {
          
                show: false,
              },
              axisLabel: {
          
                show: false,
              },
              offset: -31,
              axisLine: {
          
                show: false,
                lineStyle: {
          
                  color: "#1C70B6",
                },
              },
              z: 100,
            });
            option.grid.push({
          
              id: idx,
              width: that.convertSize(30),
              height: that.convertSize(40),
              left: that.convertSize(coord[0] - 20),
              top: that.convertSize(coord[1] - 35),
              z: 100,
            });
            // let barWidth = that.convertSize(8);
            // option.series.push({ // 圆柱
            //   // id: idx,
            //   type: 'bar',
            //   barWidth: barWidth,
            //   xAxisId: idx,
            //   yAxisId: idx,
            //   // barGap: 0,
            //   // barCategoryGap: 0,
            //   data: data,
            //   z: 102,
            //   itemStyle: {
          
            //     normal: {
          
            //       label: {
          
            //         show: true,
            //         borderColor: '#FFA32C',
            //         borderWidth: 1,//that.convertSize(2),
            //         borderRadius: that.convertSize(16),
            //         padding: that.convertSize(5),
            //         backgroundColor: '#190B02',
            //         position: 'top',	//在上方显示
            //         textStyle: {	    //数值样式
            //           color: '#FFA32C',
            //           fontSize: that.convertSize(10),
            //         },
            //         formatter: function (params) {
          
            //           let val = params.data;
            //           let type = that.barValueType == 'unifiedLoad' || that.barValueType == 'supplyLoad' ? 'MW' : 'MWh'
            //           return val + type;
            //         }
            //       },
            //       barBorderRadius: that.convertSize(12),
            //       color: new echarts.graphic.LinearGradient(
            //         0, 0, 0, 1,
            //         [
            //           {offset: 1, color: '#F77E2F'},
            //           {offset: 0, color: '#FFCD56'}
            //         ]
            //       )
            //     },
            //     emphasis: {
          
            //       barBorderRadius: that.convertSize(13),
            //       shadowBlur: that.convertSize(18),
            //       shadowColor: 'rgba(218,170, 58, 0.7)'
            //     }
            //   }
            // });
            // option.series.push({ // 圆柱上面的椭圆（圆柱的顶面）
            //   type: 'pictorialBar',
            //   xAxisId: idx,
            //   yAxisId: idx,
            //   symbolSize: [barWidth, that.convertSize(5)],
            //   symbolOffset: [0, 0],
            //   symbolPosition: 'end',
            //   z: 103,
            //   color: "#FF9600",
            //   data: data,
            // });
            // option.series.push({ // 圆柱下面的椭圆（圆柱的底面）
            //   type: 'pictorialBar',
            //   xAxisId: idx,
            //   yAxisId: idx,
            //   symbolSize: [barWidth, that.convertSize(5)],
            //   symbolOffset: [0, 0],
            //   // symbolPosition: 'end',
            //   z: 103,
            //   color: "#E05800",
            //   data: data,
            // });
            // option.series.push({ // 圆柱下面的内圈阴影
            //   type: 'pictorialBar',
            //   xAxisId: idx,
            //   yAxisId: idx,
            //   symbolSize: [barWidth * 2, that.convertSize(5) * 2],
            //   symbolOffset: [0, 4],
            //   // symbolPosition: 'end',
            //   z: 101,
            //   color: "rgba(0,0,0,0.6)",
            //   data: data,
            // });
            // option.series.push({ // 圆柱下面的外圈阴影
            //   type: 'pictorialBar',
            //   xAxisId: idx,
            //   yAxisId: idx,
            //   symbolSize: [barWidth * 3, that.convertSize(5) * 2.5],
            //   symbolOffset: [0, 5],
            //   // symbolPosition: 'end',
            //   z: 100,
            //   color: "rgba(0,0,0,0.3)",
            //   data: data,
            // });
          }
          myChart.setOption(option, false); // 渲染地图区域上的柱形图，需要保留之前渲染的地图区域数据
        },
    
        formatRegionName(oldName) {
          
          if (
            oldName.length > 2 &&
            (oldName.endsWith("市") ||
              oldName.endsWith("县") ||
              oldName.endsWith("区"))
          ) {
          
            let result = oldName.substring(0, oldName.length - 1);
            return result;
          }
          return oldName;
        },
    
        convertSize(size) {
          
          let screenWidth = document.body.clientWidth;
          screenWidth = screenWidth >= 1920 ? screenWidth : 1920;
          let result = size * (screenWidth / this.bigScreenWidth) * 2.7;
          return result;
        },
      },
    };
    </script>
    
    <style scoped>
    .echart-map-container {
          
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    .echart-map-container .map-back {
          
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 999;
      display: inline-block;
    }
    
    .echart-map-container .map-back:hover {
          
      background-color: rgba(0, 0, 0, 0.4);
    }
    
    .is-echart {
          
      /* height: 100%;
        width: 100%; */
      height: 800px;
      width: 800px;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMDk3OA_size_16_color_FFFFFF_t_70]: /images/20220829/9ea811538b504777b3e921ee9ce15b5c.png