apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.5k stars 19.62k forks source link

[Bug] ECharts not displaying in Angular library used in Thingsboard widget #20153

Open Younes210701 opened 3 months ago

Younes210701 commented 3 months ago

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 :
  1. Integrate Echarts in the Angular Library :
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]
      }]
    });
  }
}
  1. Build and export the Angular library (which I called Phoebus):
  1. Use the Angular library (Phoebus) in Thingsboard:
  1. Run the Thingsboard project:

Current Behavior

Expected Behavior

The EChart should render correctly within the Thingsboard widget.

Environment

- 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.

Possible Causes:

Steps Taken to Troubleshoot:

JimmyAx commented 3 months ago

This is probably the same as #19414.

Younes210701 commented 2 months ago

This is probably the same as #19414.

I don't think it's the same, I cannot even see the tooltip and I'm working with different angular project type (project type is library and not application)

Younes210701 commented 1 month ago

Any news ?