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

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

const animationDuration = 1000;
const nameMap = {
                            "南海诸岛" : "南海诸岛",
                            '北京市'   :'北京',
                            '天津市'   :'天津',
                            '上海市'   :'上海',
                            '重庆市'   :'重庆',
                            '河北省'   :'河北',
                            '河南省'   :'河南',
                            '云南省'   :'云南',
                            '辽宁省'   :'辽宁',
                            '黑龙江省'  :  '黑龙江',
                            '湖南省'   :'湖南',
                            '安徽省'   :'安徽',
                            '山东省'   :'山东',
                            '新疆维吾尔自治区' :'新疆',
                            '江苏省' :'江苏',
                            '浙江省' :'浙江',
                            '江西省' :'江西',
                            '湖北省' :'湖北',
                            '广西壮族自治区' : '广西',
                            '甘肃省' :'甘肃',
                            '山西省' :'山西',
                            '内蒙古自治区' : "内蒙古",
                            '陕西省'  :'陕西',
                            '吉林省'  :'吉林',
                            '福建省'  :'福建',
                            '贵州省'  :'贵州',
                            '广东省'  :'广东',
                            '青海省'  :'青海',
                            '西藏自治区'  :'西藏',
                            '四川省'  :'四川',
                            '宁夏回族自治区' :'宁夏',
                            '海南省' :'海南',
                            '台湾' :'台湾',
                            '香港' :'香港',
                            '澳门' :'澳门'
                        }
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.initChart(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");
      if(!this.chartData.t){
          return
      }
          var optionMap = {
              title: {
        text: this.chartData.t,
    },
            tooltip: {},
            legend: {
              orient: 'vertical',
              left: 'left',
              data:['']
            },
            visualMap: {
              min: this.chartData.min,
              max: this.chartData.max,
              left: '5%',
              top: 'bottom',
              text: ['多','少'],
              calculable : true,
              color:['#0237fe','#edf1fe']
            },
            geo: { 
                        map: 'china', 
                       
                        zoom: 1.2, 
                        label: {
                            show: true
                        },
                        itemStyle: {
                            borderColor: 'rgba(0, 0, 0, 0.2)',
                            emphasis: { 
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
            series : [
              {
                name: '分布',
                type: 'map',
                left:'20%',
                geoIndex: 0,
                // mapType: 'china',
                // selectedMode: true,//single 表示单选;multiple表示多选 默认flase不选
                // itemStyle: {
                //   normal:{
                //     borderColor: 'rgba(0, 0, 0, 0.2)',
                //   },
                //   emphasis:{
                //     label: {
                //       show: true,//选中状态是否显示省份名称
                //     },
                //     areaColor:'#d97a80',//选中状态的地图板块颜色
                //     shadowOffsetX: 0,
                //     shadowOffsetY: 0,
                //     shadowBlur: 20,
                //     borderWidth:0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)',
                //   }
                // },
                // showLegendSymbol: false,
                // label: {
                //   normal: {
                //     show: false
                //   },
                //   emphasis: {
                //     show: false
                //   }
                // },
                data:this.chartData.s
              }
            ]
          }
          this.chart.setOption(optionMap);
    }
  },
};
</script>
