MinutesSneezer opened a new issue #11132: 数据切换问题 / Data switching problem ▶ TypeError: Cannot read property 'get' of undefined URL: https://github.com/apache/incubator-echarts/issues/11132 ### Version 4.2.1 ### Reproduction link [https://github.com/hard-to-name-a-team/huyaStock/blob/master/src/components/Chart/index.js](https://github.com/hard-to-name-a-team/huyaStock/blob/master/src/components/Chart/index.js) ### Steps to reproduce 在业务平台上使用`<Chart>`组件，点击右上角工具栏「切换时间」按钮，图表无变化，控制台显示 `TypeError: Cannot read property 'get' of undefined`。 Use <Chart> component on our platform, and click the eye-shaped tool button at the upper-right corner to find the chart unchanged, with DevTools console reporting `TypeError: Cannot read property 'get' of undefined`. ### What is expected? 点击「切换时间」工具按钮后，图表在不同数据曲线间切换，例如显示第一条并隐藏第二条曲线。 Chart switches the display of different data lines (e.g., displaying line 1 and hiding line 2) on clicking tool button. ### What is actually happening? 图表无变化。 Chart remains unchanged. --- 大概结构如下。首先定义好3个`series`变量，每个`series`绑定不同`datasetIndex`和`encode`： ```js const thisSeries = [ { name: '本次数据', datasetIndex: 0, encode: { x: 'thisTime', y: 'thisValue' }, ... }, { name: '阴影', datasetIndex: 0, encode: { x: 'thisTime', y: 'thisValue' }, ... // 配色不同 } ], lastSeries = [ { name: '上次数据', datasetIndex: 1, encode: { x: 'lastTime', y: 'lastValue' }, ... } ], lastLastSeries = [ { name: '上上次数据', datasetIndex: 2, encode: { x: 'lastLastTime', y: 'lastLastValue' },, ... } ] ``` 然后初始化`setOption`，定义「切换时间」的自定义工具： ```js { toolbox: { feature: { mySwitch: { // 自定义工具 onclick: () => { const myChart = echarts.getInstanceByDom(document.getElementById('Chart')); const [lastData, lastLastData] = ...; // 获取其他两次数据 const currentSeries = myChart.getOption().series; // 当前图表显示的数据 if (...) { // 如果要么是thisSeries要么是lastSeries if (currentSeries.length === 2) { // 如果当前显示的是thisSeries if (lastData.length !== 0) { // 如果lastData有数据 myChart.setOption({ series: lastSeries }, { notMerge: true }); // 则切换成lastSeries ... // 并提示已切换 } else { // 如果lastData无数据 ... // 则提示无数据 } } else { // 如果当前显示的是lastSeries myChart.setOption({ series: thisSeries }, { notMerge: true }); // 切换成thisSeries ... // 并提示已切换 } } else { // 如果要么是lastSeries要么是lastLastSeries if (currentSeries[0].datasetIndex === 1) { // 如果当前显示的是lastSeries myChart.setOption({ series: lastLastSeries }, { notMerge: true }); // 则切换成lastLastSeries ... // 并提示已切换 } else { ... // 否则提示无数据 } } }, // onclick结束 ... // 工具的其他option }, ... // 其他工具 }, ... }, ... // 其他option } ``` 但是并没有达到切换的效果。 *附注：* 更新数据是这样的：获取`thisData, lastData, lastLastData`后，更新到`dataset`中，再`setOption`为相应的`series`： ```js { dataset: [ { sourceHeader: false, dimensions: [{ name: 'thisTime', type: 'time' }, { name: 'thisValue', type: 'float' }], source: thisData, // 传入新的thisData id: 'thisData' }, { sourceHeader: false, dimensions: [{ name: 'lastTime', type: 'time' }, { name: 'lastValue', type: 'float' }], source: lastData // 新数据 }, { sourceHeader: false, dimensions: [{ name: 'lastLastTime', type: 'time' }, { name: 'lastLastValue', type: 'float' }], source: lastLastData // 新数据 }, ], series: this.props.displayIndex === 0 ? thisSeries : this.props.displayIndex === 1 ? lastSeries : lastLastSeries // 初始显示什么图表由displayIndex决定 } ``` <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
