<template>
  <div id="echarts_box" style="width: 800px;height:600px;top:100px;left: 200px">
    <div>
      <statistics-list ref="statisticsList"/>
    </div>
  </div>
</template>

<script>

  import echarts from 'echarts'
  import 'echarts/map/js/china.js'
  import { getStatisList } from "@/api/system/government/government";
  import StatisticsList from '@/views/system/government/statistics/statisticsList'
  export default {
    components: { StatisticsList },
    data() {
      return {
        dtListData:[],
        option:{},
        listData:[
          {name: '北京', value: 0},
          {name: '天津', value: 0},
          {name: '上海', value: 0},
          {name: '重庆', value: 0},
          {name: '河北', value: 0},
          {name: '河南', value: 0},
          {name: '云南', value: 0},
          {name: '辽宁', value: 0},
          {name: '黑龙江', value: 0},
          {name: '湖南', value: 0},
          {name: '安徽', value: 0},
          {name: '山东', value: 0},
          {name: '新疆', value: 0},
          {name: '江苏', value: 0},
          {name: '浙江', value: 0},
          {name: '江西', value: 0},
          {name: '湖北', value: 0},
          {name: '广西', value: 0},
          {name: '甘肃', value: 0},
          {name: '山西', value: 0},
          {name: '内蒙古', value: 0},
          {name: '陕西', value: 0},
          {name: '吉林', value: 0},
          {name: '福建', value: 0},
          {name: '贵州', value: 0},
          {name: '广东', value: 0},
          {name: '青海', value: 0},
          {name: '西藏', value: 0},
          {name: '四川', value: 0},
          {name: '宁夏', value: 0},
          {name: '海南', value: 0},
          {name: '台湾', value: 0},
          {name: '香港', value: 0},
          {name: '澳门', value: 0}
        ]
      }
    },
    created() {},
    // DOM 渲染完成触发
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        const params = {}
        getStatisList(params).then(res => {
          res.data.forEach(item => {
            this.dtListData.push({
              name: item.regionName,
              region: item.region,
              id: item.id,
              value: item.num,
            });
          });
          this.getDT(this.dtListData)
        })
      },
      getDT(data){
        // 1. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_box'))
       var option = {
          title: {  //标题样式
            text: '中国地图',
            x: "center",
            textStyle: {
              fontSize: 18,
              color: "black"
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              var s  = ""
              data.forEach(item =>{
                if (item.name.includes(params.name)) {
                  s = params.name + "<br/>" + '服务总数：' +item.value;
                }
              })
              return s
            }
          },
          visualMap: {//视觉映射组件
            top: 'bottom',
            left: 'left',
            min: 0,
            max: 10000,
            //text: ['High', 'Low'],
            realtime: false,  //拖拽时，是否实时更新
            calculable: true,  //是否显示拖拽用的手柄
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              name: '模拟数据',
              type: 'map',
              mapType: 'china',
              roam: false,//是否开启鼠标缩放和平移漫游
              itemStyle: {//地图区域的多边形 图形样式
                normal: {//是图形在默认状态下的样式
                  label: {
                    show: true,//是否显示标签
                    textStyle: {
                      color: "black"
                    }
                  }
                },
                zoom: 1.5,  //地图缩放比例,默认为1
                emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                  label: {
                    show: true
                  }
                }
              },
              top: "3%",//组件距离容器的距离
              data: data
            }
          ]
        };

        // 3. 使用刚指定的配置项和数据，显示图表
        myChart.setOption(option)

        //this.chartMap.setOption(this.option, false);

        myChart.off("click");

        //点击地图事件
        myChart.on("click", (params) => {
          data.forEach((item) => {
            if (params.name == item.name) {
              this.$refs.statisticsList.initData(item.region)
            }
          })
        });


      }
    }
  }
</script>

引入中国地图的js

初始化一个echarts的实例

 地图的初始化，和点击时间