Echarts改造之数据分离

2017-01-08 20:47:48 3 min

Echarts官网中的数据都是写死的，如何让Echarts根据后台传过来的数据进行变化呢？下面介绍一下Angular2中嵌入Echarts，并实现数据分离。

先创建一个line.component.ts文件，component装饰器中这样写：

@Component({
  moduleId: module.id,
  selector: 'line',
  templateUrl: 'line.html',
  styleUrls: ['line.component.css'],
})

class中实现AfterViewInit接口，用于初始化组件视图后调用：

export class LineComponent implements AfterViewInit {
  ngAfterViewInit(){
    
  }
}

在class中首先定义一些变量：

 lineData:Line;
  id:string;
  option:any = {
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    toolbox: {
      show: true,
      feature: {
        magicType: {show: true, type: ['bar']},
        dataZoom: {show: true},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    legend: {
      selectedMode: true,
      selected: {},
      right: '0px',
      top: '80px',
      orient: 'vertical',
      textStyle: {
        fontSize: 12,
      },
      show: true,
      data: []
    },
    xAxis: {
      data: [],
      axisLabel: {
        interval: 0,
      }
    },
    grid: {
      left: '9%',
      x2: 150,
    },
    yAxis: [
      {
        type: 'value',
        name: '',
      }
    ],
    series: []
  };

在需要调用line.component.ts的父组件html中添加下面代码，把父组件中的myOption中的数据传递给data属性：

<line [data]='myOption'></line>

在父组件的ts文件中，从后端读取数据，并把数据写入myOption（这里其实对原始数据进行了一次处理，让传给line.component.ts的数据更加容易处理）：

myOption:any;  
constructor(){
	this.myOption = {
     	 "data": []
    	};
}
setMyOption(){
  let that = this;
  let obj = {
              "name": fieldkey,
              "value": [],
              "systime": []
            };
  that.myOption.data = [];
  //先往obj中写入数据，再往data数组中写入对象
}
getUrlData(){
  //从后端读取数据
}

再回到line.component.ts中，引入myOption中的数据：

 @Input() data:any;

实现AfterViewInit接口：

ngAfterViewInit() {
    let that = this;
    that.lineData = that.data;  //data赋值给linedata
  
    //清空原始数组
    that.option.legend.data = [];
    that.option.series.data = [];
    that.option.xAxis.data = [];
    that.option.series = [];
  
    //配置option
    that.setDataToOption();
  
    //调用echarts画图
    that.createCharts();
  }

往echarts中写入从后端读取的数据：

  setDataToOption() {
    let that = this;
    let dataLength = 		      this.lineData.data.length;
    let xAxisData = that.option.xAxis.data;
    let legend = that.option.legend;
 
    for (let n = 0; n < dataLength; n++) {
      let item = that.lineData.data[n];
      legend.selected[item.name] = false; //往legend的selected中推送数据
      let seriesData = {
        name: item.name,
        type: 'line',
        showAllSymbol: true,
        data: []
      };
      let legendData = {
        name: item.name,
        icon: 'square'
      };
      let arr = Object.keys(item.value);
      for (let t = 0; t < arr.length; t++) {
        seriesData.data.push(item.value[t]);
        if (n === 0) {
          xAxisData.push(item.systime[t]); //往x轴推送数据
        }
      }
      legend.data.push(legendData);   //往legend的data中推送数据
      that.option.series.push(seriesData);    //往series中推送数据
    }
 
    //设置x轴间隔
    if (xAxisData.length > 10) {
      that.option.xAxis.axisLabel.interval = Math.ceil(xAxisData.length/10);
    }
  }

创建echarts：

 createCharts() {
    let that = this;
    let dom:any = document.getElementById(that.id);
    let myChart:any = echarts.init(dom, 'macarons');
    myChart.setOption(that.option);
  }

这样就实现了从后端读取数据，然后echarts显示在界面上。

欢迎关注我的其它发布渠道

WeChat

Echarts Angular