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

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      let data = [];
      $.get('https://jzkjlsd.cnjizhi.cn/FpOwSExV3RF5KXgOXXToc6-I4g-H', geoJson => {
        echarts.registerMap('china', geoJson);
        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: res => {
              res.value = res.value || 0;
              return res.name + '：' + res.value + '个项目';
            },
            confine: true
          },
          visualMap: {
            text: ['高', '低'],
            textStyle: {
              color: '#545555',
              fontSize: 15
            },
            realtime: true,
            show: true,
            min: 0,
            max: parseInt(chartData[0].value),
            inRange: {
              color: ['#ff8a9a', '#e24d5f', '#ac001d']
            }
          },
          series: [
            {
              type: 'map', //地图种类
              map: 'china', //地图类型。
              geoIndex: 0,
              data: chartData,
              itemStyle: {
                normal: {
                  label: {
                    show: true, //默认是否显示省份名称
                    textStyle: {
                      color: '#FFF',
                      fontSize: '11'
                    },
                    formatter: res => {
                      if (res.value) {
                        return res.name.substring(0, 2) + '(' + res.value + ')';
                      } else {
                        return res.name.substring(0, 2);
                      }
                    },
                    emphasis: {
                      textStyle: {
                        color: '#FFF'
                      }
                    }
                  },
                  borderWidth: 0.5,
                  borderColor: 'white',
                  areaColor: '#ff8a9a'
                },
                //地图区域的多边形 图形样式。
                emphasis: {
                  label: {
                    show: true, //选中状态是否显示省份名称
                    textStyle: {
                      color: '#FFF'
                    }
                  },
                  areaColor: '#4467CC',
                  borderColor: '#448aff'
                }
              },
              roam: true,
              zoom: 1.7,
              top: '28%'
            }
          ]
        });
      });
    }
  }
};
</script>
