echarts bar legend 如何配置？

作者站长头像
站长
· 阅读数 11
option = {
    legend: {
        //...
    },
    xAxis: {
        name:'a',
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

legend 如何显示 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'，在不改变 series 的 data 结构情况下

echarts bar legend 如何配置？

回复
1个回答
avatar
test
2024-07-13

answer image

这部分可以不用echarts自己做，点击的时候设置对应的数据然后重新渲染
    <div class="list">
        <div class="item" v-for="(item, i) in xAxisArr" :key="item" @click="setseriesData(i)">{{ item }}</div>
    </div>
  data () {
    return {
      xAxisArr: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      seriesArr: [120, 200, 150, 80, 70, 110, 130]
    }
  methods: {
    setseriesData (index) {
      //...
      this.option.series[0].data[index] = this.option.series[0].data[index] ? 0 : this.seriesArr[index]
      //...
    }
  },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容