Vue中绘制echarts地图

3,009 阅读2分钟

现在的Echarts库不再自带地图 地图js or json需要自己下载。

1、启动项目

2、引入自己下载的地图JS

image.png

3、绘制自己想要的地图样式,以及动态效果 这里需要自己定义地图的点,我是在百度地图上一个一个搜的。

  var geoCoordMap = {
        武汉: [114.348023, 30.552286],
        湖南: [112.989635, 28.12162],
        云南: [102.716621, 25.052462],
        辽宁: [123.438048, 41.841886],
        山东: [117.026435, 36.67742],
        重庆: [106.556901, 29.570045],
        陕西: [108.960729, 34.271561],
        广东: [113.272808, 23.139212],
        甘肃: [103.833182, 36.066455],
        广西: [108.334512, 22.821802],
        黑龙江: [126.668637, 45.74793],
        宁夏: [106.26545, 38.477905],
        吉林: [126.55584, 43.843744],
        海南: [110.355294, 20.02449],
        四川: [104.082823, 30.657042],
      };

4、挂载echarts实例

  // 基于准备好的dom,初始化echarts实例
      var mapChart = this.$echarts.init(
        document.querySelector(".dye-wisdom-kuang3-map")
      );
      /*获取地图数据*/
      mapChart.showLoading();
      mapChart.hideLoading();
      var geoCoordMap = {
        武汉: [114.348023, 30.552286],
        湖南: [112.989635, 28.12162],
        云南: [102.716621, 25.052462],
        辽宁: [123.438048, 41.841886],
        山东: [117.026435, 36.67742],
        重庆: [106.556901, 29.570045],
        陕西: [108.960729, 34.271561],
        广东: [113.272808, 23.139212],
        甘肃: [103.833182, 36.066455],
        广西: [108.334512, 22.821802],
        黑龙江: [126.668637, 45.74793],
        宁夏: [106.26545, 38.477905],
        吉林: [126.55584, 43.843744],
        海南: [110.355294, 20.02449],
        四川: [104.082823, 30.657042],
      };

      var GZData = [{      }]

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[1].name];
          var toCoord = geoCoordMap[dataItem[0].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[1].name,
              toName: dataItem[0].name,
              coords: [fromCoord, toCoord],
            });
          }
        }
        return res;
      };
        var color = ["#c5f80e"];
      var series = [];
      [["", GZData]].forEach(function (item, i) {
        series.push(
          {
            name: item[0],
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 3,
            effect: {
              show: true,
              period: 3,
              trailLength: 0,
              symbol: "arrow",
              symbolSize: 3,
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 0.8,
                opacity: 0.6,
                curveness: 0.2,
              },
            },
            data: convertData(item[1]),
          },
          {
            name: item[0],
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            // 文字
            // label: {
            //   normal: {
            //     show: true,
            //     position: "right",
            //     formatter: "{b}",
            //     fontSize: 8,
            //   },
            // },
            symbolSize: function (val) {
              return val[2] / 20;
            },
            itemStyle: {
              normal: {
                color: color[i],
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]),
              };
            }),
          }
        );
      });

      mapChart.setOption({
        tooltip: {
          trigger: "item",
        },
        geo: {
          type: "map",
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false,
          zoom: 1.2,
          itemStyle: {
            normal: {
              //          	color: '#ddd',
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(175,238,238, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(	47,79,79, .1)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        series: series,
      });
      window.addEventListener("resize", function () {
        mapChart.resize();
      });
    },

最后 我给出的代码中 GZData中的数据是自己需要的特性地点,每个人都不一样,这里我给出模板

let GZData = [
 [
          {
            name: "武汉",
          },
          {
            name: "湖南",
            value: 120,
          },
        ],]

形成的效果图

image.png

嘿嘿