
<template>
  <div id="zddtChart" style="height: 100%;width:100%"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import china from '@/data/ems/china.json'//中国地图数据
import 'echarts/lib/chart/map';
echarts.registerMap('china', { geoJSON: china }); //注册可用地图

export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
      this.chart = echarts.init(document.querySelector('#zddtChart'))
    },
    setOption(data) {
      this.chart.setOption({
        color:['#FFBD00'],
        backgroundColor: 'transparent', //背景色
        geo: { //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
          map: 'china', //地图类型  这儿展示的是中国地图
          aspectScale: 0.85,
          selectedMode: "single",// 开启单选
          label: {
            show: true, //是否显示标签  此处指是否显示地图上的地区名字
            color: '#ffffff',
            fontSize: 12
          },
          roam: true, //是否开启鼠标缩放和平移漫游
          itemStyle: {
            areaColor: "#03365b",
            borderColor: "#4bf3f9",
            shadowColor: '#03365b', //阴影颜色
            shadowOffsetX: 0, //阴影偏移量
            shadowOffsetY: 10, //阴影偏移量
          },
          emphasis: {
            label: {
              show: true,
              color: '#ffffff',
            },
            itemStyle: {
              areaColor: "#0f5d9d",
            }
          }
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            data,
            rippleEffect: {
              brushType: "stroke",
              scale: 5,
              period: 2, // 秒数
            },
            symbolSize: 12,
            clickable: false,
            zlevel: 1,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
          }
        ]
      })
    }
  }
}


</script>
