Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
Angular4记账webApp练手项目之三(在angular4项目中使用路由router)
Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)
Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)
前台源码
前言
例子基于之前文章开发。
用angular的思想之一,数据驱动,页面上的一切变化我们都用数据变化来控制,页面只需要绑定数据,然后我们操作数据。
echarts的更多用例可以参考官网。
echarts-ng2官网:https://twp0217.github.io/echarts-ng2/#/documentation
安装
npm install echarts --save
npm install echarts-ng2 --save
引用
在app.module.ts 中引用
import { EchartsNg2Module } from 'echarts-ng2';
imports: [
BrowserModule,
FormsModule,
HttpModule,
WeUIModule,
EchartsNg2Module ,
RouterModule.forRoot(ROUTES)
],
使用
在count-year.component.ts中添加一些数据项
import { EChartOption } from 'echarts-ng2';
export class CountYearComponent implements OnInit {
// 饼图的配置
chartOption: EChartOption;
// 参考官网的配置项
lineOption: EChartOption ;
constructor() {
}
ngOnInit() {
// 创建一些模拟数据
this.chartOption = this.createChart([{name: '宠物', value: 37}, {name: '工具', value: 222}, {name: '孩子', value: 4466}])
const x = ['1月', '3月', '4月', '5月', '6月'];
const y = [1000, 1300, 2045, 2780, 2400, 4310];
this.lineOption = this.createLine(x, y, '1000');
}
// 画饼图
private createChart(data: any[]): EChartOption {
return {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '消费',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: data
}
]
};
}
// 画折线图
private createLine(x, y, title: string): EChartOption {
return {
title: {
text: title,
subtext: '单位(元)',
x: 'right'
},
tooltip: {
trigger: 'axis'
},
grid: {x: 12, y: 10, x2: 12, y2: 30, borderWidth: 0},
xAxis: [
{
splitLine: {show: false},
type: 'category',
boundaryGap: false,
data: x
}
],
yAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name: '消费',
type: 'line',
center: ['10%', '10%'],
smooth: true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: y
},
]
};
}
}
页面里添加图表元素
<div class="weui-panel__hd">
<echarts-ng2 [option]="lineOption" [style]="{'width': '100%', 'height': '300px', 'display': 'inline-block'}"></echarts-ng2>
</div>
<div class="weui-panel__hd">
<echarts-ng2 [option]="chartOption" [style]="{'width': '100%', 'height': '300px', 'display': 'inline-block'}"></echarts-ng2>
</div>
这里写图片描述
网友评论