Ionic4/Angular8项目中使用echarts

在使用Angular开发Ionic项目的时候，是需要引入ngx-charts来使用echarts的。

1、安装echarts包、ngx-charts包

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

2、angular.json中引入echart.js文件

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

3、在使用echarts的模块中导入NgxEchartsModule

import { NgxEchartsModule } from 'ngx-echarts';

imports: [ NgxEchartsModule ]

4、页面中是用echarts

4.1 HTML页中的代码

<div echarts [options]="options" class="echarts" style="height:320px;"></div>

4.2 页面的ts代码

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

@Component({
  selector: 'app-rubber-product-chart',
  templateUrl: './rubber-product-chart.page.html',
  styleUrls: ['./rubber-product-chart.page.scss'],
})
export class RubberProductChartPage implements OnInit {
  options: any = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  };   //echart图表选项
          
  constructor() { }

  ngOnInit() {
    
  }
}