Inner label for pie chart is overlap, logic ignore avoidLabelOverlap and hideOverlap = true

[lpfy]

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

vue-echarts@6.6.1
│ ├── echarts@5.4.3 deduped
│ ├─┬ vue-demi@0.13.11
│ │ └── vue@3.3.4 deduped

Details

Using Nuxt 3 with Vue-echarts. The pie chart was perfect when in development mode. After compiling, the production app having trouble, the inner labels overlap each other. I was using SSR = false to generate SPA.

Reproduction

https://codesandbox.io/p/sandbox/clever-cache-s7fn23?file=/app.vue:38,31

[Justineo]

It seems that you are missing dependency here. You can use the codegen helper to see if you have imported all required modules from echarts: https://vue-echarts.dev/#codegen

In this case you should import { LabelLayout } from "echarts/features".

[lpfy]

Hi @Justineo, thanks for the prompt reply. I can confirm it is now working properly after adding import { LabelLayout } from "echarts/features". The codegen helper is really useful, sorry for not discovering it early. The interesting part (and the enhancement) is no errors or warnings during developments, everything was working perfectly. Probably adding an error message can help a lot of developers when facing the same kind of problem.

e.g. when PieChart was not imported, we can see error messages in dev

[ECharts] Series pie is used but not imported.
import { PieChart } from 'echarts/charts';
echarts.use([PieChart]);

[Justineo]

That is beyond the scope of this project. Please make a feature request to apache/echarts itself.