Angular4+ echarts

怼烎@ 2022-04-22 11:26 221阅读 0赞

【前言】

最近接到了一个任务就是把前端的表格改成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/][http_echarts.baidu.com_examples]

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

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

到此折线图就出来了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmdtZW5nYmFieQ_size_16_color_FFFFFF_t_70][]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轴交叉的数据(需要显示的数据第二列)

【总结】

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

[http_echarts.baidu.com_examples]: http://echarts.baidu.com/examples/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pbmdtZW5nYmFieQ_size_16_color_FFFFFF_t_70]: /images/20220422/64e54960db9142f681b26607295b86c7.png