nanhuashi_applet/components/echars/maps.vue

<template>
  <view
    style="
      width: 500px;
      height: 310px;
      position: relative;
      top: 170px;
      left: -30px;
    "
    class="map"
  >
    <!--  -->
    <l-echart style="width: 100%; height: 100%" ref="chart"></l-echart>
  </view>
</template>

<script>
import * as echarts from "./echarts.min.js";
import china from "./china.json"; // 引入中国地图数据
export default {
  data() {
    return {
      mapData: [
        {
          name: "新疆维吾尔自治区",
          value: 0,
        },
        {
          name: "西藏自治区",
          value: 0,
        },
        {
          name: "内蒙古自治区",
          value: 0,
        },
        {
          name: "青海省",
          value: 0,
        },
        {
          name: "四川省",
          value: 0,
        },
        {
          name: "黑龙江省",
          value: 0,
        },
        {
          name: "甘肃省",
          value: 0,
        },
        {
          name: "云南省",
          value: 4,
        },
        {
          name: "广西壮族自治区",
          value: 40,
        },
        {
          name: "湖南省",
          value: 89,
        },
        {
          name: "陕西省",
          value: 40,
        },
        {
          name: "广东省",
          value: 54,
        },
        {
          name: "吉林省",
          value: 15,
        },
        {
          name: "河北省",
          value: 81,
        },
        {
          name: "湖北省",
          value: 82,
        },
        {
          name: "贵州省",
          value: 32,
        },
        {
          name: "山东省",
          value: 11,
        },
        {
          name: "江西省",
          value: 64,
        },
        {
          name: "河南省",
          value: 38,
        },
        {
          name: "辽宁省",
          value: 82,
        },
        {
          name: "山西省",
          value: 50,
        },
        {
          name: "安徽省",
          value: 45,
        },
        {
          name: "福建省",
          value: 76,
        },
        {
          name: "浙江省",
          value: 30,
        },
        {
          name: "江苏省",
          value: 9,
        },
        {
          name: "重庆市",
          value: 91,
        },
        {
          name: "宁夏回族自治区",
          value: 17,
        },
        {
          name: "海南省",
          value: 27,
        },
        {
          name: "台湾省",
          value: 79,
        },
        {
          name: "北京市",
          value: 40,
        },
        {
          name: "天津市",
          value: 33,
        },
        {
          name: "上海市",
          value: 69,
        },
        {
          name: "香港特别行政区",
          value: 23,
        },
        {
          name: "澳门特别行政区",
          value: 37,
        },
      ],
    };
  },
  mounted() {
    this.$refs.chart.init(echarts, async (chart) => {
      chart.showLoading();
      // const data = await this.getData();
      chart.hideLoading();
      console.log("china", china);
      echarts.registerMap("China", china); // 注册中国地图
      // echarts.registerMap('HK', data);
      const option = this.getChartOption();
      chart.setOption(option);
    });
  },
  methods: {
    getChartOption() {
      const option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "item",
          // formatter: "{b}<br/>{c} (p / km2)",
        },
        visualMap: {
          min: 0,
          left: 100,
          max: 300,
          show: false,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          pieces: [
            {
              gt: 20,
              label: "疑似",
              color: "yellow",
            },
            {
              lt: 20,
              color: "transparent",
            },
          ],
          inRange: {
            color: ["transparent", "yellow", "yellow"],
          },
        },
        series: [
          {
            name: "祈愿人数分布",
            type: "map",
            map: "China",
            // selectedMode: "multiple",
            data: this.mapData,
            itemStyle: {
              normal: {
                borderColor: "transparent",
              },
            },
          },
        ],
      };
      console.log("option", option);
      return option;
    },
  },
};
</script>