使用angular和echarts有条件地显示图表数据

Question

我正在尝试根据条件显示echart图表。意味着如果有数据，那么我必须显示数据以及图表，但是当我没有数据时，我必须在 canvas 中显示一条简单消息，例如 "No data"。看我下面的代码： HTML:

    <div *ngIf="PlaybookChart3 != undefined" myECharts [EChartsOptions]="PlaybookChart3" style="height: 300px;">
                </div>
<div *ngIf="PlaybookChart3 === undefined">No Data</div>

TS代码：

// Pie chart
      this.PlaybookChart3 = {
        title: {
          text: "Category Breakdown",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{c}",
          textStyle: {
            fontWeight: "bold",
            fontSize: 13
          }
        },
        // Enable drag recalculate
        calculable: true,
        series: [
          {
            type: "pie",
            radius: "75%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: this.ccArray2,
            label: {
              normal: {
                show: true,
                position: "outside"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13"
                }
              }
            }
          }
        ]
      };

Answer 1

不是在*ngIf 中断言图表对象的存在，另一种选择是检查您的“this.ccArray2”成员。使用它，您可以决定有条件地显示或隐藏您的消息和图表元素，就像您已经在尝试的那样。

即：*ngIf=“ccArray2.length”或*ngIf=“!ccArray2.length'

Answer 2

you are trying in the right direction but with different variable.

正如我所看到的，您正在初始化 Chart Object (PlaybookChart3)，所以不会有 undefined 那是你没有得到正确结果的原因。

ccArray2 是您分配给 Chart 的数据变量，因此您需要在显示 [=15= 之前检查数据]

只需像下面这样更改您的代码，

 <div *ngIf="ccArray2.length > 0" myECharts [EChartsOptions]="PlaybookChart3" style="height: 300px;">
                </div>
<div *ngIf="ccArray2.length == 0">No Data</div>

希望这对您有所帮助:)

使用angular和echarts有条件地显示图表数据

Conditionally show the chart data using angular and echarts

typescript

echarts

angular