在Vue项目中使用ECharts实现日期相关的折线图
通过 npm 安装 ECharts
npm install echarts --save
按需引入
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入折线图
require("echarts/lib/chart/line");
// 引入提示框、标题组件、图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
创建图表
因为当前项目里用到的三个图表比较相似，就简单的封装成了vue组件，通过传参来渲染图表。
<template>
<div :id="chartId" style="width: 100%; height: 100%;"></div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入折线图
require("echarts/lib/chart/line");
// 引入提示框、标题组件、图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
name: "chart",
props: {
chartId: String,
xData: Array,
// itemData: Array,
series: Array,
legend: Object
},
data() {
return {};
},
watch: {
// xData: function(val){
// this.renderChart();
// },
series: function(val) {
this.renderChart();
}
},
mounted() {
this.renderChart();
},
methods: {
// 渲染折线图
renderChart() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(this.chartId));
// 绘制图表
myChart.setOption({
// title: {
// text: "调用总量（近30天）",
// textStyle: {
// color: "#323232",
// fontSize: 20,
// fontWeight: "normal"
// }
// },
legend: this.legend,
//设置canvas内部表格的内距
grid: {
x: 40,
y: 20,
x2: 40,
y2: 60,
borderWidth: 10
},
tooltip: {
trigger: "axis"
// formatter: '{b0}<br />{a0}:{c0}'
},
xAxis: {
type: "category",
data: this.xData,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 5
}
},
yAxis: {
type: "value",
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: this.series
});
}
}
};
</script>
<style>
</style>
将封装好的chart组件引入到需要使用的页面，并传递参数。
下面的html代码省略了页面中的其他元素，使用时记得包裹一层容器并设置好宽度和高度
<chart chartId="mychart" :xData="dateArray" :itemData="numArray" :series="series"></chart>
// 引入日期相关工具
import dateUtil from "@/libs/dateUtil.js";
// 引入折线图组件
import chart from "@/components/chart.vue";
export default {
name: "",
components:{
chart
},
data() {
return {
// 模拟数据（后面调用后台提供的接口替换掉即可）
numArray: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
2,
3,
4,
5,
6,
7,
8,
9,
3,
4,
5,
6,
7,
8,
9,
1,
2,
3,
4,
5,
6
],
// 此处用到了一个日期相关的处理函数，代码会在下方贴出
dateArray:dateUtil.getDateArray(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 29),
new Date(),
3600 * 1000 * 24 * 1,
"yyyy-MM-dd"
),
};
},
computed:{
series:function(){
let arr = [
{
name: "总调用",
data: this.numArray,
type: "line",
color: "#036bc8",
symbolSize: 6
}
];
return arr;
}
},
// 其他代码....
}
日期处理相关的函数dateUtil.js
let dateUtil = {};
/*
** 格式化日期
** 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
** 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
** date: Date类型的日期
** fmt: 格式化模板，如yy-MM-dd
** 返回：格式化后的日期字符串
** 例子：
** (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
** (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
dateUtil.format = function(date, fmt){
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
S: date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
}
// 根据开始日期、结束日期以及间隔得到一个格式化后的日期连续的日期字符串数组
dateUtil.getDateArray = function(start, end, distance, fmt){
let arr = [];
let d1 = new Date(start);
let d2 = new Date(end);
// console.log(d1, d2);
while (d1 <= d2) {
arr.push(dateUtil.format(d1,fmt));
d1.setTime(d1.getTime() + distance);
}
// console.log(arr);
return arr;
}
export default dateUtil;
使用上述代码即可渲染出一个效果如下的折线图（标题为另外的html元素，echart的title被我注释掉了，因为后续还要根据有无数据来判断是渲染图表还是无数据的提示）
其他图表示例
基于上述的chart组件，我还写了另外两个图表，其中一个和第一个图表基本相同。
另外一个使用了多个数据项，也正是因为这个图表，我才将series和legend放到prop中进行传参渲染。
下面介绍一下这个图表的不同之处，供大家借鉴使用。
<chart
chartId="numChart"
:xData="dateArray"
:itemData="numArray"
:series="numSeries"
:legend="numLegend"
></chart>
以下代码只贴出了折线图相关的代码，日期部分改成了日期选择器提供的日期，日期选择器相关组件没有在下方贴出。
// 引入日期相关工具
import dateUtil from "@/libs/dateUtil.js";
// 引入折线图组件
import chart from "@/components/chart.vue";
export default {
name: "",
components: {
chart
},
data() {
return {
// 时间选择组件相关参数
datePicker: [
new Date(new Date().getTime() - 3600 * 1000 * 24 * 29),
new Date()
],
// 下方图例
numLegend: {
bottom: 0,
itemGap: 25,
itemWidth: 20,
itemHeight: 20,
data: [
{
name: "总次数",
// 强制设置图形为圆。
icon: "circle",
},
{
name: "成功次数",
// 强制设置图形为圆。
icon: "circle",
},
{
name: "失败次数",
// 强制设置图形为圆。
icon: "circle",
}
]
},
numArray: {
all: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
2,
3,
4,
5,
6,
7,
8,
9,
3,
4,
5,
6,
7,
8,
9,
1,
2,
3,
4,
5,
6
],
success: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
2,
3,
4,
5,
6,
7,
8,
9,
3,
4,
5,
6,
7,
8,
9,
1,
2,
3,
4,
5,
6
],
fail: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
};
},
computed: {
dateArray: function() {
return dateUtil.getDateArray(
this.datePicker[0],
this.datePicker[1],
3600 * 1000 * 24 * 1,
"yyyy-MM-dd"
);
},
numSeries: function() {
let arr = [
{
// xAxisIndex: 0,
name: "总次数",
data: this.numArray.all,
type: "line",
color: "#036bc8",
symbolSize: 6
},
{
// xAxisIndex: 1,
name: "成功次数",
data: this.numArray.success,
type: "line",
color: "#4cb050",
symbolSize: 6
},
{
// xAxisIndex: 2,
name: "失败次数",
data: this.numArray.fail,
type: "line",
color: "#4bc0c0",
symbolSize: 6
}
];
return arr;
},
},
// 其他代码...
}
使用上述代码即可渲染出一个效果如下的折线图
总结
本文的主要作用如下
- 提供折线图的示例
- 提供日期相关的处理函数
更多的图表配置请查阅echarts的文档
https://www.echartsjs.com/zh/option.html#title
公众号：成的学习之路。跪求一波关注= =
扫一扫
4684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
