Angular中使用ECharts圖表

1.安裝：

npm install echarts --save

2.在 TypeScript 文件中導入echarts

import * as echarts from 'echarts';

3.根據官方demo和API，開發自己的需求即可

https://www.echartsjs.com/examples/
4.html布局

<div id="lineChart" style="width: 600px;height:400px;"></div>

5.ts代碼

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {


  constructor() {

  }

  ngOnInit() {
    this.initCharts();
  }
  initCharts() {
    const ec = echarts as any;
    const lineChart = ec.init(document.getElementById('lineChart'));

    const lineChartOption = {

      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
    lineChart.setOption(lineChartOption);

  }
}

效果：