处理echarts堆叠柱状图的legend点击事件legendselectchanged

你的名字 2024-04-20 08:17 74阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]

这个效果是三个柱子堆叠而成。

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)
        }
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/694865396b2344f4b34c8599a8386451.png