React+Echarts 图形轮播

最新推荐文章于 2024-06-13 14:47:37 发布

PYLH7

最新推荐文章于 2024-06-13 14:47:37 发布

阅读量406

点赞数

分类专栏： react Echarts

本文链接：https://blog.csdn.net/PYLH7/article/details/115663411

版权

react 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何在ECharts中实现饼图数据项的高亮循环效果，通过`highlightLoop`函数每两秒切换高亮数据，同时提供了回调函数用于进一步处理。在React环境中，初始化ECharts实例并应用配置后，调用该函数进行动态展示。

摘要由CSDN通过智能技术生成

export function highlightLoop(echart, length, callback) {
  let index = 0;
  return setInterval(function () {
    if(index !== 0){    //取消高亮
      echart.dispatchAction({
        type: 'downplay',
        dataIndex: index - 1,
      });
    }
    if (index == length) {
      index = 0;
    }
    echart.dispatchAction({    //设置高亮
      type: 'highlight',
      dataIndex: index,
    });
    if (callback) {
      callback(index);
    }
    index++;
  }, 2000);
}

const echartElement = useRef<HTMLDivElement>();
const pieChart = echart.init(echartElement.current, 'yunlu');
pieChart.setOption(option); 
highlightLoop(pieChart, length,() => {})

return <div
      id="pie"
      className="chart-container"
      style={props.style}
      ref={e => {
        if (e != null) {
          echartElement.current = e;

        }
      }}
    />