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=" 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); } }
效果: