apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.58k stars 19.62k forks source link

[Bug] 5.5.0版本无法进行手动高亮饼图,其他图没有问题 #20134

Closed Jackwew closed 3 months ago

Jackwew commented 4 months ago

Version

5.5.0

Link to Minimal Reproduction

5.5.0

Steps to Reproduce

export const option = () => {
    return {
        title: {
            text: '饼图程序调用高亮示例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
}

let currentIndex = -1;

setInterval(function() {
  var dataLen = option.series[0].data.length;
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  currentIndex = (currentIndex + 1) % dataLen;
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
}, 1000);

Current Behavior

5.5.0版本无法进行手动高亮饼图,其他图没有问题

instance.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: 1
                })

当seriesIndex 设置为0时会报错 信息如下: image

Expected Behavior

期待正常高亮饼图

Environment

- OS: macos sonoma 14.5
- Browser: Chrome Version 126.0.6478.127 (Official Build) (arm64)
- Framework: react 18

Any additional comments?

No response

echarts-bot[bot] commented 4 months ago

@Jackwew It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] Version 5.5.0 cannot manually highlight pie charts, but there is no problem with other charts. **BODY** ### Version 5.5.0 ### Link to Minimal Reproduction 5.5.0 ### Steps to Reproduce export const option = () => { return { title: { text: 'Pie chart program call highlighting example', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)' }, legend: { orientation: 'vertical', left: 'left', data: ['direct access', 'email marketing', 'affiliate advertising', 'video advertising', 'search engine'] }, series: [ { name: 'Access source', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: 'Direct access' }, { value: 310, name: 'Email Marketing' }, { value: 234, name: 'affiliate advertising' }, { value: 135, name: 'Video Advertisement' }, { value: 1548, name: 'search engine' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } } let currentIndex = -1; setInterval(function() { var dataLen = option.series[0].data.length; //Cancel the previously highlighted graphics myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // Highlight the current graphic myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // show tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000); ### Current Behavior Version 5.5.0 cannot manually highlight pie charts, but there is no problem with other charts. ```javascript instance.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 1 }) ``` An error will be reported when seriesIndex is set to 0 Message as follows: ![image](https://github.com/apache/echarts/assets/50656464/c7bbf005-ab87-408e-b172-e9c1a6d0cd13) ### Expected Behavior Expect normal highlighted pie chart ### Environment ```markdown - OS: macos sonoma 14.5 - Browser: Chrome Version 126.0.6478.127 (Official Build) (arm64) - Framework: react 18 ``` ### Any additional comments? _No response_
Jackwew commented 4 months ago

Found the problem

// good
let currentIndex = -1;

setInterval(function() {
  var dataLen = option.series[0].data.length;
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  currentIndex = (currentIndex + 1) % dataLen;
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
}, 1000);

// bad
  var dataLen = option.series[0].data.length;
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: 1
  });
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 1
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 1
  });

Why do errors occur when setting the first or other dataindexes separately? Can someone help me solve this problem?

plainheart commented 4 months ago

你是 setOption 之后,立即调用 dispatchAction 吗?需要等一下,比如加上一个 setTimeout(() => { // ... }, 0)。

Demo

Jackwew commented 4 months ago

你是 setOption 之后,立即调用 dispatchAction 吗?需要等一下,比如加上一个 setTimeout(() => { // ... }, 0)。

Demo

不是的,我是在echarts渲染完成后调用高亮函数的

plainheart commented 4 months ago

贴下代码片段,看看怎么写的。

echarts-bot[bot] commented 3 months ago

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.