二. ECHART 绘制中国地图

START

<template>
  <div class="mymap">
    <h1 style="text-align=center">2 ECHART 绘制中国地图</h1>
    <div>
      <!-- 写个div用来留给Echart来画图 -->
      <div ref="mymap" style="width:100%;height:700px"></div>
    </div>
  </div>
</template>

<script>
// 引入中国地图数据 （在我们下载Echarts 的时候就已经默认下载了中国地图）
import "../../node_modules/echarts/map/js/china.js";

export default {
  name: "MyMap",
  mounted() {
    // DOM渲染完了我们再去加载echart
    this.getEchartData();
  },
  methods: {
    // 初始化 echart 的方法
    getEchartData() {
      // 通过ref 获取我们的DOM元素
      const mymap = this.$refs.mymap;

      //   写个随机数 随机给每个省赋值
      function randomData() {
        return Math.round(Math.random() * 500);
      }

      // 当我们DOM确实是存在的我们再去绘制我们的echart图标
      if (mymap) {
        const myChart = this.$echarts.init(mymap);
        // 参数信息 最主要的就是 这个参数配置，很重要！！ 最好对照官网api
        const option = {
          tooltip: {},
          legend: {
            orient: "vertical",
            left: "left",
            data: [""],
          },
          visualMap: {
            min: 0,
            max: 1500,
            left: "10%",
            top: "bottom",
            text: ["高", "低"],
            calculable: true,
            color: ["#0b50b9", "#c3e2f4"],
          },
          selectedMode: "single",
          series: [
            {
              name: "",
              type: "map",
              mapType: "china",
              itemStyle: {
                normal: {
                  borderColor: "rgba(0, 0, 0, 0.2)",
                },
                emphasis: {
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              showLegendSymbol: true,
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              data: [
                { name: "北京", value: randomData() },
                { name: "天津", value: randomData() },
                { name: "上海", value: randomData() },
                { name: "重庆", value: randomData() },
                { name: "河北", value: randomData() },
                { name: "河南", value: randomData() },
                { name: "云南", value: randomData() },
                { name: "辽宁", value: randomData() },
                { name: "黑龙江", value: randomData() },
                { name: "湖南", value: randomData() },
                { name: "安徽", value: randomData() },
                { name: "山东", value: randomData() },
                { name: "新疆", value: randomData() },
                { name: "江苏", value: randomData() },
                { name: "浙江", value: randomData() },
                { name: "江西", value: randomData() },
                { name: "湖北", value: randomData() },
                { name: "广西", value: randomData() },
                { name: "甘肃", value: randomData() },
                { name: "山西", value: randomData() },
                { name: "内蒙古", value: randomData() },
                { name: "陕西", value: randomData() },
                { name: "吉林", value: randomData() },
                { name: "福建", value: randomData() },
                { name: "贵州", value: randomData() },
                { name: "广东", value: randomData() },
                { name: "青海", value: randomData() },
                { name: "西藏", value: randomData() },
                { name: "四川", value: randomData() },
                { name: "宁夏", value: randomData() },
                { name: "海南", value: randomData() },
                { name: "台湾", value: randomData() },
                { name: "香港", value: randomData() },
                { name: "澳门", value: randomData() },
              ],
            },
          ],
        };
        // 设置参数
        myChart.setOption(option);
        // 当页面的大小变化时，去重置echart的大小
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      // 通过$on 或 $once 监听页面生命周期销毁来移除监听
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
</style>