echarts地图

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('../themeDefault')// echarts theme
import resize from '../mixins/resize'

const animationDuration = 1500

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'map-chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    config: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      onChart: true
    }
  },
  watch: {
    config: {
      handler(newV, oldV) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(async() => {
      !this.chart ? await this.init() : null
      this.config ? this.initChart() : null
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async initChart() {
      const data = {
        title: ['香洲区', '金湾区', '斗门区', '高新区', '鹤洲新区(筹)'],
        series: [{ name: 'zhuhai', data: [{ '香洲区': '111' }, { '斗门区': '111' }, { '金湾区': '111' }, { '高新区': '111' }] }]
      }
      const option = {
        visualMap: {
          left: 'right',
          min: 0,
          max: 999999,
          // inRange: { // 热力值颜色
          //   color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          // },
          text: ['高', '低'], // 文本，默认为数值文本
          textStyle: {
            color: '#fff' // visualMap 文字颜色
          },
          calculable: true
        },
        series: [
          {
            name: '珠海市', // 默认名字，tooltip的title
            type: 'map',
            roam: true,
            map: 'zhuhai', // 这里要跟registerMap方法中第一个参数对应
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20]
            },
            // 设置区域样式
            itemStyle: {
              normal: {
                areaColor: '#001E43', // 区域颜色
                borderColor: '#fff', // 区域边框颜色
                borderWidth: 1 // 区域边框宽度
              },
              emphasis: {
                label: {
                  show: true
                },
                areaColor: '#00274E' // 高亮时的区域颜色
              }
            },
            // 设置标签（区域名称和值）
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff' // 标签文字颜色
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff' // 高亮时标签文字颜色
                }
              }
            },
            data: [{ name: '香洲区', value: '111111' }, { name: '斗门区', value: '111' }, { name: '金湾区', value: '111' }, { name: '高新区', value: '111' }, { name: '鹤洲新区（筹）', value: '111' }]// 需要显示在地图上的数据 [{ '香洲区': '111' }, { '斗门区': '111' }]
          }]
      }

      this.chart.setOption(option)
      this.chart.hideLoading()

      if (this.onChart) {
        this.chart.on('click', (params) => {
          if (params.componentType === 'series') {
            // 这里可以根据 params 的信息自定义弹出的数据详情
            // console.log(params)
            // 在这里定义弹出数据详情的方式，可以使用 DOM 操作、模态框等
            this.$emit('clickSeries', params)
          }
        })
        this.onChart = false
      }
    },
    async init() {
      const mapres = await fetch('/file/zhuhai_shiqu.json')
      const mapjson = await mapres.json()
      echarts.registerMap('zhuhai', mapjson) // registerMap只在原型对象中存在
      this.chart = echarts.init(this.$el, 'themeDefault')
      this.chart.showLoading({
        text: '请求数据中...', // 加载动画显示的文字
        color: '#fff', // 文字颜色
        textColor: '#fff', // 遮罩层文字颜色
        maskColor: 'rgba(0, 0, 0, 0.1)' // 遮罩层颜色，可以调整透明度和颜色
      })
    }
  }
}
</script>