在開發(fā)中驴党，如果使用可視化圖表來(lái)展示枯燥的統(tǒng)計(jì)數(shù)字，那么將大大提升用戶體驗(yàn)誊薄。下面履恩，我們就來(lái)在angular中引入百度的echarts庫(kù)，并使用它呢蔫。
- 首先切心，我們?cè)陧?xiàng)目中要安裝
echarts庫(kù)，代碼如下：
npm install echarts --save
npm install ngx-echarts --save
-
然后，修改
angular.json文件绽昏，引入echarts：
修改angular.json文件.png -
再然后协屡，在需要的模塊中，引入
NgxEchartsModule模塊而涉，比如下面的user模塊：
引入NgxEchartsModule模塊.png -
最后著瓶，在需要的組件中使用就可以了。比如在user模塊的statistic組件中用啼县。
statistic組件.png
statistic組件的模板代碼如下：
<div class="bigTitle">預(yù)約統(tǒng)計(jì)：</div>
<div echarts [options]="chartOption3"></div>
statistic組件的代碼如下：
import { Component, OnInit } from '@angular/core';
import { EChartOption } from 'echarts';
@Component({
selector: 'yz-user-statistic',
templateUrl: './statistic.component.html',
styleUrls: ['./statistic.component.scss']
})
export class StatisticComponent implements OnInit {
// 創(chuàng)建表格對(duì)象
chartOption3: EChartOption = {};
constructor() { }
ngOnInit() {
this.initChart3();
}
// 初始化表格對(duì)象
initChart3() {
this.chartOption3 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>材原: {c} (ugkzorq%)"
},
legend: {
orient: 'vertical',
x: 'right',
data: ['已上機(jī)', '已錯(cuò)過(guò)', '預(yù)約中', '已取消']
},
series: [
{
name: '后臺(tái)統(tǒng)計(jì)',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '已上機(jī)' },
{ value: 310, name: '已錯(cuò)過(guò)' },
{ value: 234, name: '預(yù)約中' },
{ value: 135, name: '已取消' }
]
}
]
};
}
}
最終的效果就是這樣：
最終效果.png
