如何用Echarts+vue可视化动态基线分析结果demo

如何用Echart+vue可视化后台分析的数据结果

​ echarts在运维可视化中是最常见的一个可视化工具，这里介绍如何去对后台分析的结果进行可视化。
同时此页面基于vue并且使用了iview插件库，框架使用vue-cli3.0（iview-admin）。实际上不用管这些，非必须，简单来说就是vue+echarts来对后台返回的分析结果数据进行可视化。

应用场景

​ 这里做了一个动态基线的demo，也就是说对服务器的运维状态进行一个分析，然后产生一个结果数据来对当前服务器的状态信息进行比较提供参考。
整体思路如下，通过数据抽取把历史数据进行抽取并且提供给后台进行分析，然后后台将结果存储下来，可视化页面去调用后台的接口获得对应实体的基线数据。

数据接口

​ demo提供三个接口：1.baseline?job_id=10&ip=10.x.x.x 可以获取任务号为10、ip为10.x.x.x的基线值。2.baseline?job_id=10 不指定ip可以获取所有ip的分时间点的基线值。3.baseline/ips 可以获取所有有基线值的ip列表。数据示例：

{
   
    "code": 1,
    "data": [
        {
   
            "date": "2020-04-27",
            "id": 29,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 34.25
        },
        {
   
            "date": "2020-04-26",
            "id": 33,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 15.5
        },
        {
   
            "date": "2020-04-25",
            "id": 37,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 18.5
        },
        {
   
            "date": "2020-04-24",
            "id": 41,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 4.5
        },
        {
   
            "date": "2020-04-23",
            "id": 45,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 31.75
        },
        {
   
            "date": "2020-04-22",
            "id": 49,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 19.25
        },
        {
   
            "date": "2020-04-21",
            "id": 53,
            "ip": "10.238.0.12",
            "job_id": 10,
            "value": 23.75
        }
    ],
    "message": "获取数据成功"
}
//所有数据
{
   "code":1,"data":[{
   "date":"2020-04-27","id":29,"ip":"10.238.0.12","job_id":10,"value":34.25},{
   "date":"2020-04-27","id":30,"ip":"10.238.0.134","job_id":10,"value":26.75},{
   "date":"2020-04-27","id":31,"ip":"10.238.0.17","job_id":10,"value":30.25},{
   "date":"2020-04-27","id":32,"ip":"10.238.0.215","job_id":10,"value":26.0},{
   "date":"2020-04-26","id":33,"ip":"10.238.0.12","job_id":10,"value":15.5},{
   "date":"2020-04-26","id":34,"ip":"10.238.0.134","job_id":10,"value":15.5},{
   "date":"2020-04-26","id":35,"ip":"10.238.0.17","job_id":10,"value":23.0},{
   "date":"2020-04-26","id":36,"ip":"10.238.0.215","job_id":10,"value":17.25},{
   "date":"2020-04-25","id":37,"ip":"10.238.0.12","job_id":10,"value":18.5},{
   "date":"2020-04-25","id":38,"ip":"10.238.0.134","job_id":10,"value":18.5},{
   "date":"2020-04-25","id":39,"ip":"10.238.0.17","job_id":10,"value":18.75},{
   "date":"2020-04-25","id":40,"ip":"10.238.0.215","job_id":10,"value":50.5},{
   "date":"2020-04-24","id":41,"ip":"10.238.0.12","job_id":10,"value":4.5},{
   "date":"2020-04-24","id":42,"ip":"10.238.0.134","job_id":10,"value":4.5},{
   "date":"2020-04-24","id":43,"ip":"10.238.0.17","job_id":10,"value":17.5},{
   "date":"2020-04-24","id":44,"ip":"10.238.0.215","job_id":10,"value":4.25},{
   "date":"2020-04-23","id":45,"ip":"10.238.0.12","job_id":10,"value":31.75},{
   "date":"2020-04-23","id":46,"ip":"10.238.0.134","job_id":10,"value":44.75},{
   "date":"2020-04-23","id":47,"ip":"10.238.0.17","job_id":10,"value":32.25},{
   "date":"2020-04-23","id":48,"ip":"10.238.0.215","job_id":10,"value":32.25},{
   "date":"2020-04-22","id":49,"ip":"10.238.0.12","job_id":10,"value":19.25},{
   "date":"2020-04-22","id":50,"ip":"10.238.0.134","job_id":10,"value":19.25},{
   "date":"2020-04-22","id":51,"ip":"10.238.0.17","job_id":10,"value":34.75},{
   "date":"2020-04-22","id":52,"ip":"10.238.0.215","job_id":10,"value":28.75},{
   "date":"2020-04-21","id":53,"ip":"10.238.0.12","job_id":10,"value":23.75},{
   "date":"2020-04-21","id":54,"ip":"10.238.0.134","job_id":10,"value":23.75},{
   "date":"2020-04-21","id":55,"ip":"10.238.0.17","job_id":10,"value":23.75},{
   "date":"2020-04-21","id":56,"ip":"10.238.0.215","job_id":10,"value":23.75}],"message":"\u83b7\u53d6\u6570\u636e\u6210\u529f"}

echarts图表选型

​ 查看Echarts官网的示例，初步选定堆叠折线图来实现。echarts图件生成参考：五分钟上手Echarts（https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts）。
​ 以下图件可以很好地对这个应用场景进行一个展示

​ echarts的图件生成最关键的就是对于option的设置。比如最基本的折线图能够通过下面的option设置来完成：

option = {
   
    xAxis: {
   
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
   
        type: 'value'
    },
    series: [{
   
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

​

对于本demo中最简单的实现可以通过以下代码来完成。

<template>
  <div>
    <row>
      <i-Col span="24">
        <div ref="lineChart" style="height:400px;"></div>
      </i-Col>
    </row>
  </div>
</template>
<script>
import echarts from 'echarts'
 //利用绑定事件来对浏览器窗口的变化进行响应。
import {
    on, off } from '@/libs/tools'