关于react-ECharts点击图例隐藏左侧标题

富可敌锅

已于 2023-04-20 10:01:06 修改

阅读量512

点赞数

文章标签： echarts react.js javascript

于 2023-04-20 09:26:18 首次发布

XJINGUO

本文链接：https://blog.csdn.net/Hy_0452/article/details/130258697

版权

应用场景双y轴中点击图例后某y轴数据不显示后依旧存在y轴标题
此处因为样式需求所以使用的是title的二级标题

const onEvents = {
  legendselectchang: (val) => {
    // 从val中获取选中项以及取消选中项，根据取消选中项中判断是否存在某条y轴中的数据 
    // 若取消选中项中均存在某y轴数据 则不显示二级标题
    const { selected = [] } = val || {};
    const isShowTitle = !selected['某y轴数据图例1'] && !selected['某y轴数据图例2'];
    const { setOption } = EChartRef?.current?.getEchartsInstance() || {}; // EChartRef 是reactEChart的ref
    setOption({
      ...option, title: {
        subtext: '单位',
        show: isShowTitle,
      }
    })
  }
};