Younes210701 opened a new issue, #20153: URL: https://github.com/apache/echarts/issues/20153
### 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: `<div #chartContainer style="width: 100%; height: 400px;"></div>`, }) 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. -- 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]
