echarts实现省份迁徙图

最新推荐文章于 2024-08-21 22:32:49 发布
最新推荐文章于 2024-08-21 22:32:49 发布
阅读量7.7k 收藏 7
点赞数 2
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44700978/article/details/119865582
版权
本文详细介绍了如何使用ECharts实现带有省份边框阴影、迁徙图和图例的交互地图。通过引入JSON数据并注册地图，设置图层阴影，以及配置系列数据和图标，实现了地图的复杂视觉效果。文章还展示了具体的ECharts配置代码，包括地图纹理、阴影、颜色等细节设置。
摘要由CSDN通过智能技术生成

一、实现效果

在这里插入图片描述

二、分析

需求分析：

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>
「已注销」
关注
专栏目录
echarts迁徙图
01-17
用echarts做感兴趣的可以的迁徙图，感兴趣的可以凑活看看
echarts城市迁徙图
03-22
echears中国城市地图迁移
Echarts地图 不同区域展示不同颜色
最新发布
qq_27426861的博客
08-21 380
下载地址：https://github.com/kartik-v/bootstrap-fileinput/
Echarts 迁徙图DEMO
11-02
Echarts 迁徙图DEMO
Echarts地图的迁徙图
热门推荐
澜岚伊人的博客
10-25 3万+
摘要：终于要开始实现迁徙图了，不过一开始我也是一脸懵。不知道如何下手。在Echarts中查看了好多的案例，终于实现了迁徙效果，但还有个需求还没实现，就是出发点是红色的光圈。目前我的字体颜色和圆圈颜色值是一样，考虑这接下来能不能弄成字体颜色和圆圈颜色不一样。好啦回到迁徙图吧 实现： 1、仔细看了下Echarts中的相关API，写个test文件。 2、在网上查阅大量资料，其中有篇文章写的很详细（...
echarts 迁徙图+百度地图
11-01
echarts 迁徙图+百度地图
echarts-省份地图+柱状图组合.zip
03-26
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图图表，包括省份地图。"echarts-省份地图+柱状图组合.zip" 是一个包含 ECharts ...
ECharts实现某省份热图、轨迹图和线图等例子
02-06
在这个例子中，我们将深入探讨如何使用ECharts实现在某省份上展示热图、轨迹图和线图。 首先，让我们来理解热图（Heat Map）。热图是一种用颜色表示数据密度或强度的可视化方法。在ECharts中，热图通常用于展示某一...
echarts迁徙图所需的所有JS文件
08-01
echarts做中国迁徙图需要的所有JS文件，包括了china.js，以及省份zhejiang.js等全国所有省份对应的JS文件，还包括了echarts.min.js。做echarts迁徙图，全程无忧。
echarts模拟迁徙图打包资料
07-19
在"echarts模拟迁徙图打包资料"中，我们有三个关键文件：echarts.js、china.js和myjs.js。这些文件共同构成了一个展示人口或数据流动的迁徙图示例。 1. **echarts.js**: 这是ECharts的核心库文件，包含了ECharts的...
echarts中国地图----迁徙图
weixin_65635437的博客
06-08 1429
echarts的入门示例以及echarts中国地图----迁徙图
基于SuperMap的Echarts迁徙图
09-18
基于SuperMap的Echarts迁徙图，详尽的系统源码。可预览的系统例子。喜欢的朋友们能，在此基础之后扩展自己的应用。希望大家学习愉快。乐于分享，乐于开源。
echarts实现的迁徙图示例
12-05
使用echarts实现迁徙图示例，希望对大家的开发有所帮助，谢谢！
echarts 河北省人口迁徙图
11-01
使用js和echarts结合制作的人口迁徙图，带动画效果，可以到博客中看效果。
echarts制作天津市迁徙图
12-02
很多场景需要开发迁徙图，为此选择echarts开发一款基于天津市市内区县坐标的迁徙图，动态展现了人流迁徙的示意。
echarts 迁徙图
balabala_1001的博客
11-05 6641
echarts 迁徙图 效果图 代码 function map(){ var myChart2 = echarts.init(document.getElementById('map')); const originName = '洛阳'; const flyGeo = { '洛阳': [112.460299, 34.62677], ...
echarts：迁徙图
Puzzle的博客
05-27 8251
前言 echarts官方之前有一个案例geo-lines，但在新版本中似乎被剔除了 根据代码学习了一下echarts，只为看看效果，所以数据简化了，并对代码做了注释 数据 迁徙数据：高德地图迁徙数据 GeoJSON数据：http://datav.aliyun.com/tools/atlas/ 注意：由于echarts之前提供的china.js数据不符合规定，现在下载不了了，所以使用高德的全国json数据，使用 echarts.registerMap ...
echarts制作迁徙图
ardo_pass的博客
12-02 1万+
使用echarts制作迁徙图，以天津市为例，先上图 代码示例： // 路径配置 require.config({ paths: { echarts: 'build/dist' } }); // 使用 require( [ 'echarts',
Echarts实现中国省份标记可视化展示地图
资源摘要信息: "china_map_各个省份标记_echarts地图_" 在当今的数字时代，数据可视化是传达信息和洞察力的重要工具。对于地域性数据，地图无疑是最直观的展示方式之一。本资源，即 "china_map_各个省份标记_...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值