the chart do not update when the props in option updated unless I use timer to update it.

[zhanglongqi]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

❯ npm ls
├─ @babel/parser@7.20.5
├─ @esbuild/linux-arm@0.16.9
├─ @esbuild/linux-arm64@0.16.9
├─ @esbuild/linux-ia32@0.16.9
├─ @esbuild/linux-loong64@0.16.9
├─ @esbuild/linux-mips64el@0.16.9
├─ @esbuild/linux-ppc64@0.16.9
├─ @esbuild/linux-riscv64@0.16.9
├─ @esbuild/linux-s390x@0.16.9
├─ @esbuild/linux-x64@0.16.9
├─ @vitejs/plugin-vue@4.0.0
├─ @vue/compiler-core@3.2.45
│  ├─ @vue/shared@3.2.45
│  ├─ @babel/parser@^7.16.4
│  ├─ estree-walker@^2.0.2
│  └─ source-map@^0.6.1
├─ @vue/compiler-dom@3.2.45
│  ├─ @vue/shared@3.2.45
│  └─ @vue/compiler-core@3.2.45
├─ @vue/compiler-sfc@3.2.45
│  ├─ @babel/parser@^7.16.4
│  ├─ @vue/compiler-core@3.2.45
│  ├─ @vue/compiler-dom@3.2.45
│  ├─ @vue/compiler-ssr@3.2.45
│  ├─ @vue/reactivity-transform@3.2.45
│  ├─ @vue/shared@3.2.45
│  ├─ estree-walker@^2.0.2
│  ├─ magic-string@^0.25.7
│  ├─ source-map@^0.6.1
│  └─ postcss@^8.1.10
├─ @vue/compiler-ssr@3.2.45
│  ├─ @vue/shared@3.2.45
│  └─ @vue/compiler-dom@3.2.45
├─ @vue/reactivity@3.2.45
│  └─ @vue/shared@3.2.45
├─ @vue/reactivity-transform@3.2.45
│  ├─ @babel/parser@^7.16.4
│  ├─ @vue/compiler-core@3.2.45
│  ├─ @vue/shared@3.2.45
│  ├─ estree-walker@^2.0.2
│  └─ magic-string@^0.25.7
├─ @vue/runtime-core@3.2.45
│  ├─ @vue/shared@3.2.45
│  └─ @vue/reactivity@3.2.45
├─ @vue/runtime-dom@3.2.45
│  ├─ @vue/shared@3.2.45
│  ├─ @vue/runtime-core@3.2.45
│  └─ csstype@^2.6.8
├─ @vue/server-renderer@3.2.45
│  ├─ @vue/shared@3.2.45
│  └─ @vue/compiler-ssr@3.2.45
├─ @vue/shared@3.2.45
├─ csstype@2.6.21
├─ echarts@5.4.1
│  ├─ tslib@2.3.0
│  └─ zrender@5.4.1
├─ esbuild@0.16.9
├─ estree-walker@2.0.2
├─ function-bind@1.1.1
├─ has@1.0.3
│  └─ function-bind@^1.1.1
├─ is-core-module@2.9.0
│  └─ has@^1.0.3
├─ magic-string@0.25.9
│  └─ sourcemap-codec@^1.4.8
├─ nanoid@3.3.4
├─ path-parse@1.0.7
├─ picocolors@1.0.0
├─ postcss@8.4.20
│  ├─ nanoid@^3.3.4
│  ├─ picocolors@^1.0.0
│  └─ source-map-js@^1.0.2
├─ resize-detector@0.3.0
├─ resolve@1.22.1
│  ├─ is-core-module@^2.9.0
│  ├─ path-parse@^1.0.7
│  └─ supports-preserve-symlinks-flag@^1.0.0
├─ rollup@3.7.5
├─ source-map@0.6.1
├─ source-map-js@1.0.2
├─ sourcemap-codec@1.4.8
├─ supports-preserve-symlinks-flag@1.0.0
├─ tslib@2.3.0
├─ vite@4.0.2
│  ├─ esbuild@^0.16.3
│  ├─ postcss@^8.4.20
│  ├─ resolve@^1.22.1
│  └─ rollup@^3.7.0
├─ vue@3.2.45
│  ├─ @vue/shared@3.2.45
│  ├─ @vue/compiler-dom@3.2.45
│  ├─ @vue/runtime-dom@3.2.45
│  ├─ @vue/compiler-sfc@3.2.45
│  └─ @vue/server-renderer@3.2.45
├─ vue-demi@0.13.3
├─ vue-echarts@6.2.3
│  ├─ resize-detector@^0.3.0
│  └─ vue-demi@^0.13.2
└─ zrender@5.4.1
   └─ tslib@2.3.0

Details

the chart do not update when the props in option updated unless I use timer to update it.

Reproduction

https://stackblitz.com/edit/vue-echarts-vue-3-gernt4?file=src/App.vue

[zhanglongqi]

it seems the situation only happens on bar chart instead of pie chart

https://stackblitz.com/edit/vue-echarts-vue-3-yzspka?file=src%2Fcomponents%2Fpower.vue,package.json

https://stackblitz.com/edit/vue-echarts-vue-3-qparwn?file=src%2Fcomponents%2Fpower.vue,src%2FApp.vue

[Justineo]

You are setting option.series[0].data[0] as a ref, which cannot be consumed by ECharts itself. Updating its value also won't help. So you shouldn't use ref at the first place.

[zhanglongqi]

Set it as ref is my fix actually, but this fix only works on Pie, not Bar. the first project here does not use ref and it does not work.

[Justineo]

https://stackblitz.com/edit/vue-echarts-vue-3-geazy8?file=src%2Fcomponents%2Fpower.vue

- option.series[0].data[0].value = props.value;
+ option.series[0].data[0] = props.value;

[zhanglongqi]

Maybe I did make myself clear. I mean is it possible that the chart update with the props without the timer at all.

// setInterval(() => {
//      option.series[0].data[0] = props.value;
//  }, 1000);

https://stackblitz.com/edit/vue-echarts-vue-3-akywya?file=src%2Fcomponents%2Fpower.vue

[Justineo]

I still can’t understand what’s wrong.

Please provide the reproduction, describe current behavior and expected behavior.

[zhanglongqi]

the pie chart will update when the props change, but the bar chart will not. https://stackblitz.com/edit/vue-echarts-vue-3-qparwn?file=src%2Fcomponents%2Fpower.vue

[Justineo]

You are using reactive for your chart option but what you really want is computed as you intended to generate a derived state from your props. This isn't related to this project.

[zhanglongqi]

but why do bar and pie behave so differently?