前言
上一篇我们添加了日志记录,并实现了简单的日志统计功能。在实际使用中,往往需要对比一段时间能的用户增长情况及用户活跃度,这些数据以图表的形式进行展现会更直观。
知识准备
ECharts
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari 等)、底层依赖矢量图形库 ZRender,提供直观、交互丰富、可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K 线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、TreeMap、旭日图,多维数据可视化的平行坐标,还有漏斗图、仪表盘,并且支持图与图之间的混搭。
官网演示地址:
Vue-echarts
Vue-echarts 是将 ECharts 进行了简单的组件化封装,使其能在 Vue 项目中方便使用,演示地址:
在项目中使用 npm install
命令安装 ECharts 和 Vue-echarts:
npm install echarts vue-echarts
本项目中安装的版本如下:
Vue-echarts 组件访问地址如下:
功能分析
在后台管理系统中,可能常用到的图表有:
- 曲线图(折线图):直观地展现一段时间内数据的波动情况,如近 30 天用户增长曲线图
- 柱状图(直方图):直观地展现一组数据的分布状态,常用于项目/产品的质量管理,如项目质量分布直方图
- 饼图:直观地展现一组数据的不同构成部分,适合按比例计算数据的组成,如收入组成饼图
- 仪表盘:展示一个百分比,用于项目进度、工作完成度等,如项目进度、磁盘空间使用率
根据上一篇实现的接口和查询功能,就可以获取到原始的数据,按照不同图表的数据组成要求,将其按照不同的格式组合,并生成相应的图表。
代码实现
定制主题
ECharts 是支持各种不同的自定义主题的,可以根据自己项目界面的风格进行灵活配置,主题定制网址如下:
选择合适的风格后,点击左上角的“下载主题”即可,下载界面会提示使用的方式:
在项目中使用的 Vue-echarts 及定制的 ECharts 主题的方式如下:
// 引入 Vue-echarts
import ECharts from 'vue-echarts/components/ECharts'
// 引入动画效果
import 'echarts/map/js/world'
// 引入下载好的主题
import theme from './theme.json'
// 注册主题
ECharts.registerTheme('westeros', theme)
export default {
// 注册组件
components: {
ECharts
},
data() {
... ...
}
}
然后在页面中使用注册的 ECharts 组件:
<div>
<div class="alignCenter font24 ColorInfo font-bold"><span>近 30 天活跃用户数曲线图</span></div>
<figure>
<ECharts :options="line" :init-options="initOptions" ref="line" theme="westeros" autoresize @zr:click="handleZrClick"
@click="handleClick" />
</figure>
</div>
曲线图
<ECharts :options="line" :init-options="initOptions" ref="line" theme="westeros" autoresize @zr:click="handleZrClick"
@click="handleClick" />
其中 line 的结构为:
{
// 标题
title:{
text:""
},
// 图例组件
legend: {},
// 提示框组件
tooltip: {},
// 工具栏
toolbox:{
feature: {
//配置项还原
//restore: {},
//保存为图片
saveAsImage: {},
//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新
//dataView:{}
}
},
dataset: {
dimensions: [],
// Provide data.
source: []
},
xAxis: {
type: 'category'
},
yAxis: {},
series: [{}]
}
这是一个通用的配置项,用来定义不同图表所需的参数,这些参数可以支持基本的柱状图、折线图、饼图、散点图、漏斗图的需要,参数配置说明如下。
title:标题组件,包含主标题和副标题。
- text:标题文本。
- link:标题链接。
- target:标题链接打开方式 可以指定 self 或 blank。
- textStyle:标题的自定义样式,支持 color fontStyle fontWeight fontSize lineHeight 等几乎所有文字的样式。
legend:图例组件,展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
- type。
- 图例的类型。可选值:
- 'plain':普通图例。缺省就是普通图例。
- 'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
- left:左侧位置。
- top:顶部位置。
- orient:图例列表的布局朝向。
- 'horizontal':横向布局。
- 'vertical':纵向布局。
xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
- position X 轴的位置可选值 top/bottom。
- type 坐标轴类型。
- 'value' 数值轴,适用于连续数据。
- 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
- 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
- 'log' 对数轴。适用于对数数据。
- name 坐标轴名称。
- nameLocation 坐标轴名称显示位置可选值:start/middle/center/end。
- nameTextStyle 坐标轴名称样式。
yAxis:y 轴,属性同 xAxis,唯一不同的是 position 的值为 left 或 right。
tooltip:提示框组件。
- trigger 触发类型。
- 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
- 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用,在 ECharts 2.x 中只支持类目轴上使用 axis trigger,在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
- 'none'什么都不触发。
- type 指示器类型。
- 'line' 直线指示器。
- 'shadow' 阴影指示器。
- 'none' 无指示器。
- 'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。
toolbox:工具栏,内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
- orient:horizontal/vertical。
- itemSize:工具栏 icon 的大小。
dataset:数据集,也就是用于展示的数据。
series:系列列表。每个系列通过 type 决定自己的图表类型,一组数据有多列,要定义多个 type,每个 type 可以是不一样的。
更详细的属性说明参照官方 API:
https://www.echartsjs.com/zh/option.html#title 基于此,导入数据就可以了,调用 api.js 中的接口获取数据,然后将获取到的数据放入 dataset 属性中即可:
getLoginMonth() {
this.line.dataset.dimensions = ["日期","新增用户数"];
req_getLoginLogByDay(this.preMonth, this.today).then(response => {
if (response.success === 0) {
let data = response.data;
for (let i in data) {
this.line.dataset.source.push([data[i].time, data[i].count]);
}
}
});
}
效果如下:
散点图
刚才我们提到,柱状图、折线图、饼图、散点图、漏斗图等所需的参数是一样的,那么可以将这些常用的参数封装起来,每次只需修改不同图表的类型即可。 比如,新建 echartsData.js 用于提供不同图表的模板,代码如下:
const echartsDemo = {
//获取一个基础的散点图
getScatter() {
let scatter = JSON.parse(JSON.stringify(this.baseData));
scatter.series = [{
type: "scatter"
}];
return scatter;
},
baseData:{
title:{
...
}
...
}
}
这里要注意,一定要使用深拷贝的方式获取不同的图表模板,否则多个图表使用的数据是一份,会相互干扰。代码中使用了 JSON 的方式来实现深拷贝。
在页面中使用散点图:
<div class="alignCenter font24 ColorInfo font-bold"><span>近 30 天活跃用户数散点图</span></div>
<figure>
<ECharts :options="scatter" :init-options="initOptions" ref="scatter" theme="westeros" autoresize @zr:click="handleZrClick"
@click="handleClick" />
</figure>
使用 echartsData.js 生成散点图数据模板:
// 散点图
scatter:echartsDemo.getScatter()
为散点图设置数据:
getLoginMonth() {
this.scatter.dataset.dimensions = ["日期","新增用户数"];
req_getLoginLogByDay(this.preMonth, this.today).then(response => {
if (response.success === 0) {
let data = response.data;
for (let i in data) {
this.scatter.dataset.source.push([data[i].time, data[i].count]);
}
}
});
},
效果如下:
其他图表使用方式和散点图相同,在源码中有完整实现,就不再赘述了。效果如下。
柱状图:
饼图:
雷达图:
漏斗图:
仪表盘:
源码地址
本篇完整的源码地址:
小结
本篇带领大家实现将数据图形化展示的功能,借助 ECharts 生成我们想要的图表,并且定制自己喜欢的主题样式。同时将常用的图表属性分别讲解,封装成一个模板,可以更加简便地使用。