Hexo博客(29)ECharts图表展示网站访问量
访问量上报已经运行一个多月了，积累了一些数据，用 ECharts 图表展示出来。
参见 统计
引入ECharts.js
在 GitHub 页面下载最新 Release 版本
https://github.com/apache/incubator-echarts/releases
在解压后的 dist 目录中找到压缩版 echarts.min.js
head.ejs 中引入
<script src="<%- config.root %>js/echarts.min.js"></script>
ECharts展示网站日访问量折线图
后台返回json数据格式，基本上就是 ECharts 要求的数据格式
{
"pv": {
"date_list": [ "01-30", "01-31", "02-01", "02-02", "02-03", "02-04", "02-05", "02-06", "02-07", "02-08", "02-09", "02-10", "02-11", "02-12", "02-13", "02-14", "02-15", "02-16", "02-17", "02-18", "02-19", "02-20", "02-21", "02-22", "02-23", "02-24", "02-25", "02-26", "02-27", "02-28", "02-29" ],
"host_map": {
"devgou.com": [ 136, 169, 79, 123, 105, 124, 178, 151, 82, 121, 152, 212, 280, 268, 231, 202, 198, 185, 257, 187, 222, 190, 192, 223, 160, 167, 161, 260, 228, 191, 172 ],
"总量": [ 307, 383, 255, 329, 262, 386, 582, 332, 184, 384, 362, 416, 541, 620, 638, 459, 582, 552, 629, 480, 586, 450, 496, 539, 424, 432, 444, 462, 513, 631, 399 ],
"masikkk.com": [ 70, 120, 73, 148, 94, 113, 121, 99, 52, 131, 110, 100, 168, 212, 265, 138, 244, 150, 225, 168, 187, 132, 145, 175, 157, 166, 159, 117, 154, 188, 110 ],
"localhost:4000": [ 0, 0, 6, 0, 0, 82, 165, 0, 0, 26, 4, 0, 0, 28, 12, 0, 15, 6, 0, 0, 74, 4, 0, 26, 0, 0, 0, 0, 11, 89, 26 ],
"madaimeng.com": [ 101, 94, 97, 58, 63, 67, 118, 82, 50, 106, 96, 104, 93, 112, 130, 119, 125, 211, 147, 125, 103, 124, 159, 115, 107, 99, 124, 85, 120, 163, 91 ]
}
},
"ip": {
"date_list": [ "01-30", "01-31", "02-01", "02-02", "02-03", "02-04", "02-05", "02-06", "02-07", "02-08", "02-09", "02-10", "02-11", "02-12", "02-13", "02-14", "02-15", "02-16", "02-17", "02-18", "02-19", "02-20", "02-21", "02-22", "02-23", "02-24", "02-25", "02-26", "02-27", "02-28", "02-29" ],
"host_map": {
"devgou.com": [ 49, 63, 34, 46, 78, 63, 70, 84, 51, 76, 81, 100, 83, 102, 78, 86, 75, 57, 98, 83, 91, 93, 81, 67, 71, 79, 83, 85, 93, 79, 70 ],
"总量": [ 129, 182, 136, 153, 181, 152, 155, 180, 121, 182, 175, 194, 155, 201, 182, 181, 265, 200, 227, 175, 176, 201, 177, 181, 198, 196, 184, 165, 187, 194, 137 ],
"masikkk.com": [ 14, 62, 38, 71, 56, 51, 41, 48, 34, 63, 48, 37, 41, 58, 54, 48, 137, 50, 78, 64, 52, 49, 42, 76, 70, 66, 57, 51, 56, 68, 31 ],
"localhost:4000": [ 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1 ],
"madaimeng.com": [ 66, 57, 63, 36, 47, 37, 43, 48, 36, 42, 45, 57, 31, 40, 49, 47, 52, 92, 51, 28, 32, 58, 54, 37, 57, 51, 44, 29, 37, 46, 35 ]
}
}
}
js 代码如下，ECharts 官方的示例和文档非常详细，照着来即可。
<script type="text/javascript">
// 全局变量：后台接口server地址
var BACKEND_SERVER = "http://api.masikkk.com/";
$(document).ready(function(){
console.log("document.ready 事件 in 统计图表页面 ");
// 查询统计图表数据并展示
getEchartsDataAndDraw();
console.log("查询统计图表数据并展示完成");
})
// 查询统计图表数据并展示
function getEchartsDataAndDraw() {
$.ajax({
type: "GET",
dataType: "json", //服务器返回的数据类型
contentType: "application/x-www-form-urlencoded", //请求的信息格式
url: BACKEND_SERVER + "statistic/echarts-pv-line", // api
data: {
},
success: function (response) {
console.log("查询统计图表数据 response:" + JSON.stringify(response));
// 根据data绘制ECharts图表
drawECharts(response);
},
error : function(jqXHR, textStatus, errorThrown) {
// console.log("进入error");
// console.log(textStatus);
// console.log(errorThrown);
// console.log(jqXHR);
}
});
}
// 根据data绘制ECharts图表
function drawECharts(data) {
// 基于准备好的dom容器，初始化echarts实例
var myChartPV = echarts.init(document.getElementById("echarts_pv"));
var myChartIP = echarts.init(document.getElementById("echarts_ip"));
// 图表json数据示例
// var data = {
// "pv": {
// "date_list": ["2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28"],
// "host_map": {
// "masikkk.com": [82, 93, 90, 93, 129, 133, 132],
// "devgou.com": [40, 52, 31, 44, 90, 30, 50],
// "madaimeng.com": [38, 39, 39, 29, 30, 50, 70],
// "localhost:4000": [21, 12, 21, 34, 20, 30, 20]
// }
// },
// "ip": {
// "date_list": ["2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28", "2020-02-28"],
// "host_map": {
// "masikkk.com": [82, 93, 90, 93, 129, 133, 132],
// "devgou.com": [40, 52, 31, 44, 90, 30, 50],
// "madaimeng.com": [38, 39, 39, 29, 30, 50, 70],
// "localhost:4000": [21, 12, 21, 34, 20, 30, 20]
// }
// }
// }
// 根据图表数据json拼装图表字段
var pvLegend = [];
var pvSeries = [];
$.each(data.pv.host_map, function(key, value) {
var item = {};
item.type = "line"; // 折线
item.smooth = true; // 是否平滑曲线显示
// item.stack = '总量';
// item.areaStyle = {};
item.name = key;
item.data = value;
pvSeries.push(item);
pvLegend.push(key);
});
var ipLegend = [];
var ipSeries = [];
$.each(data.ip.host_map, function(key, value) {
var item = {};
item.type = "line"; // 折线
item.smooth = true; // 是否平滑曲线显示
// item.stack = '总量';
// item.areaStyle = {};
item.name = key;
item.data = value;
ipSeries.push(item);
ipLegend.push(key);
});
// 指定图表的配置项和数据
var optionPV = {
title: {
text: "页面访问量"
},
// 提示框组件
tooltip: {
// 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// 工具盒
toolbox: {
feature: {
// 保存为图片按钮
saveAsImage: {}
}
},
// 数据缩放
dataZoom: [
// inside 类型缩放，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
{
type: 'inside',
start: 50, // 初始未缩放时的数据窗口起始位置，50%
end: 100 // 初始未缩放时的数据窗口结束位置，100%
},
// slider 类型缩放，有单独的滑动条，用户在滑动条上进行缩放或漫游。
{
type: 'slider',
start: 50, // 初始未缩放时的数据窗口起始位置，50%
end: 100 // 初始未缩放时的数据窗口结束位置，100%
}
],
// 图例
legend: {
// 图例，动态数据
data: pvLegend
},
xAxis: {
type: "category",
// 横轴，动态数据
data: data.pv.date_list
},
yAxis: {
type: "value"
},
// 动态数据
series: pvSeries
};
var optionIP = {
title: {
text: "IP数"
},
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// 工具盒
toolbox: {
feature: {
// 保存为图片按钮
saveAsImage: {}
}
},
// 数据缩放
dataZoom: [
// inside 类型缩放，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
{
type: 'inside',
start: 50, // 初始未缩放时的数据窗口起始位置，50%
end: 100 // 初始未缩放时的数据窗口结束位置，100%
},
// slider 类型缩放，有单独的滑动条，用户在滑动条上进行缩放或漫游。
{
type: 'slider',
start: 50, // 初始未缩放时的数据窗口起始位置，50%
end: 100 // 初始未缩放时的数据窗口结束位置，100%
}
],
// 图例
legend: {
// 图例，动态数据
data: ipLegend
},
xAxis: {
type: "category",
// 横轴，动态数据
data: data.ip.date_list
},
yAxis: {
type: "value"
},
// 动态数据
series: ipSeries
};
// 使用刚指定的配置项和数据显示图表。
myChartPV.setOption(optionPV);
myChartIP.setOption(optionIP);
} // drawECharts
</script>
结果如下
ECharts折线图
上一篇 LeetCode.695.Max Area of Island 岛屿的最大面积
下一篇 ECharts
页面信息
location:protocol: host: hostname: origin: pathname: href: document:referrer: navigator:platform: userAgent: