echarts制作省区域

1、安装echarts

npm install echarts

2、生成省级json文件

工具：DataV.GeoAtlas地理小工具系列 (aliyun.com)

3、在当前页面引入省级json文件

import anhui from "@/assets/json/anhui.json";

4、在方法中注册可用地图

echarts.registerMap("anhui", { geoJSON: anhui });

5、创建echarts实例

getMapArea();
async function getMapArea() {
  await nextTick();

  echarts.registerMap("anhui", { geoJSON: anhui });
  var chartDom = document.getElementById("mapEcharts");
  var myChart = echarts.init(chartDom);
  var option = {
    title: {
      text: "",
      subtext: "",
      x: "center",
    },
    tooltip: {
      trigger: "item",
    },
    //配置属性
    series: [
      {
        name: "取景地",
        type: "map",
        map: "anhui",
        zoom: 1.2,
        // 区域默认样式
        itemStyle: {
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#1D8CF1", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#66C2F2", // 100% 处的颜色
              },
            ],
          },
          borderColor: "#ADD7FF",
          borderWidth: 1,
          // 鼠标悬停
          emphasis: {
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#DD5600", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#E4B700", // 100% 处的颜色
                },
              ],
            },
          },
        },
        // 点击后的样式
        select: {
          itemStyle: {
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#DD5600", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#E4B700", // 100% 处的颜色
                },
              ],
            },
          },
          label: {
            color: "#fff",
          },
        },
        label: {
          normal: {
            // 静态的时候展示样式
            show: true, // 是否显示地图省份得名称
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            // 高亮状态下的样式 动态展示的样式
            color: "#fff",
          },
        },

        data: [{ name: name, selected: true }], //数据
      },
    ],
  };
  myChart.setOption(option);
  myChart.on("click", function (params) {
    // 点击每个省份的事件，可用于拓展
    // console.log(params.name);
    sessionStorage.setItem("cityName", params.name);
    bus.emit("cityNameChange", params.name);
    getList();
  });
}

6、效果图：