生成图表_将自己的工作日报生成图表-CSDN博客

本文链接：https://blog.csdn.net/qq_41089021/article/details/108728354

前言

上一篇我们添加了日志记录，并实现了简单的日志统计功能。在实际使用中，往往需要对比一段时间能的用户增长情况及用户活跃度，这些数据以图表的形式进行展现会更直观。

知识准备

ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11、Chrome、Firefox、Safari 等）、底层依赖矢量图形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K 线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、TreeMap、旭日图，多维数据可视化的平行坐标，还有漏斗图、仪表盘，并且支持图与图之间的混搭。

官网演示地址：

https://echarts.apache.org/examples/zh/index.html

echarts

Vue-echarts

Vue-echarts 是将 ECharts 进行了简单的组件化封装，使其能在 Vue 项目中方便使用，演示地址：

https://ecomfe.github.io/vue-echarts/demo/

chartsDemo

在项目中使用 npm install 命令安装 ECharts 和 Vue-echarts：

npm install echarts vue-echarts

本项目中安装的版本如下：

install

Vue-echarts 组件访问地址如下：

https://www.npmjs.com/package/vue-echarts

charts

功能分析

在后台管理系统中，可能常用到的图表有：

曲线图（折线图）：直观地展现一段时间内数据的波动情况，如近 30 天用户增长曲线图
柱状图（直方图）：直观地展现一组数据的分布状态，常用于项目/产品的质量管理，如项目质量分布直方图
饼图：直观地展现一组数据的不同构成部分，适合按比例计算数据的组成，如收入组成饼图
仪表盘：展示一个百分比，用于项目进度、工作完成度等，如项目进度、磁盘空间使用率

根据上一篇实现的接口和查询功能，就可以获取到原始的数据，按照不同图表的数据组成要求，将其按照不同的格式组合，并生成相应的图表。

代码实现

定制主题

ECharts 是支持各种不同的自定义主题的，可以根据自己项目界面的风格进行灵活配置，主题定制网址如下：

https://www.echartsjs.com/theme-builder/

选择合适的风格后，点击左上角的“下载主题”即可，下载界面会提示使用的方式：

主题下载

在项目中使用的 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]);
}
    }
});
    },

效果如下：

散点图