mrakgr commented on issue #20156:
URL: https://github.com/apache/echarts/issues/20156#issuecomment-2228303783
Yeah, this works. Thank you. Yesterday I noticed that changing the
background color of the div also changes the background color of the tooltip,
but I didn't put 2 and 2 together. Here is how ECharts can be embedded into a
Lit element.
```ts
@customElement('training-chart')
class Training_Chart extends LitElement {
static styles = css`
:host {
display: block;
height: 100%;
width: 100%;
}
`
chart?: echarts.ECharts;
render() {
return html`<slot></slot>`; // Will put the chart which is in the
light DOM into the shadow root.
}
protected firstUpdated(_changedProperties: PropertyValues): void {
// Create the echarts instance
this.chart = echarts.init(this);
// Draw the chart
this.chart.setOption({
title: {
text: 'ECharts Getting Started Example'
},
tooltip: {},
xAxis: {
data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels',
'socks']
},
yAxis: {},
series: [
{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
// Without this the chart sizing wouldn't work properly.
const chart_container_resize_observer = new ResizeObserver(() =>
this.chart?.resize());
chart_container_resize_observer.observe(this)
}
}
```
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
