<template>
  <div ref="myEchart" id="mapID" class="content"
    :style="{ height: '100%', width: '100%', margin: '-50px 10px 10px 10px' }"></div>
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  // import xt_data from '@/assets/河北省/邢台市/geojson.json'
  import xt_data from '@/assets/全国/geojson.json'
  export default {
    mixins: [resize],
    data() {
      return {
        chartDatas2: [],
        chart: null,
        startCharts: null,
        charPie3currentIndex: 0,
        dataLen: 0
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.startCharts) {
        clearInterval(this.startCharts)
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        var _self = this
        // this.$refs.myEchart.setOption({

        // })
        const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
        this.chart = myChart
        window.onresize = myChart.resize
        myChart.showLoading()
        var option = {}
        console.log(JSON.stringify(this.countyData))
        this.countyData = [
          { 'name': '北京市', 'value': '20', 'county': { 'title': '北京市' } },
          { 'name': '甘肃省', 'value': '40', 'county': { 'title': '甘肃省' } },
          { 'name': '四川省', 'value': '100', 'county': { 'title': '四川省' } },
          { 'name': '山西省', 'value': '200', 'county': { 'title': '山西省' } },
          { 'name': '辽宁省', 'value': '48', 'county': { 'title': '辽宁省' } },
          { 'name': '吉林省', 'value': '268', 'county': { 'title': '吉林省' } },
          { 'name': '陕西省', 'value': '369', 'county': { 'title': '陕西省' } },
          { 'name': '河北省', 'value': '500', 'county': { 'title': '河北省' } },
          { 'name': '山东省', 'value': '10', 'county': { 'title': '山东省' } },
          { 'name': '天津市', 'value': '356', 'county': { 'title': '天津市' } },
          { 'name': '河南省', 'value': '479', 'county': { 'title': '河南省' } },
          { 'name': '湖北省', 'value': '285', 'county': { 'title': '湖北省' } },
          { 'name': '重庆市', 'value': '190', 'county': { 'title': '重庆市' } },
          { 'name': '贵州省', 'value': '560', 'county': { 'title': '贵州省' } },
          { 'name': '福建省', 'value': '80', 'county': { 'title': '福建省' } },
          { 'name': '湖南省', 'value': '159', 'county': { 'title': '湖南省' } },
          { 'name': '江西省', 'value': '259', 'county': { 'title': '江西省' } },
          { 'name': '广东省', 'value': '359', 'county': { 'title': '广东省' } },
          { 'name': '海南省', 'value': '459', 'county': { 'title': '海南省' } },
          { 'name': '台湾省', 'value': '559', 'county': { 'title': '台湾省' } },
          { 'name': '江苏省', 'value': '80', 'county': { 'title': '江苏省' } },
          { 'name': '安徽省', 'value': '480', 'county': { 'title': '安徽省' } },
          { 'name': '上海市', 'value': '90', 'county': { 'title': '上海市' } },
          { 'name': '浙江省', 'value': '418', 'county': { 'title': '浙江省' } },
          { 'name': '云南省', 'value': '131', 'county': { 'title': '云南省' } },
          { 'name': '青海省', 'value': '4', 'county': { 'title': '青海省' } },
          { 'name': '广西壮族自治区', 'value': '428', 'county': { 'title': '广西壮族自治区' } },
          { 'name': '宁夏回族自治区', 'value': '248', 'county': { 'title': '宁夏回族自治区' } },
          { 'name': '西藏自治区', 'value': '138', 'county': { 'title': '西藏自治区' } },
          { 'name': '内蒙古自治区', 'value': '318', 'county': { 'title': '内蒙古自治区' } },
          { 'name': '新疆维吾尔自治区', 'value': '381', 'county': { 'title': '新疆维吾尔自治区' } },
          { 'name': '黑龙江省', 'value': '48', 'county': { 'title': '黑龙江省' } },

        ]
        echarts.registerMap('xingtai', xt_data, {})
        option = {
          title: {
            text: '全国仓库分布图',
            // subtext: 'Data from www.census.gov',
            left: 'center',
            textStyle: {
              fontSize: 24,
              color: '#026193'
              // fontWeight: 'bolder' // 字体加粗
            },
            show: true
          },
          tooltip: {
            alwaysShowContent: true,
            textStyle: {
              fontSize: 12,
              color: '#ccc'
            },
            trigger: 'item',
            backgroundColor: '#242429cc',
            formatter: function (params) {
              const value = (params.value + '').split('.')
              var valueStr = value[0].replace(
                /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
                '$1,'
              )
              return (
                params.name +
                '<br/>仓库数量: ' +
                valueStr +
                '个'
              )
            }
          },
          dataZoom: {
            type: 'inside'
          },
          geo: {
            show: true,
            map: 'xingtai',
            roam: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#3c8dbc', // 没有值得时候颜色
                borderColor: '#097bba'
              },
              emphasis: {
                areaColor: '#fbd456' // 鼠标滑过选中的颜色
              }
            }
          },
          visualMap: {
            show: false,
            left: 'right',
            bottom: 20,
            min: 0,
            max: 100,
            text: ['高', '低'],
            calculable: true,
            textStyle: {
              color: '#fff'
            },
            inRange: {
              color: ['#f37b1d', '#1e6ff0', '#6e41c7', '#34b157'],
              symbolSize: [30, 100]
            }
          },
          toolbox: {
            show: false,
            // orient: 'vertical',
            left: 'left',
            top: 'top',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          textStyle: {
            fontSize: 16
          },
          series: [
            {
              name: '机构数量',
              type: 'map',
              roam: true,
              map: 'xingtai',
              label: {
                show: false
                // formatter: '{b}:{@score}人'
              },
              data: this.countyData,
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bolder'
                },
                itemStyle: {
                  // borderType: 'solid',
                  // borderWidth: 3,
                  // borderColor: '#e83e11',
                  shadowBlur: 20,
                  shadowOffsetX: 5,
                  shadowOffsetY: 5
                }
              }
            }
          ],
          animation: true
        }
        myChart.setOption(option)
        myChart.hideLoading()
        setTimeout(() => {
          myChart.resize()
        }, 800)

        var _this = this
        var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
        _this.charPie3currentIndex = 0
        // 2、鼠标移动上去的时候的高亮动画
        this.chart.on('mouseover', function (param) {
          isSet = false
          // 取消之前高亮的图形
          _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
            // dataIndex: _this.charPie3currentIndex
          })
          // 高亮当前图形
          _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
          // 显示 tooltip
          _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        })
        // 3、自动高亮展示
        var chartHover = function () {
          _this.dataLen = option.series[0].data.length
          // 取消之前高亮的图形
          _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
            // dataIndex: _this.charPie3currentIndex
          })
          _this.charPie3currentIndex =
            (_this.charPie3currentIndex + 1) % _this.dataLen
          // 高亮当前图形
          _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: _this.charPie3currentIndex
          })
          // 显示 tooltip
          _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: _this.charPie3currentIndex
          })
        }
        clearInterval(_this.startCharts)
        _this.startCharts = setInterval(chartHover, 2000)
        // 4、鼠标移出之后，恢复自动高亮
        this.chart.on('mouseout', function (param) {
          if (!isSet) {
            clearInterval(_this.startCharts)
            _this.startCharts = setInterval(chartHover, 2000)
            isSet = true
          }
        })
      }
    }
  }
</script>