Angular4记账webApp练手项目之四（在Angular4项目中用echarts绘制图表）

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>