echart单系列柱状图增加配置筛选legend

先看整体效果图：

这边简单说下实现思路:
单列柱子在官网demo是没有legend的, 但是多列柱子是有的
因此, 我们可以让单列柱子变成多列柱子的集合, 然后集合里面只有一列是有data的
相当于是这样的集合[0,1,0]
然后使用重叠配置, 把那些空的数据隐藏,这样看起来就只有一列
如果觉得以上代码比较绕复杂, 可以使用单列柱子的配置, 然后自己手写一个legend, 点击的时候数据变更,刷新一下chat就行了(当然, 这只是我的构想, 但是我觉得是可以实现的)
完整代码：

const chart = this.echarts.init(document.getElementById('dsm'))
const COLORS = this.colors // 保存颜色常量
let names = [], values = []
let itmBars = [], labels = []
let cIndex = 0, endV = Math.floor(100 / (data.length / 10))
let isShow = data.length > 10
 // 提取函数，以便复用和维护
const addItmBars = (item, index) => {
  if (cIndex > 16) cIndex = 0
  item['color'] = COLORS[index]
  if (item.dsmdtoList) {
    item.dsmdtoList.forEach(({ title, avgScore, area }) => {
      if (avgScore !== 0) {
        itmBars.push({
          name: title,
          value: avgScore.toFixed(2),
          region: item.title,
          area: area,
          key: index,
          ib: true,
          color: item.color
        })
      }
    })
  }
  labels.push(item.title)
  cIndex++
}
 data.forEach(addItmBars)
 names = itmBars.map(({ area, name }) => `${area}\n${name}`)
values = itmBars.map(({ region, value, color }) => ({
  name: region,
  type: 'bar',
  barMaxWidth: 30,
  barGap: '-100%',
  itemStyle: { color }
}))
 // 提取函数，替换下标的值
const replaceValue = (arr, idx, value) => [
  ...arr.slice(0, idx),
  value,
  ...arr.slice(idx + 1)
]
 values.forEach(({ data }, index) => {
  const arr = new Array(values.length).fill(0)
  data = replaceValue(arr, index, itmBars[index].value)
})
 const option = {
  title: {
    text: `${this.$t('平均分-')}${str}`,
    subtext: '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0（分）',
    subtextStyle: { fontSize: 10 }
  },
  dataZoom: [{
    type: 'slider',
    start: 0,
    end: endV,
    height: 20,
    show: isShow
  }],
  tooltip: {
    trigger: 'item',
    formatter: ({ seriesIndex }) => {
      const { area, name, value } = itmBars[seriesIndex]
      return `<div>
        <p>${area}</p>
        <p>${name || '--'}：${value || '--'}</p>
      </div>`
    }
  },
  legend: {
    top: 30,
    itemWidth: 8,
    itemHeight: 8,
    data: labels
  },
  xAxis: { data: names, axisLabel: { rotate: 45 }},
  yAxis: { splitLine: false },
  grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
  series: values
}
 chart.clear()
chart.setOption(option)