<template>
<div>
   <div :ref="refName" class="impactchart"></div>
    <slot name="content"></slot>
</div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
import map from "echarts/map/json/china.json";
import customed from '../../assets/js/customed.json';
const style={
  color:'#616161',
  fontSize:14
}
echarts.registerTheme('customed',customed)
const refName = Math.random()
  .toString(36)
  .substr(2);
export default {
  name: "mapChart",
  data() {
    return {
      refName: refName,
      chart: {},
      geoCoordMap: []
    };
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.clear();
    }
  },
  mounted() {
    this.getInitData();
  },
  methods: {
    getInitData() {
      this.chart = echarts.init(this.$refs[refName],'customed');
      echarts.registerMap("china", map);
      this.chart.setOption({
        grid: [
          { //新增
          width:'50%',
          right:0
        }
        ],
        tooltip: {
          show: true,
          textStyle:style,
          backgroundColor:'#ffffff'
        },
        visualMap: {
          type: "continuous",
          text: ["", ""],
          min: 0,
          max: this.max,
          show: false,
          seriesIndex: [0],
          textStyle: {
            color: "#000"
          },
          bottom: 30,
          left: "left"
        },
        geo: {
          roam: false,
          map: "china",
          layoutSize: "80%",
          left: this.geoLeft,
          label: {
            normal:{
              show:false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              areaColor: "#fff464"
            }
          },
          regions: [
            {
              name: "南海诸岛",
              value: 0,
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false
                  }
                }
              }
            }
          ]
        },
        xAxis:[//新增
          {
            type:'value',
            max:1,
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false }
          }
        ],
        yAxis:[//新增
          {
            type:'category',
            data:this.axisData,
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { show: true }
          }
        ],
        series: this.datas
      });
    },
    loadData() {
      var self = this;
      var data = [];
      self.chart.setOption(self.option);
    }
  },
  props: {
    datas: {
      type: Array,
      default: function() {
        return [];
      }
    },
    geoLeft: {
      type:String,
      default: 'center'
    },
    axisData: Array,
    max:Number
  },
  beforeUpdate() {},
  updated() {
    this.getInitData();
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.getInitData();
      },
      deep: true
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.impactchart {
  height: 100%;
}
</style>
