Angular4記帳webApp練手項目之四（在Angular4項目中用echarts繪製圖表）

安裝

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>