[Bug] ECharts.resize() ERROR! Cannot read properties of undefined (reading 'type')

[masx200]

Version

5.3.1

Link to Minimal Reproduction

https://ant-colony-algorithm-function-test-3w5nc58v4-masx200.vercel.app/

Steps to Reproduce

ECharts.resize() 

https://github.com/masx200/ant-colony-algorithm-function-test/blob/7a8371201a35e66da1e9aa18da63857fe03521d6/src/appcom.ts
https://github.com/masx200/ant-colony-algorithm-function-test/blob/0ae8b2ddb0c8777c8a703aa67d57742391587fed/functions/echarts-line.ts
https://github.com/masx200/ant-colony-algorithm-function-test/blob/3276347cea90ac2c9535410e3c7a82328005c1a9/src/createchartofcontainer.ts
https://github.com/masx200/ant-colony-algorithm-function-test/blob/3276347cea90ac2c9535410e3c7a82328005c1a9/functions/createmychart.ts
https://github.com/masx200/ant-colony-algorithm-function-test/blob/3276347cea90ac2c9535410e3c7a82328005c1a9/functions/drawlinechart.ts
https://github.com/masx200/ant-colony-algorithm-function-test/blob/3276347cea90ac2c9535410e3c7a82328005c1a9/src/showanddrawrandomgreedyoftsp.ts#L10

Current Behavior

node_modules/echarts/lib/processor/dataSample.js

  if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {

echarts.js:976 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at Object.reset (dataSample.js:112:34)
    at Task2.seriesTaskReset [as _reset] (Scheduler.js:485:70)
    at Task2._doReset (task.js:202:23)
    at Task2.perform (task.js:117:33)
    at Scheduler.js:272:20
    at HashMap2.each (util.js:447:20)
    at Scheduler.js:255:23
    at Array.forEach (<anonymous>)
    at each (util.js:205:13)
    at Scheduler2._performStageTasks (Scheduler.js:221:5)

Expected Behavior

no errors.

Environment

- OS:Microsoft Windows [版本 10.0.19044.1566]
- Browser:Microsoft Edge
版本 99.0.1150.30 (官方内部版本) (64 位)
- Framework:vue 3.2.31

Any additional comments?

No response

[plainheart]

DON'T use ref or reactive to wrap the echarts instance. Use a common variable or shallowRef to avoid the deep watch for echarts instance.

[masx200]

Can he give a more friendly tip than a confusing one?

DON'T use ref or reactive to wrap the echarts instance. Use a common variable or shallowRef to avoid the deep watch for echarts instance.

[plainheart]

https://github.com/masx200/ant-colony-algorithm-function-test/blob/7a8371201a35e66da1e9aa18da63857fe03521d6/src/appcom.ts#L18-L24

I didn't run the project code you provided, but it looks similar to those raised by other developers before. Try to remove reactive or use shallowRef.

const chartstore: {
    best: undefined | ReturnType<typeof createchartofcontainer>;
    latest: undefined | ReturnType<typeof createchartofcontainer>;
-} = reactive({
+} = {
    best: undefined,
    latest: undefined,
};

const chartstore: {
    best: undefined | ReturnType<typeof createchartofcontainer>;
    latest: undefined | ReturnType<typeof createchartofcontainer>;
-} = reactive({
+} = shallowRef({
    best: undefined,
    latest: undefined,
};

[masx200]

if (count > 10 && coordSys?.type === 'cartesian2d' && sampling) {

I think the code here should check if the type is null and give a friendly hint.

[masx200]

When I replace "reactive" with "shallowReactive" it works fine.

[plainheart]

This is caused by the third-party library. It has no business with the null check. Please close this issue if you have no further problems. Thanks.

BTW, it's meaningless to make echarts instance reactive.

[masx200]

For "echarts", I think when executing the 'resize' function, we should judge whether the type of "this" is "EChartsType", and give a friendly prompt instead of giving an incomprehensible error prompt.

[agne-matheus]

just use shallowRef instead of ref guys

[xianghongai]

markRaw()