處理echarts堆疊柱狀圖的legend點擊事件legendselectchanged

這個效果是三個柱子堆疊而成。

data.nian = data.nian.map((item, index) => {
	  return `${item}年`
	})
	
	let chart = echarts.init(document.getElementById('school-building-chart'))
	let arr = []; let datas = []
	for (var i = 0; i < data.chuzhong.length; i++) {
	  arr.push(Number(data.chuzhong[i]) + Number(data.xiaoxue[i]))
	}
	// let max = Math.max(...arr)
	arr.forEach(function (item, index) {
	  datas.push({
	    value: item
	  })
	})
	let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 座標軸指示器，座標軸觸發有效
            type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
          },
          formatter: function (params) {
            let message = ''
            params.forEach(function (item, index) {
              if (item.seriesName !== '') {
                message += item.seriesName + ':' + item.data + '<br>'
              }
            })
            return message
          }
        },
        legend: {
          show: true,
          right: '5%',
          top: '5%',
          orient: 'horizontal',
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 14,
            color: '#D1D1D1'
          }
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: data.nian,
          axisLine: {
            lineStyle: {
              color: 'rgba(151,151,151,1)'
            },
            symbol: ['none', 'arrow'],
            symbolSize: [5, 10],
            symbolOffset: [10, 8]
          },
          axisLabel: {
            color: '#BEBEBE',
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '所',
          nameLocation: 'end',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            length: 10,
            lineStyle: {
              color: '#8896b3'
            }
          },
          nameTextStyle: {
            color: '#53CABE',
            fontSize: 12
          },
          axisLabel: {
            color: '#BEBEBE',
            fontSize: 12
          },
          splitArea: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(151,151,151,1)'
            },
            symbol: ['none', 'arrow'],
            symbolSize: [5, 10],
            symbolOffset: [10, 8]
          }
        },
        series: [
          {
            name: '初中',
            type: 'bar',
            stack: '學校',
            itemStyle: {
              color: this.schoolBuildingColor[0]
            },
            barWidth: '15%',
            barGap: '50%',
            // 位置偏移
            barCategoryGap: '5%',
            data: data.chuzhong,
            z: 2
          },
          {
            name: '小學',
            type: 'bar',
            stack: '學校',
            itemStyle: {
              color: this.schoolBuildingColor[1]
            },
            barWidth: '15%',
            barGap: '50%',
            // 位置偏移
            barCategoryGap: '5%',
            data: data.xiaoxue,
            z: 2
          },
          {
            name: '',
            type: 'bar',
            barGap: '-100%',
            barWidth: '15%',
            z: 1,
            itemStyle: {
              color: 'transparent'
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#E6E6E6',
                  fontSize: 14
                },
                formatter: '{c}'
              }
            },
            data: datas
          }
        ]
      }
      chart.setOption(option)
	// 處理legend點擊事件
      chart.on('legendselectchanged', function (obj) {
        if (obj.name === '初中') {
          if (obj.selected['初中'] === false && obj.selected['小學'] === true) {
            option.series[2].data = data.xiaoxue
            option.series[1].data = data.xiaoxue
            option.series[0].data = []
            option.tooltip.show = true
            chart.setOption(option)
          } else if (obj.selected['初中'] === true && obj.selected['小學'] === false) {
            option.series[2].data = data.chuzhong
            option.series[1].data = []
            option.series[0].data = data.chuzhong
            option.tooltip.show = true
            chart.setOption(option)
          } else if (obj.selected['初中'] === false && obj.selected['小學'] === false) { // 如果“初中”和“小學”legend都沒選中，則底層的柱數據不顯示
            option.series[2].data = []
            option.series[1].data = []
            option.series[0].data = []
            option.tooltip.show = false // 沒有數據不再顯示toolTip
            chart.setOption(option)
          } else if (obj.selected['初中'] === true && obj.selected['小學'] === true) {
            option.series[2].data = datas
            option.series[1].data = data.xiaoxue
            option.series[0].data = data.chuzhong
            option.tooltip.show = true
            chart.setOption(option)
          }
        } else if (obj.name === '小學') {
          if (obj.selected['小學'] === false && obj.selected['初中'] === true) {
            option.series[2].data = data.chuzhong
            option.series[1].data = []
            option.series[0].data = data.chuzhong
            option.tooltip.show = true
            chart.setOption(option)
          } else if (obj.selected['小學'] === true && obj.selected['初中'] === false) {
            option.series[2].data = data.xiaoxue
            option.series[1].data = data.xiaoxue
            option.series[0].data = []
            option.tooltip.show = true
            chart.setOption(option)
          } else if (obj.selected['初中'] === false && obj.selected['小學'] === false) { // 如果“初中”和“小學”legend都沒選中，則底層的柱數據不顯示
            option.series[2].data = []
            option.series[1].data = []
            option.series[0].data = []
            option.tooltip.show = false // 沒有數據不再顯示toolTip
            chart.setOption(option)
          } else if (obj.selected['小學'] === true && obj.selected['初中'] === true) {
            option.series[2].data = datas
            option.series[1].data = data.chuzhong
            option.series[0].data = data.xiaoxue
            option.tooltip.show = true
            chart.setOption(option)
          }
        }
      })