Angular中ngx-echarts的使用

1.安装

npm install echarts --save
npm install ngx-echarts --save

2.引入模块

2-1.angular.json中引入echarts.js文件

"scripts": [ "node_modules/echarts/dist/echarts.js"  ]

2-2.当前组件所在的根模块导入NgxEchartsModule模块

import {NgxEchartsModule} from 'ngx-echarts';

imports: [ NgxEchartsModule ]

3.ts中使用

ngxecharts.component.html

<div echarts [options]="options"></div>

ngxecharts.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ngxecharts',
  templateUrl: './ngxecharts.component.html',
  styles: []
})
export class NgxechartsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  options = { 
    title: { text: 'ECharts 入门示例', }, 
    tooltip: {}, 
    xAxis: { 
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], 
    },
     yAxis: {}, 
     series: [
       { 
        name: '销量', 
        type: 'bar', 
        data: [5, 20, 36, 10, 10, 20],
       },
      ], 
    };


}

4.运行查看效果

npm start

学习参考：https://www.cnblogs.com/zero-zm/p/10014633.html