[Bug] ScatterChart with labelLine and labelLayout fails to move labels when built with vue2+vite

[MatthewAry]

Version

5.4.0

Link to Minimal Reproduction

https:/MatthewAry/echarts-scatter-label-bug

Steps to Reproduce

Background:
The file with the chart is located in src/components/EChart.vue

Reproduction Steps:
Step 0: It goes without saying that you need to clone and then use yarn to download all dependencies.

View in the development server:
Step 1: To view the chart in the dev environment run yarn run dev and vite will give you a link to view the application on the dev server which you can open in the browser. You should be able to see the chart as shown in the first picture seen in the current behavior section.

Build For Production and Preview:
Step 1: run yarn run build
Step 2: run yarn run preview and again vite will give you a link to view the compiled SPA on the preview server. You should be able to see the chart as shown in the second picture above.

Current Behavior

When running from the dev server the chart renders as expected

But when built for production, the chart renders like this (unexpected)

Expected Behavior

There is a general expectation that (unless it is explicitly desired), there should be no difference between what you see from a dev server and what you get in production, but this expectation is not holding here.

Instead we're seeing that the labelLayout and labelLine are not taking effect when the SPA is built for production.

Environment

- OS: macOS Monterey
- Browser: Chrome 106.0.5249.119
- Framework: Vue 2, Vite

Any additional comments?

I'm not sure why this is breaking, but I suspect that vite and rollup (which vite uses) has something to do with this. I did try a few things, I disabled minification on build (which is done using terser) to no effect. I also manually put ECharts into its own chunk. It's hard to speculate as to what the problem is but you might find this page https://vitejs.dev/config/build-options.html helpful.

I used https:/logue/vite-vue2-vuetify-ts-starter to make my reproduction. This saved me a ton of time when making a reproduction of what I am seeing.

[plainheart]

It seems you didn't import and use the LabelLayout feature, which may cause this feature to be tree-shaked when building.

Try the following code,

// ...
import { LabelLayout } from 'echarts/features';

echarts.use([
  // ...
  LabelLayout 
])

See also https://echarts.apache.org/handbook/en/basics/import/#importing-required-charts-and-components-to-have-minimal-bundle

BTW, it's not suggested to declare echarts instance in the data function. Please refer to the FAQ.

[MatthewAry]

Thanks @plainheart ! I appreciate your quick response!

1. I didn't know that I was missing an import. I tried scouring the documentation to see if I was missing something before reaching out here, but came up empty. I just took a moment to check https://echarts.apache.org/handbook/en/basics/import again to see if I missed this particular import and I can see I overlooked it as it can be found on the page. I suggest that the option api documentation get updated to include details about what dependency is required to use each feature so this can be avoided. I'm sure that since echarts is so popular that the contributors have plenty of other things to be concerned with.
2. I understand why you would not want to have the echart's instance in the data declaration of a component because Vue would add observables to the instance which could alter its behavior in unpredictable ways. Thank you for the advisement.
3. I have confirmed that adding the import corrected the issue I was experiencing. See # 1

I will close this issue and mark it resolved. I have attached my repository files to this comment for posterity because I have no need to maintain the reproduction repo on my account any Github account any longer.

echarts-scatter-label-bug-master.zip