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: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
    lineChart.setOption(lineChartOption);

  }
}

效果：

 

最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！

来源：https://www.cnblogs.com/loaderman/p/11260713.html