Angular used ECharts chart

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:

 

Guess you like

Origin www.cnblogs.com/loaderman/p/11260713.html