Angular4記賬webApp練手項(xiàng)目之一（利用angular-cli構(gòu)建Angular4.X項(xiàng)目）
Angular4記賬webApp練手項(xiàng)目之二（在angular4項(xiàng)目中使用Angular WeUI）
Angular4記賬webApp練手項(xiàng)目之三（在angular4項(xiàng)目中使用路由router）
Angular4記賬webApp練手項(xiàng)目之四（在Angular4項(xiàng)目中用echarts繪制圖表）
Angular4記賬webApp練手項(xiàng)目之五（Angular4項(xiàng)目中創(chuàng)建service（服務(wù)）和使用http模塊）
前臺(tái)源碼

前言

例子基于之前文章開(kāi)發(fā)玩郊。
用angular的思想之一，數(shù)據(jù)驅(qū)動(dòng)枉阵，頁(yè)面上的一切變化我們都用數(shù)據(jù)變化來(lái)控制译红，頁(yè)面只需要綁定數(shù)據(jù)，然后我們操作數(shù)據(jù)兴溜。
echarts的更多用例可以參考官網(wǎng)侦厚。
echarts-ng2官網(wǎng)：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中添加一些數(shù)據(jù)項(xiàng)

import { EChartOption } from 'echarts-ng2';

export class CountYearComponent implements OnInit {

  // 餅圖的配置
  chartOption: EChartOption;
  // 參考官網(wǎng)的配置項(xiàng)
  lineOption: EChartOption ;

  constructor() {

  }

  ngOnInit() {
    // 創(chuàng)建一些模擬數(shù)據(jù)
    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');

  }
// 畫(huà)餅圖
  private createChart(data: any[]): EChartOption {
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/> : {c} (xu7nrxw%)'
      },
      series: [
        {
          name: '消費(fèi)',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: data
        }
      ]
    };
  }
// 畫(huà)折線圖
  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: '消費(fèi)',
          type: 'line',
          center: ['10%', '10%'],
          smooth: true,
          itemStyle: {normal: {areaStyle: {type: 'default'}}},
          data: y
        },
      ]
    };
  }
}

頁(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>

這里寫(xiě)圖片描述