【VUE】打包静态项目并加入echarts

效果预览：

主要代码：

<template>
  <div class="china-map">
    <p>滑动鼠标中间滚轮可调整地图大小</p>
    <div class="map-chart" ref="mapChart"></div>
    <p class="explain">注：标注红色五角星的为参加2020年度联合校园招聘的邮政省分公司。我们诚挚欢迎莘莘学子们回原籍的邮政企业单位工作！</p>
  </div>
</template>

 
//示例数据
return {
      mapData: [
        { name: "新疆", id: 5633168 },
        { name: "西藏", id: 5633062 },
        { name: "青海", id: 5633151 },

      ],
      geoCoordMap: {
        新疆: [87.627111, 43.79343],
        西藏: [91.117481, 29.64725],
        青海: [101.78011, 36.62087],

   
      }
    };

mounted() {
    let myCharts = this.$echarts.init(this.$refs.mapChart);
    this.drawMap(myCharts);

    myCharts.on("click", params => {
      console.log("params", params);
      let selected = this.mapData.filter(item => item.name === params.name);

      if (selected[0] && selected[0].id) {
        this.$router.push(`xxx`);   //根据需求带参数
      }
    });
  },
  methods: {
    convertData(data) {
      let res = [];
      data.map(item => {
        let geoCoord = this.geoCoordMap[item.name];
        if (geoCoord) {
          res.push({
            name: item.name,
            value: item.value,
            coord: geoCoord
          });
        }
        return item;
      });
      return res;
    },
    drawMap(myCharts) {
      myCharts.setOption({
        series: [
          {
            type: "map",
            mapType: "china",
            roam: true,
            top: 0,
            bottom: 10,
            itemStyle: {
              emphasis: { label: { show: false } }
            },
            markPoint: {
              data: this.convertData(this.mapData),
              symbol: "image://./images/map-icon.png",
              symbolSize: 10,
              label: {
                show: true,
                position: "bottom",
                color: "#333",
                formatter: "{b}"
              }
            }
          }
        ]
      });
    }
  }