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: [, , , , , , ],
        type: 'line'
      }]
    }
    lineChart.setOption(lineChartOption);
 
  }
}

效果：