echarts 3D地图

安装下载3D扩展组件
npm install echarts-gl

import "echarts-gl";

    initMap() {
      // 基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById("map"));
      // 引用省地图json数据
      let hz = require("../../../../static/china_province/330000_full.json");
      let hz_bg = require("../../../../static/china_province/330000.json");
      // 注册地图
      this.$echarts.registerMap("hz", hz);
      this.$echarts.registerMap("hz_bg", hz_bg);
      let option = {
        // 鼠标移入悬浮
        tooltip: {
          show: false,
          formatter: "{b}:{c}",
        },
        //颜色范围
        visualMap: {
          // icon不显示
          show: false,
          // 设置分段颜色
          pieces: [
            { min: 0, max: 100, color: "#6DA7F0" },
            { min: 100, max: 200, color: "#3D8AE6" },
            { min: 200, max: 300, color: "#2D52C9" },
          ],
        },
        series: [
          {
            type: "map3D",
            name: "浙江",
            selectedMode: "single", //地图高亮单选
            regionHeight: 6, //地图高度
            map: "hz",
            viewControl: {
              rotateSensitivity: 0,
              projection: "orthographic",
              orthographicSize: 110, //控制地图大小
              maxOrthographicSize: 110,
              minOrthographicSize: 110,
              autoRotate: false,
              animation: true,
              alpha: 60,
              beta: 10,
              animationDurationUpdate: 10,
              autoRotateSpeed:5
            },

            label: {
              show: true, //是否显示市
              textStyle: {
                color: "white", //文字颜色
                fontSize: 20, //文字大小
              },
              formatter: (data) => `{num|${data.value}}\n{name|${data.name}}`,
              rich: {
                num: {
                  color: "#FFF",
                  fontSize: 24,
                },
              },
              rich: {
                name: {
                  color: "#FFF",
                  fontSize: 20,
                  textShadow: "0px 2px 4px rgba(17, 40, 114, 0.73)",
                },
              },
            },
            itemStyle: {
              color: "#2B5890", //地图颜色
              borderWidth: 2, //分界线wdith
              borderColor: "#6391E3", //分界线颜色
            },
            emphasis: {
              label: {
                show: true, //是否显示高亮
                textStyle: {
                  color: "#fff", //高亮文字颜色
                },
              },
              itemStyle: {
                color: "#6391E3", //地图高亮颜色
              },
            },
            data: this.mapData,
          },
        ],
      };
      chart.setOption(option);
    },