Angular10.x 如何使用eCharts圖表庫

qq_39439368發表於2020-12-25

首先,我們在專案中要安裝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>

就完成了。
在這裡插入圖片描述

相關文章