echarts地图上绘制堆叠柱状图并切换地市

1、echarts地图上绘制堆叠柱状图

 1、js

import echarts from 'echarts'
function initMap(myChart, region, geoCoordMap, rawData) {
  myChart.showLoading()
  // 市区坐标
  let option = {
    tooltip: {
      show: true,
      trigger: 'item',
      // 是否设置让提示框的内容一直显示  默认值是false
      alwaysShowContent: false,
      formatter: function(params, val, item) {
        console.log(params, val, item)
        return  (
            '容量1: ' + params.data.fdInstall.toFixed(2) + 'MW' + '
' +
            '功率1: ' + params.data.fdOutput.toFixed(2) + 'MW' + '
' +
            '容量2: ' + params.data.gfInstall.toFixed(2) + 'MW' + '
' +
            '功率2: ' + params.data.gfOutput.toFixed(2) + 'MW'
          )
      },
    },
    legend: {
      right: '5%',
      bottom: '5%',
      selectedMode: false, //关闭图例点击事件
      orient: 'vertical',
      data: ['容量1', '功率1', '容量2', '功率2'],
      itemWidth: 20,
      itemHeight: 14,
      textStyle: {
        color: '#FFFFFF',
        padding: 5,
      },
    },
    geo: {
      map: region,
      selectedMode: false, //是否允许选中多个区域，
      zoom: 1.1,
      show: true,
      roam: true,
      // zlevel: 10,
      markLine: {
        lineStyle: {
          color: '#fff',
        },
      },
      label: {
        show: false,
        color: '#fff',
        fontWeight: 'bolder',
        emphasis: {
          show: false,
          color: '#ff0',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgb(48,255,239)',
          borderWidth: 1,
          areaColor: 'RGB(6,31,51)',
          // areaColor: 'RGBA(0,204,255, 0.2)',
          shadowColor: 'rgba(88,175,190, 0.8)',
          shadowBlur: 6,
          shadowOffsetY: 5,
        },
        emphasis: {
          borderColor: '#FFFF0F',
          shadowBlur: 6,
          areaColor: 'rgba(88,175,190, 0.8)',
        },
      },
      // 设置地图上默认高亮的区域
      // regions:[
      //   {name: '青岛市', selected:true}
      // ]
    },
    series: [],
  }
  function renderEachCity() {
    var option = {
      xAxis: [],
      yAxis: [],
      grid: [],
      series: [],
    }

    echarts.util.each(rawData, function(dataItem, idx) {
      var geoCoord = geoCoordMap[dataItem[0]]
      var coord = myChart.convertToPixel('geo', geoCoord)
      idx += ''

      var item1 = dataItem[1] * 1;
      var item2 = dataItem[2] * 1;
      var item3 = dataItem[3] * 1;
      var item4 = dataItem[4] * 1;
      var data1 = {
        name: 'data1',
        value: item1,
        fdInstall: item1 + item2,
        fdOutput: item2,
        gfInstall: item3 + item4,
        gfOutput: item4
      }
      var data2 = {
        name: 'data2',
        value: item2,
        fdInstall: item1 + item2,
        fdOutput: item2,
        gfInstall: item3 + item4,
        gfOutput: item4
      }
      var data3 = {
        name: 'data3',
        value: item3,
        fdInstall: item1 + item2,
        fdOutput: item2,
        gfInstall: item3 + item4,
        gfOutput: item4
      }
      var data4 = {
        name: 'data4',
        value: item4,
        fdInstall: item1 + item2,
        fdOutput: item2,
        gfInstall: item3 + item4,
        gfOutput: item4
      }
      option.xAxis.push({
        id: idx,
        gridId: idx,
        type: 'category',
        name: dataItem[0],
        nameLocation: 'middle',
        nameGap: 3,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: '#fff',
          },
        },
        // data: xAxisCategory,
        // data: ['数据A', '数据B', '数据C'],
        z: 100,
      })
      option.yAxis.push({
        id: idx,
        gridId: idx,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#1C70B6',
          },
        },
        z: 100,
      })
      option.grid.push({
        id: idx,
        width: 30,
        height: 50,
        left: coord[0] - 15,
        top: coord[1] - 15,
        z: 100,
      })
      option.series.push({
        name: '功率1',
        type: 'bar',
        coordinateSystem: 'cartesian2d',
        xAxisIndex: idx,
        yAxisIndex: idx,
        stack: idx + '功率1',
        z: 5,
        barGap: '20%',
        // barCategoryGap:'-100%',
        label: {
          normal: {
            // show: true,
            position: 'right',
          },
        },
        itemStyle: {
          normal: {
            // color: '#23B7FD',
            color: '#054FC6',
          },
        },
        // data: [item2],
        data: [data2]
      })
      option.series.push({
        name: '容量1',
        type: 'bar',
        xAxisIndex: idx,
        yAxisIndex: idx,
        stack: idx + '容量1',
        z: 5,
        label: {
          normal: {
            // show: true,
            position: 'right',
          },
        },
        itemStyle: {
          normal: {
            // color: '#054FC6',
            color: '#23B7FD',
          },
        },
        // data: [item1],
        data: [data1]
      })
      option.series.push({
        name: '功率2',
        type: 'bar',
        xAxisIndex: idx,
        yAxisIndex: idx,
        stack: idx + '功率2',
        z: 5,
        label: {
          normal: {
            // show: true,
            position: 'right',
          },
        },
        itemStyle: {
          normal: {
            color: '#DE890F',
            // color: '#D4AF16',
          },
        },
        // data: [item4],
        data: [data4]
      })
      option.series.push({
        name: '容量2',
        type: 'bar',
        xAxisIndex: idx,
        yAxisIndex: idx,
        stack: idx + '容量2',
        z: 5,
        label: {
          normal: {
            // show: true,
            position: 'right',
          },
        },
        itemStyle: {
          normal: {
            // color: '#DE890F',
            color: '#D4AF16',
          },
        },
        // data: [item3],
        data: [data3]
      })
    })
    myChart.setOption(option)
  }

  setTimeout(renderEachCity, 0)
  // 缩放和拖拽
  function throttle(fn, delay, debounce) {
    var currCall
    var lastCall = 0
    var lastExec = 0
    var timer = null
    var diff
    var scope
    var args

    delay = delay || 0

    function exec() {
      lastExec = new Date().getTime()
      timer = null
      fn.apply(scope, args || [])
    }

    var cb = function() {
      currCall = new Date().getTime()
      scope = this
      args = arguments
      diff = currCall - (debounce ? lastCall : lastExec) - delay

      clearTimeout(timer)

      if (debounce) {
        timer = setTimeout(exec, delay)
      } else {
        if (diff >= 0) {
          exec()
        } else {
          timer = setTimeout(exec, -diff)
        }
      }
      lastCall = currCall
    }
    return cb
  }

  var throttledRenderEachCity = throttle(renderEachCity, 0)
  myChart.on('geoRoam', throttledRenderEachCity)
  myChart.setOption(option)
  myChart.hideLoading() //数据加载完关闭loading动画
}
export { initMap }

2、vue文件

// 引入山东地图数据
import shandong from '@/assets/map/shandong.json'
import binzhou from '@/assets/map/shandong/binzhou.json'
import dezhou from '@/assets/map/shandong/dezhou.json'
import dongying from '@/assets/map/shandong/dongying.json'
import heze from '@/assets/map/shandong/heze.json'
import jinan from '@/assets/map/shandong/jinan.json'
import jining from '@/assets/map/shandong/jining.json'
import laiwu from '@/assets/map/shandong/laiwu.json'
import liaocheng from '@/assets/map/shandong/liaocheng.json'
import linyi from '@/assets/map/shandong/linyi.json'
import qingdao from '@/assets/map/shandong/qingdao.json'
import rizhao from '@/assets/map/shandong/rizhao.json'
import taian from '@/assets/map/shandong/taian.json'
import weifang from '@/assets/map/shandong/weifang.json'
import weihai from '@/assets/map/shandong/weihai.json'
import yantai from '@/assets/map/shandong/yantai.json'
import zaozhuang from '@/assets/map/shandong/zaozhuang.json'
import zibo from '@/assets/map/shandong/zibo.json'

export default {
  data() {
    return {
      mapData: {
        济南: [117.200923, 37.005807],
        青岛: [120.355173, 36.882982],
        淄博: [118.147648, 37.014939],
        枣庄: [117.607964, 35.056424],
        东营: [118.66471, 37.834564],
        烟台: [121.001382, 37.339297],
        潍坊: [119.107078, 36.70925],
        济宁: [116.587245, 35.515393],
        泰安: [117.029063, 36.304968],
        威海: [122.116394, 37.609691],
        日照: [119.261208, 35.928588],
        莱芜: [117.677736, 36.614397],
        临沂: [118.326443, 35.565282],
        德州: [116.607428, 37.553968],
        聊城: [115.980367, 36.756013],
        滨州: [117.786974, 37.953542],
        菏泽: [115.769381, 35.246531],
      }
    }
  },
  created() {
      let jsonMap = {
        山东: shandong,
        滨州: binzhou,
        德州: dezhou,
        东营: dongying,
        菏泽: heze,
        济南: jinan,
        济宁: jining,
        莱芜: laiwu,
        聊城: liaocheng,
        临沂: linyi,
        青岛: qingdao,
        日照: rizhao,
        泰安: taian,
        潍坊: weifang,
        威海: weihai,
        烟台: yantai,
        枣庄: zaozhuang,
        淄博: zibo,
      }
      //循环遍历注册地图
      for (let key in jsonMap) {
        this.$echarts.registerMap(key, jsonMap[key])
      }
  },
  methods: {
    getMapData() {
      this.mapChart = this.$echarts.init(document.getElementById('SDmap'))
      this.mapChart.clear();
      this.mapChart.showLoading({
        text: 'loading',
        color: '#c23531',
        textColor: '#222',
        maskColor: 'transparent',
        zlevel: 0,
      }); //数据加载完之前先显示一段简单的loading动画
      let geoCoordMap = {}
      let rawData = []
      let city = this.grid
      let coordinate = this.mapData[city]
      reqMapPower()
        .then((res) => {
          this.mapChart.clear()
          let data = {
            rawData: [
              ["济南市", "12.00", "2.01", "9.06", null],
              ["青岛市", "61.25", "12.46", "20.00", null],
              ["淄博市", "23.00", "-0.77", "21.07", null],
              ["枣庄市", "36.00", "8.65", "38.56", null],
              ["东营市", "89.10", "8.50", "10.28", null],
              ["烟台市", "32.50", "96.98", "119.00", null],
              ["潍坊市", "19.85", "7.43", "30.91", null],
              ["济宁市", "24.30", "2.12", "88.50", null],
              ["泰安市", "73.59", "2.99", "83.60", null],
              ["威海市", "98.65", "50.46", "7.33", null],
              ["日照市", "31.30", "5.65", "200.02", null],
              ["莱芜市", "49.00", "0.22", "20.51", null],
              ["临沂市", "52.80", "35.25", "345.95", null],
              ["德州市", "66.00", "4.08", "22.66", null],
              ["聊城市", "0.00", "0.00", "59.04", null],
              ["滨州市", "52.70", "69.29", "42.04", null],
              ["菏泽市", "59.00", "61.93", "27.21", null],
            ]
          }
          rawData = data.rawData
          rawData.forEach((item) => {
            item[0] = item[0].substring(0, 2);
            item[1] = item[1] * 1 - item[2] * 1;
            item[3] = item[3] * 1 - item[4] * 1;
          })
          console.log(rawData)
          switch (this.grid) {
            case '山东':
              geoCoordMap = this.mapData
              break
            case '济南':
              geoCoordMap = {
                济南: coordinate,
              }
              break
            case '青岛':
              geoCoordMap = {
                青岛: coordinate,
              }
              break
            case '淄博':
              geoCoordMap = {
                淄博: coordinate,
              }
              break
            case '枣庄':
              geoCoordMap = {
                枣庄: coordinate,
              }
              break
            case '东营':
              geoCoordMap = {
                东营: coordinate,
              }
              break
            case '烟台':
              geoCoordMap = {
                烟台: coordinate,
              }
              break
            case '潍坊':
              geoCoordMap = {
                潍坊: coordinate,
              }
              break
            case '济宁':
              geoCoordMap = {
                济宁: coordinate,
              }
              break
            case '泰安':
              geoCoordMap = {
                泰安: coordinate,
              }
              break
            case '威海':
              geoCoordMap = {
                威海: coordinate,
              }
              break
            case '日照':
              geoCoordMap = {
                日照: coordinate,
              }
              break
            case '莱芜':
              geoCoordMap = {
                莱芜: coordinate,
              }
              break
            case '临沂':
              geoCoordMap = {
                临沂: coordinate,
              }
              break
            case '德州':
              geoCoordMap = {
                德州: coordinate,
              }
              break
            case '聊城':
              geoCoordMap = {
                聊城: coordinate,
              }
              break
            case '滨州':
              geoCoordMap = {
                滨州: coordinate,
              }
              break
            case '菏泽':
              geoCoordMap = {
                菏泽: coordinate,
              }
              break
          }
          // rawData = [["烟台", "300", "124", "110", "12"], ["潍坊", "190", "98", "103", "50"]]
            initMap(this.mapChart, this.grid, geoCoordMap, rawData)
        })
        .catch(() => {})
  }
}