当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(29)ECharts图表展示网站访问量

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

阅读
评论
1.9k
阅读预计10分钟
创建日期 2020-02-28
修改日期 2020-02-28
类别

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论