一、 实现效果

先来一张效果图.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%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        silent: true,
        itemStyle: {
            normal: {
                color: '#F76A4F'
            }
        },
        label: {
            normal: {
                show: true,
                position: 'center',
                formatter: function (params) {
                    return '{value|' + params.value + '} {unit|%}\n{name|' + params.name + '}';
                },
                rich: {
                    value: {
                        fontFamily: 'SFUDINEngschrift',
                        fontSize: 24,
                        fontWeight: 200,
                        color: '#343434',
                        verticalAlign: 'bottom'
                    },
                    unit: {
                        fontFamily: 'SFUDINEngschrift',
                        fontSize: 11,
                        color: '#9F9F9F',
                        lineHeight: 17,
                        verticalAlign: 'bottom'
                    },
                    name: {
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 11,
                        color: '#9F9F9F',
                        lineHeight: 20,
                    }
                }
            },
        },
    };
    // 基础标题（左上角那个）
    let baseTitle = {
        top: '5%',
        left: '5%',
        textStyle: {
            color: '#A5A9B2',
            fontWeight: 600,
            fontSize: 12
        }
    }
    // 公共配置
    let pieBaseOption = {
        title: baseTitle,
        series: [pieSeries]
    };
    
    //CPU使用率的默认样式
    let data = [];
    pieBaseOption.title.text = "CPU 使用率";
    pieSeries.name = "cpu_usage_rate";
    // CPU使用率
    echarts.getInstanceByDom($("#cpu_usage_rate")[0]).setOption(pieBaseOption);
    
     // 初始化结束之后，开始获取服务器数据
    getMonData();

d、获取服务器数据并准备绑定数据到echarts。由于不同监控数据在不同的请求接口，因此这里要等所有的数据都加载完毕再进行渲染（一个数据可能会使用到另一个）

/**
    index.js
*/
// 获取服务器数据，并将其封装为echarts数据
let getMonData = () => {
    // 确保所有数据请求完毕后才进行渲染
    Promise.all([serviceMonData(), tomcatMonData(), jvmMonData(), traceMonData()]).then(function (r) {
        // 获取到数据之后必定触发数据处理，用来适配Echarts
        echartsDataAdapter();
    })
}
let serviceMonData = () => {
    return ajax.get('/sys/actuate/service/list').then(function (r) {
        serviceData = r.list
    })
}
let tomcatMonData = () => {
    return ajax.get('/sys/actuate/tomcat/list').then(function (r) {
        tomcatData = r.list;
    })
}
let jvmMonData = () => {
    return ajax.get('/sys/actuate/jvm/list').then(function (r) {
        jvmData = r.list;
    })
}
let traceMonData = () => {
    return ajax.get('/sys/actuate/httpTrace/list').then(function(r){
        traceData = r.page.list;
    })
}

e、绑定数据到Echarts中。这部分也需要进行数据的适配，需要将请求获取到的数据做一定的处理绑定到echarts上。

/**
    index.js
*/
/**
 * 获取到的数据适配Echarts
 */
let echartsDataAdapter = () => {
    let data = [];
    let realtimeData = [];
    if (serviceData) {
        serviceData.forEach((item, index) => {
            // CPU使用率
            if (item.name == "system.cpu.usage") {
                data = [
                    { value: 0, name: 'CPU占用率' },
                    {
                        value: 0,
                        name: 'invisible',
                        label: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: '#E6E6E6',
                            }
                        }
                    }
                ];
                data[0].value = Math.round(item.measurements[0].value * 100);
                data[1].value = 100 - Math.round(item.measurements[0].value * 100);
                // 将data赋值
                let echartsInstance = echarts.getInstanceByDom($("#cpu_usage_rate")[0]);
                echartsInstance.setOption({
                    series: [{
                        data: data
                    }]
                });
                echartsInstance.hideLoading(); // 去除loading
            }
        })
    }
}
四、数据格式

后台采用Actuator进行系统的监控管理。前台请求之后，便使用Actuator查询数据整理之后返回一个JSON文件格式。
由于项目采用前后端分离，后台代码的实现会单独开一篇文章来讲解，所以这里只介绍数据格式。

{   
    "msg":"success",   
    "code":0,    
    "list":[
        {
            "name":"process.cpu.usage",
            "description":"当前应用 CPU 使用率",
            "baseUnit":"",
            "patterValue":"0.34%",
            "group":"2",
            "measurements":[
                {
                    "statistic":"VALUE",
                    "value":0.003432716310723461
                }
            ],
            "availableTags":[
            ]
        },
        {
            "name":"process.start.time",
            "description":"应用启动时间点",
            "baseUnit":"",
            "patterValue":"2019-09-20 08:51:08",
            "group":"2",
            "measurements":[
                {
                    "statistic":"VALUE",
                    "value":1568940668.409
                }
            ],
            "availableTags":[
            ]
        },
        {
            "name":"process.uptime",
            "description":"应用已运行时间",
            "baseUnit":" 秒",
            "patterValue":"16079.006 秒",
            "group":"2",
            "measurements":[
                {
                    "statistic":"VALUE",
                    "value":16079.006
                }
            ],
            "availableTags":[
            ]
        },
        {
            "name":"system.cpu.count",
            "description":"CPU 数量",
            "baseUnit":" 核",
            "patterValue":"12 核",
            "group":"1",
            "measurements":[
                {
                    "statistic":"VALUE",
                    "value":12
                }
            ],
            "availableTags":[
            ]
        },
        {
            "name":"system.cpu.usage",
            "description":"系统 CPU 使用率",
            "baseUnit":"",
            "patterValue":"58.47%",
            "group":"1",
            "measurements":[
                {
                    "statistic":"VALUE",
                    "value":0.5847066456213992
                }
            ],
            "availableTags":[
            ]
        },
        {
            "name":"system.memory.usage",
            "description":"系统 内存 使用率",
            "baseUnit":null,
            "patterValue":"65.33%",
            "group":null,
            "measurements":[
                {
                    "statistic":null,
                    "value":0.6533496101899664
                }
            ],
            "availableTags":null
        }
    ]}
五、总结

按照目前的需求来看，当前的实现方式完全是可行的，但是会对服务器造成大量压力，第二版必定要处理这个问题。

六、参考资料

echarts官网：https://www.echartsjs.com/zh/index.html

# echarts # webpack
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

新华网：开源盛会在江城——2024开放原子开发者大会侧记

开源盛会在江城——2024开放原子开发者大会侧记

avatar 开放原子开发者工作坊

新华社：释放开源潜能，加快构筑软件创新“朋友圈”

释放开源潜能，加快构筑软件创新“朋友圈”

avatar 开放原子开发者工作坊

开源鸿蒙：引领万物智联，加速生态崛起

开源鸿蒙：引领万物智联，加速生态崛起

avatar 开放原子开发者工作坊