版权声明:本文为博主原创文章,未经博主允许转载将负法律责任。 https://blog.csdn.net/ningmengbaby/article/details/83718999
【前言】
最近接到了一个任务就是把前端的表格改成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轴交叉的数据(需要显示的数据第二列)
【总结】
以前做项目的时候框架都是给你搭好了,代码也有之前的,就只关心数据显示的问题忘记了全局观。所以所有的事情亲力亲为这样理解的才会更加深刻。