vue echarts地图

下载地图文件：

DataV.GeoAtlas地理小工具系列

范围选择器右侧行政区划范围中输入需要选择的省份或地市，选择自己想要的数据格式，这里选择了geojson格式，点右侧的蓝色按钮复制到浏览器地址栏中，打开的geojson文件内容右键另存为json文件即可。

实现代码：

init() {
      // 画布初始化
      if (myChart) {
        myChart.dispose(); // 销毁实例
      }
      let mapDom = document.getElementById("map");
      myChart = echarts.init(mapDom);
      // 隐藏数据刷新动画
      myChart.hideLoading();
      // 注册可用的地图
      echarts.registerMap("jiangsu", jiangsuJson);
      let option = {
        tooltip: {
          triggerOn: "mousemove", // 鼠标移动时触发
        },
        visualMap: {
          show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
          type: "continuous", // 类型为连续型视觉映射
          range: [0, 100], // 定义数据范围，不同数值大小显示为不同的颜色
          calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          inRange: {
            // 定义在选中范围中的视觉元素
            color: ["#00ffff", "#f36a00"]
          },
        },
        // 地理坐标系组件
        geo: {
          map: "jiangsu",
          aspectScale: 0.75, //长宽比
          zoom: 1.2,
          roam: false, // 滚轮 放大缩小
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: {
                // 默认区块颜色
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#BFFFDD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF", // 100% 处的颜色
                  },
                ],
              },
              shadowColor: "#FFFFFF", // 青色
              shadowBlur: 0,
              shadowOffsetX: 10,
              shadowOffsetY: 10,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            id: "map",
            type: "map", // 图表类型
            map: "jiangsu", // 已注册的地图
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#333",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#ece8ef",
                },
              },
            },
            select: {
              // 选中状态下的多边形和标签样式
              itemStyle: {
                borderColor: "#E167F5",
                borderWidth: 1,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3AD7FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0FE017", // 100% 处的颜色
                    },
                  ],
                },
              },
              label: {
                color: "#ece8ef",
              },
            },
            itemStyle: {
              // 地图区域的多边形 图形样式
              normal: {
                borderColor: "#0FE017",
                borderWidth: 0.4,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#DFFBFD", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFFFFF", // 100% 处的颜色
                    },
                  ],
                },
              },
              emphasis: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#D7FFA3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#70FE01", // 100% 处的颜色
                    },
                  ],
                },
                borderColor: "#1F567E",
                borderWidth: 1,
                shadowColor: "rgba(150, 225, 245, 0.7)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
            animation: false,
            data: [
              { name: '南京', value: 9 },
              { name: '宿迁', value: 12 },
            ],
          },
        ],
      };
      // 将配置应用到地图上
      myChart.setOption(option);
      document.getElementById("map").removeEventListener;
      window.addEventListener("resize", () => {
        myChart.resize();
      });
}

?