Rendering Vue eChart in SFC CustomElement - Shadow-Root

[SebastiaoAlterdata]

Confirmation

• [X] I can confirm this is a feature request for the Vue component instead of ECharts itself.

Details

How can I render vue-echarts in SFC CustomElement?

ES Module imports

vue-echarts": "^6.6.8

Details

I'm using vue-echarts to create a bar chart. It's working normally when I just run the app locally, but in my case, I need to build this app like a custom element. So after build my web component, the bar chart doesn't work anymore. It's not rendering because of the style, that's not injecting in shadow root.

I'd like to know if there's a way to solve this case.

 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { BarChart } from 'echarts/charts';

<v-chart :option="option" autoresize />

[Justineo]

You can try using the CSP version with which you can import the built-in styles manually. See https://github.com/ecomfe/vue-echarts#csp-style-src-or-style-src-elem.

[SebastiaoAlterdata]

You can try using the CSP version with which you can import the built-in styles manually. See https://github.com/ecomfe/vue-echarts#csp-style-src-or-style-src-elem.

In fact. I didn't see the style file. This is right and it works. Tks!