[Bug] ECharts not displaying in Angular library used in Thingsboard widget
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.5.1
### Link to Minimal Reproduction
https://github.com/apache/echarts
### Steps to Reproduce
Since I cannot do a setup to reproduce the issue, i will try to give you the detailed steps to reproduce this issue:
1. Create an Angular library :
- Generate a new Angular library using CLI.
- Install Echarts by running `npm install echarts`.
2. Integrate Echarts in the Angular Library :
- Create a new Angular component within the library.
- Import Echarts and initialize it within the component. Below is a simplified version of the code used :
```typescript
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as echarts from 'echarts';
@Component({
selector: 'lib-echart',
template: `
})
export class EchartComponent implements OnInit {
@ViewChild('chartContainer', { static: true }) chartContainer: ElementRef;
ngOnInit(): void {
this.initChart();
}
initChart(): void {
const chart = echarts.init(this.chartContainer.nativeElement);
chart.setOption({
title: {
text: 'EChart Example'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D']
},
yAxis: {},
series: [{
type: 'bar',
data: [5, 20, 36, 10]
}]
});
}
}
```
3. Build and export the Angular library (which I called Phoebus):
- Build the Angular library using Angular CLI.
- The build process generates a phoebus.js script.
4. Use the Angular library (Phoebus) in Thingsboard:
- Import the phoebus.js script as a resource in Thingsboard.
- Create a new Thingsboard widget and use the EchartComponent within the widget.
5. Run the Thingsboard project:
- Start Thingsboard.
- Navigate to the dashboard containing the widget with EchartComponent.
### Current Behavior
- The chart does not display, and there are no visible errors in the console.
### Expected Behavior
The EChart should render correctly within the Thingsboard widget.
### Environment
```markdown
- OS:Linux Ubuntu 22.04.4 LTS
- Browser: Mozilla Firefox Browser 127.0.2
- Framework:Angular @15.2.10
```
### Any additional comments?
**Description:**
I am experiencing issues displaying ECharts in an Angular library (called Phoebus) that is used as a widget in Thingsboard. When attempting to render the charts, they do not display correctly within the Thingsboard environment. Below are the details of my setup and the steps to reproduce the issue.
- I have verified that the chart container has the correct dimensions and that ECharts is being initialized.
- The same code works correctly when used directly in a standard Angular project without the library setup and Thingsboard.
- It seems that the issue arises when integrating the Angular library (Phoebus) into the Thingsboard environment.
**Possible Causes:**
- There may be conflicts between how Thingsboard handles Angular components and how ECharts expects to be rendered.
- There might be a timing issue where the chart container is not fully ready when ECharts tries to initialize.
**Steps Taken to Troubleshoot:**
- Ensured all dependencies are correctly installed and up-to-date.
- Tried different initialization methods for ECharts.
- Verified that the chart container dimensions are correctly set.
- Attempted using different ECharts versions.
Contributor guide
Assessment
This issue has not been assessed yet.