echarts-map配置

基础配置

  // 获取地图数据
  // https://github.com/haihaigang/china-demo/blob/master/src/china.js
  echarts.registerMap('china', chinaGeo)
  this.mapEchart = echarts.init(this.$refs.mapEchart)
  
  // 绘制图表
  const mapOption = {
    // 悬浮弹窗内容
    tooltip: {
      trigger: 'item',
      formatter: params => {
        if (this.commonUtils.isNull(params.data)) {
          return params.name
        } else {
          return params.name + ': ' + params.data.value + '吨'
        }
      }
    },
    // 色块图例
    visualMap: {
      show: true,
      x: 'left',
      y: 'center',
      // 改变地图区域颜色（设置n个区间值），及对应色块
      splitList: [
        { start: splitNumber * 3, end: maxNumber },
        {
          start: splitNumber * 2,
          end: splitNumber * 3
        },
        {
          start: splitNumber * 1,
          end: splitNumber * 2
        },
        { start: 0, end: splitNumber }
      ],
      color: [
        '#0249D8',
        '#3F7EFD',
        'rgba(63,126,253,0.60)',
        'rgba(63,126,253,0.30)'
        // 'rgba(63,126,253,0.1)'
        // '#F7F7FA',
      ]
    },
    //配置属性
    series: [
      {
        name: '数据',
        type: 'map',
        mapType: 'china',
        roam: false,

        emphasis: {
          // 区域背景色
          itemStyle: {
            areaColor: '#58B2FF',
          },
          // 区域文本色
          label:{
            color: '#8FF0FF'
          }
        },
        data: data //数据
      }
    ]
  }
  this.mapEchart.setOption(mapOption)
  this.mapEchart.off('selectchanged')
  // 设置选中，记录选中index，在取消选中时使用
  this.mapEchart.on('selectchanged', param => {
    if (param.selected && param.selected.length) {
      this.preSelectMapIndex = param.selected[0].dataIndex[0]
    }
  })
  // 针对点击操作
  this.mapEchart.on('click', param => {
    this.dealProvince = param.name
    getProvinceMapPopup({
      belong_province: this.dealProvince
    }).then(res => {
      if (res) {
        this.storageProductData = res
        this.expandRowKeys = this.setExpandRowKey(this.storageProductData)
        this.isShowDetailDlg = true
      }
    })
  })
  
  
  // 可通过外部时机，控制取消选中
  listenClickEvent (event, click) {
        this.mapEchart.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex
        })
  },// 清空选中项