angular2 图表指令ng2-echarts

 一、安装

npm install echarts --save

npm install ng2-echarts --save

 二、配置

1、angular-cli.json

"scripts": ["../node_modules/echarts/dist/echarts.min.js"]

2、相应模块module.ts

import { Ng2Echarts } from 'ng2-echarts';                     // 图表 - echart
 
@NgModule({ 
  declarations: [
    Ng2Echarts, 
  ]
})

三、使用

1、html

<div class="echart-pie" [ng2-echarts]="incomesAmount"  ></div>

2、component.ts

具体使用方法（或者默认参数设置）可参照echarts官网：http://echarts.baidu.com/examples.html

 

以空心饼图为例：

①、先设置默认参数defaultPieOptions如下：

public defaultPieOptions = {
  series: [{
    type: 'pie',
    name: '交易总额',
    radius: ['67%', '100%'],
    minAngle: 5,
    avoidLabelOverlap: false,
    hoverAnimation: false,
    label: {
      normal: {
        show: false,
        position: 'center',
        textStyle: {
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      emphasis: {
        show: false
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        borderWidth: 1,
        borderColor: '#fff'
      }
    }
  }],
  color: ['#53b8c4', '#bfe0e4'],   // 有多少项就设置多少个颜色
  tooltip: {
    formatter: '{b}：{c}元<br/>占比：{d}%',
    backgroundColor: 'rgba(0,0,0,0.8)',
    borderColor: '#000',
    borderRadius: 0,
    padding: 5
  },
  legend: {
    show: false
  }
};

②、通过tradeAmountData（）方法设置series属性来控制饼图的弧度，使用方法如下：

  // 交易总额
  tradeAmountData(obj) {
    this.tradeAmount = CommonFuncService.clone(defaultPieOptions);    // 需要深拷贝，不然无法设置 
    this.tradeAmount.series[0].data = [
      { value: obj.payment, name: '支出' },
      { value: obj.inconmes, name: '收入' },
    ]
  }

③、最后在页面从后台拿到数据tradeAmountsData后，就执行tradeAmountData（）方法：

    if (this.tradeAmountsData) { 
      this.tradeAmountData(this.tradeAmountsData);
    }

 

其他折线图，柱状图原理一样，只不过需要多设置一个xAxis（X轴数据），或者柱状图Y轴上需要设置一个或多个series数据。

      this.lineIncomeNumber.xAxis[0].data = dataBarArr.axisLine; 
      this.lineIncomeNumber.series[0].data = dataBarArr.yxisLine.inconmes;
      this.lineIncomeNumber.series[1].data = dataBarArr.yxisLine.payment; 

 

附上深拷贝service.ts文件源码：

import { Injectable } from '@angular/core';

let UUID = {};

@Injectable()
export class CommonFuncService {

  constructor() { }

  public static clone(object: any){
    if(object==null){
      return object;
    }else if(object instanceof Array){
      return CommonFuncService.cloneArray(object);
    }else if(typeof object == 'object'){
      return CommonFuncService.cloneObject(object);
    }else{
      return object;
    }
  }

  private static cloneObject(object){
    let result = new Object();
    for(let name in object){
      result [name] = CommonFuncService.clone(object[name]);
    }
    return result;
  }

  private static cloneArray(object){
    let result = [];
    for(let ob of object){
      result.push(CommonFuncService.clone(ob));
    }
    return result;
  }

  public static makeUUID(){
    let id = '' + parseInt('' + Math.random() * 100000, 10);
    while(UUID[id]){
      id = '' + parseInt('' + Math.random() * 100000, 10);
    }
    UUID[id] = 1;
    return id;
  }
  
}

 

 

（本文原创，转载请注明出处！！）