ditu 最简单的 中国地图

2安装指定版本4.8.0

npm install echarts@4.8.0 --save

 然后

  //地图参数配置

    getMapOpt(place) {

      let option = {

        visualMap: {

          min: 0,

          max: 34,

          left: "left",

          top: "top",

          show: false, //图注

        },

        geo: {

          // 这个是重点配置区

          map: place ? place : "china", // 表示中国地图

          roam: false,

          zoom: 1.2,

          itemStyle: {

            normal: {

              borderColor: "rgba(24, 187, 230, 1)",

              areaColor: "#08090f", //地图颜色

              borderColor: "#18BBE6",

              borderWidth: 1,

            },

            emphasis: {

              areaColor: "#18BBE6", //选中的颜se

            },

          },

          label: {

            emphasis: {

              color: "#ffffff",

            },

          },

        },

        series: [

          {

            type: "scatter",

            coordinateSystem: "geo", // 对应上方配置

          },

        ],

      };

      return option;

    },

    initMap(place) {

      console.log(this.map);

      setTimeout(() => {

        this.map = echarts.init(document.getElementById("map"));

        window.onresize = this.map.resize;

        this.map.showLoading(); //加动画效果

        let option = this.getMapOpt(place);

        if (option && typeof option === "object") {

          this.map.setOption(option, true);

          setTimeout(() => {

            this.map.hideLoading();

          }, 500);

        }

        this.map.on("click", (param) => {

          console.log(param, "点击事件");

          event.stopPropagation();

 this.mapCityName = param.name;

        });

      }, 1000);

    },