Angular4+ echarts

【前言】

最近接到了一个任务就是把前端的表格改成echarts折线图的样式。

【过程】

1.添加插件 echart

cnpm install echarts --save 在package.json里面就会看到echarts的版本，cnpm install echarts --save 是默认下载到dependencies下面而 cnpm install echarts --save-dev 是默认下载在devDependencies下面

一个node package有两种依赖，一种是dependencies一种是devDependencies，其中前者依赖的项该是正常运行该包时所需要的依赖项，而后者则是开发的时候需要的依赖项，像一些进行单元测试之类的包。

2.在要引用echarts的组件的html中引用

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as echarts from 'echarts'; 

export class TypingExerciseComponent implements OnInit {
   @ViewChild('echart') echart: ElementRef;

设置表格的样式就跟平常一样设置其他控件的样式一样，写在css里面就可以了。

3.表格初始化所需要的变量

 chartOption = {
    title: {
      text: '成长曲线'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['正确率', '速度(字每分钟)']    ---最上方的图标
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}       ---保存作为图片
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: this.addTime,    -- x轴的数据（后端查出来的）
      axisLabel: {
        interval: 0,
        rotate: 40
     }

    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '正确率',
        type: 'line',
        stack: '总量',
        data: this.rightRate,  --（后端查出来的）
      },
      {
        name: '速度(字每分钟)',
        type: 'line',
        stack: '总量',
        data: this.speed,  --(后端查出来的)
      }
    ]
  };

这些都是比较基础的，推荐大家看看echarts官网，其中的属性各自是什么意思可以在官网的例子上去尝试

http://echarts.baidu.com/examples/

4.进行到这一步我就以为完成了，当时在公司的时候也是用的echarts，只记得当时把重点放在了数据的显示上。你有了数据得把数据放到echarts中才可以啊，最重要的一句

 const broken = echarts.init(this.echart.nativeElement);  --echarts初始化
 pie.setOption(this.chartOption);      --将拿到的数据放到echarts里面

到此折线图就出来了。

5. 将后台查询出来的数据加载到折线图里面的方式还可以

this.chartOption.xAxis.data = this.addTime;   --x轴的数据
this.chartOption.series[0].data = this.rightRate; --x轴与y轴交叉的数据（需要显示的数据第一列）
this.chartOption.series[1].data = this.speed;     --x轴与y轴交叉的数据(需要显示的数据第二列)

【总结】

以前做项目的时候框架都是给你搭好了，代码也有之前的，就只关心数据显示的问题忘记了全局观。所以所有的事情亲力亲为这样理解的才会更加深刻。

猜你喜欢