使用echarts实现系统性能动态监控（数据实时展示）

最新推荐文章于 2025-03-10 17:17:20 发布

深巷里的黑猫

最新推荐文章于 2025-03-10 17:17:20 发布

阅读量2.3w

点赞数 17

分类专栏：工作记录文章标签： echarts webpack 系统监控

本文链接：https://blog.csdn.net/qq_22241923/article/details/101057867

版权

一、实现效果

先来一张效果图.gif
在这里插入图片描述

二、解决方案

1、目前的解决方案（异步加载）

目前的实现方式比较简单，前端定时从后台请求数据并渲染Echarts，这样做的方式比较简单粗暴，但也有如下几个问题：

a、前端定时从服务器获取数据，会对服务器造成巨大的压力，尤其是监控数据分为多个不同请求的情况下。
b、大量的并发请求，势必会阻塞服务器请求，导致响应缓慢甚至服务器瘫痪。

进而看出目前的方案并不是很好的，但他简单啊^-

2、稍作改进方案

下一步方案实际上是另一个员工提出来的，但其实并不叫改进，只能叫做妥协，就是后台定时获取监控数据并保存在redis中。之后前端写一个请求按钮，每次点击请求时，再从redis中获取数据，这样做的优点很多，有下面几种：

a、对服务器的压力大量减少，前端最少一次请求即可展现页面。
b、后台服务器定时获取数据，在固定的时间段只有有限的请求次数，不用担心服务器性能问题。

但缺点也很明显，那就是不能动态刷新数据了，必须手动进行刷新。

3、更好的解决方案

更好的方案可以使用长连接进行，前台轮询请求，后台如果有数据的更新则向前端返回新的数据，重新进行渲染。
尽管第三种方式更符合，但也需要进行一定的改动，因此我这里采用最简单的第一种。下一个版本可能会采用第二种，毕竟客户的要求不一样，也不一定非要动态更新图表。

接下来一步一步来实现效果图中的样式

三、前端代码实现

作为一个非专业的前端小白，目前就是能有效果就行，因此代码写的可能比较凌乱。
由于前端采用的是webpack，而Echarts官方从3.1.1开始维护NPM上的package了，因此直接查看Echarts官网进行安装即可。

在webpack中使用ECharts：https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

本项目中还使用到了echarts的 liquidfill（水球）插件。
liquidfill: https://github.com/ecomfe/echarts-liquidfill#api

使用下列命令导入

npm install echarts-liquidfill --save

a、按照教程导入需要的模块（按需导入）

/**
    index.js
*/
// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
// 引入饼图
require('echarts/lib/chart/pie');
// 引入折线图
require('echarts/lib/chart/line');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入雷达图
require('echarts/lib/chart/radar');
// 引入水球
require('echarts-liquidfill') // 水球需要单独安装
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 引入图例组件
require('echarts/lib/component/legend');

b、统一初始化所有图表，这一部分只是初始化，使Echarts图表绑定在dom上，绑定上的dom都会有一个loading的动画。不做其他处理。

/**
    index.js
*/
/** 统一加载所有的echarts */
let initEcharts = () => {
   
    $('.echart').each((index, dom) => {
   
        if($(dom).attr("id") != "jvm_gc"){
    //排除最后一个文字域的加载动画
            echarts.init(dom).showLoading();  //  初始化所有dom并显示加载动画
        }
    })
    // 设置每个图表的不同初始化样式
    echartsSetInitOption();
    // 定时刷新
    window.setInterval(function() {
   
        getMonData()； //这里用来获取数据
    },5000)
}

c、进行每个图表的个性化定制（代码太多，这里只列出一个），图表采用异步加载，因此，这部分处理所有图表的基础样式，也不进行数据填充。整个界面展示阶段这里只加载一次。

/**
    index.js
*/
/**
 * 初始化所有图表样式（这部分只是公共样式设置，还不会填充任何数据）
 */
let echartsSetInitOption = () => {
   
    // 饼图的公共系列属性
    let pieSeries = {
   
        type: 'pie',
        radius: ['50%', '55%