Angular10.x 如何使用eCharts圖表庫

首先，我們在專案中要安裝echarts庫，程式碼如下：

npm install echarts --save
npm install ngx-echarts --save

然後，一定要安裝下面這個包，否則10.x版本會報這個錯誤的
（ERROR in The target entry-point “ngx-echarts” has missing dependencies:

• resize-observer-polyfill）

npm install resize-observer-polyfill --save-dev

下一步就是在對應的module裡面匯入NgxEchartsModule

import {NgxEchartsModule} from 'ngx-echarts';
import * as echarts from 'echarts';
imports: [
    NgxEchartsModule.forRoot({
      echarts,
    })
  ],

在對應的ts元件中，初始化資料

public chartOption1 : EChartsOption = {};
  constructor() { }

  ngOnInit(): void {
    this.initChart();
  }

  initChart() {
    this.chartOption1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 座標軸指示器，座標軸觸發有效
            type: 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
        }
      },
      legend: {
          data: ['百度', '谷歌', '必應', '其他']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: [
          {
              type: 'category',
              data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
          }
      ],
      yAxis: [
          {
              type: 'value'
          }
      ],
      series: [
        
          {
              name: '百度',
              type: 'bar',
              barWidth: 5,
              stack: '搜尋引擎',
              data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
              name: '谷歌',
              type: 'bar',
              stack: '搜尋引擎',
              data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
              name: '必應',
              type: 'bar',
              stack: '搜尋引擎',
              data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
              name: '其他',
              type: 'bar',
              stack: '搜尋引擎',
              data: [62, 82, 91, 84, 109, 110, 120]
          }
      ]
    };
  }

在對應的html中使用

<div echarts [options] = "chartOption1"></div>

就完成了。