1. Install:
npm install echarts --save
2. Import echarts in TypeScript file
import * as echarts from 'echarts';
The official demo and API, you can develop your own needs
https://www.echartsjs.com/examples/
4.html layout
<div id="lineChart" style="width: 600px;height:400px;"></div>
5.ts Code
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 = ecinit (documentgetElementById ( ' lineChart ' )); const lineChartOption = { xAxis: { type: ', category ', , data: [ ', in Mon ', , ', Tue ', , ', Wed ', , ', to Thu ', , ', on Fri ', , ', in Sat ', , ', in Sun ', yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] } lineChart.setOption(lineChartOption); } }
effect: