Angular中使用ECharts图表
阅读原文时间:2023年07月10日阅读:1

1.安装:

npm install echarts --save

2.在 TypeScript 文件中导入echarts

import * as echarts from 'echarts';

3.根据官方demo和API,开发自己的需求即可

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

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);

}
}

效果: