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() {
}
}