<template>
  <div class="map">
    <div class="map-box" ref="mapContain" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapName: "汉中市",
      listArr: [{
        name: '汉台区',
        value: '6000'
      },
      {
        name: '南郑区',
        value: '8000'
      },
      {
        name: '城固县',
        value: '3000'
      },
      {
        name: '洋县',
        value: '7000'
      },
      {
        name: '西乡县',
        value: '1000'
      },
      {
        name: '镇巴县',
        value: '2000'
      },
      {
        name: '勉县',
        value: '600'
      },
      {
        name: '留坝县',
        value: '3000'
      },
      {
        name: '佛坪县',
        value: '1000'
      },
      {
        name: '宁强县',
        value: '1000'
      },
      {
        name: '略阳县',
        value: '1000'
      }], //城市json
      max: "9000", //最大value值
      min: "500", // 最小value值
    };
  },
  methods: {
    drawProvinceMap (mapName) {
      this.mapName = mapName;
      // 引入区域数据
      require('./hanzhong.js');
      let _this = this;
      let myChart8 = this.$echarts.init(this.$refs.mapContain);
      const option = {
        visualMap: {
          min: 0,
          max: _this.max,
          top: "bottom",
          right: 10,
          splitNumber: 6,
          seriesIndex: [0],
          itemWidth: 20, // 每个图元的宽度
          itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
          pieces: [      // 自定义每一段的范围，以及每一段的文字
            { gte: 6000, label: '6000以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
            { gte: 2000, lte: 6000, label: '2000-6000', color: '#3375e4' },
            { gte: 1000, lte: 2000, label: '1000-2000', color: '#6797ef' },
            { gte: 500, lte: 1000, label: '500-1000', color: '#96b5ef' },
          ],
          textStyle: {
            color: '#737373'
          }
        },
        // 数据移入显示
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
          },
          // 边框颜色
          borderColor: "#CB000C",
          // 边框宽度
          borderWidth: "1",
        },
        series: [
          {
            type: "map",
            map: this.mapName,
            itemStyle: {
              normal: {  //正常状态
                label: {
                  show: true,
                  formatter: '{b}',   //地图上显示的数据，分别对应data中的name和value
                  color: '#fff',
                },
                areaColor: '#409EFF'   //地图区域的颜色
              },
              emphasis: {
                label: { show: true },
                areaColor: "#67C23A", //鼠标进入时的颜色
              },
            },
            data: _this.listArr,
          },
        ],
      };
      myChart8.setOption(option);
    },
  },
  mounted () {
    // 初始化数据
    this.drawProvinceMap("汉中市");
  }
}
</script>
<style scoped>
.map {
  width: 100%;
}

.map-box {
  display: inline-block;
  width: 100%;
  height: calc(100vh - 133px);
}
</style>