You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/10/20 15:34:47 UTC
[GitHub] [echarts] MatthewAry opened a new issue, #17799: [Bug] ScatterChart with `labelLine` and `labelLayout` fails to move labels when built with vue2+vite
MatthewAry opened a new issue, #17799:
URL: https://github.com/apache/echarts/issues/17799
### Version
5.4.0
### Link to Minimal Reproduction
https://github.com/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**
<img width="1159" alt="image" src="https://user-images.githubusercontent.com/157217/196984058-36fd1e5e-2791-4dd5-925d-664485a0cd32.png">
But when built for production, the chart renders like this (**unexpected**)
<img width="1159" alt="image" src="https://user-images.githubusercontent.com/157217/196984184-9a9d070f-d6b8-4208-9df9-9c90367539e2.png">
### 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
```markdown
- 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://github.com/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.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] MatthewAry closed issue #17799: [Bug] ScatterChart with `labelLine` and `labelLayout` fails to move labels when built with vue2+vite
Posted by GitBox <gi...@apache.org>.
MatthewAry closed issue #17799: [Bug] ScatterChart with `labelLine` and `labelLayout` fails to move labels when built with vue2+vite
URL: https://github.com/apache/echarts/issues/17799
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #17799: [Bug] ScatterChart with `labelLine` and `labelLayout` fails to move labels when built with vue2+vite
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #17799:
URL: https://github.com/apache/echarts/issues/17799#issuecomment-1285794488
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,
```ts
// ...
import { LabelLayout } from 'echarts/features';
echarts.use([
// ...
LabelLayout
])
```
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] MatthewAry commented on issue #17799: [Bug] ScatterChart with `labelLine` and `labelLayout` fails to move labels when built with vue2+vite
Posted by GitBox <gi...@apache.org>.
MatthewAry commented on issue #17799:
URL: https://github.com/apache/echarts/issues/17799#issuecomment-1285878429
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 know however that echarts being as feature rich and popular as it is is probably well aware of these criticisms.
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](https://github.com/apache/echarts/files/9832325/echarts-scatter-label-bug-master.zip)
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org