ng-devui-materials/pie-chart/src/pie-chart.component.html

Materials of DevUI Admin

<da-layout-row class="da-analysis-echarts" [daGutter]="[24, 24]">
  <da-col-item [daSpan]="24" [daXs]="24">
    <div class="da-echart-container da-content-card" #chartWrapper>
      <div class="da-content-title">用户访问情况</div>
      <da-layout-row [daGutter]="[24, 24]">
        <da-col-item [daSpan]="24" [daXs]="16">
          <d-echarts
            [options]="pieData"
            height="20rem"
            width="100%"
            (chartReady)="getPieChart($event)"
          ></d-echarts>
        </da-col-item>
        <da-col-item [daSpan]="24" [daXs]="8">
          <div class="da-table-wrapper">
            <d-data-table
              [dataSource]="pieSource"
              [fixHeader]="true"
              maxHeight="220px"
              [scrollable]="true"
              [type]="'striped'"
            >
              <thead dTableHead>
                <tr dTableRow>
                  <th
                    dHeadCell
                    *ngFor="let colOption of dataTablePieOption.columns"
                  >
                    {{ colOption.header }}
                  </th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                  <tr dTableRow>
                    <td
                      dTableCell
                      *ngFor="let colOption of dataTablePieOption.columns"
                    >
                      {{
                        colOption.fieldType === "date"
                          ? (rowItem[colOption.field] | i18nDate: "short":false)
                          : rowItem[colOption.field]
                      }}
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
        </da-col-item>
      </da-layout-row>
    </div>
  </da-col-item>
</da-layout-row>