【计算机毕设项目】大数据服务监控平台可视化

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：大数据服务监控平台可视化

包含内容：

1. 完整可视化实现源码
2. html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：大数据服务监控平台可视化
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

3 部分代码展示

 $(function() {
        function apiFn() {
            this.hostname = ""
        }
        apiFn.prototype = {
            Init:function() {
                this.findCount()
                this.otherDataFn()
                this.baseInfo()
                this.questionFn()
                this.publicityFn()
                this.threeTasksFn()
                this.departmentFn()
                this.guideFn()
                this.policyFn()
                this.coverageFn()
                this.yearsNumFn()
                this.contentFn()
                this.publicNumFn()
                setInterval(function() {
                    numInit()
                },6000)
            },
            findCount:function() {

            },
            // 其他数据展示
            otherDataFn:function() {
                $(".daysData").addClass("counter-value").text("304")
                $(".weekData").addClass("counter-value").text("2044")
                $(".monthData").addClass("counter-value").text("909")
                $(".someThing").addClass("counter-value").text("980")
                $(".policyData").addClass("counter-value").text("200")
            },
            // 基础信息
            baseInfo:function() {


                var baseChart = echarts.init(document.getElementById('baseId'));
                var charts = [
                    {name: "测试1", num: 200},
                    {name: "测试2", num: 300},
                    {name: "测试3", num: 400},
                    {name: "测试4", num: 500},
                    {name: "测试5", num: 300},
                ]
                var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249']

                let lineY = []
                for (var i = 0; i < charts.length; i++) {
                var x = i
                if (x > color.length - 1) {
                    x = color.length - 1
                }
                var data = {
                    name: charts[i].name,
                    color: color[x] + ')',
                    value: charts[i].num,
                    itemStyle: {
                    normal: {
                        show: true,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: color[x] + ', 0.3)'
                        }, {
                        offset: 1,
                        color: color[x] + ', 1)'
                        }], false),
                        barBorderRadius: 10
                    },
                    emphasis: {
                        shadowBlur: 15,
                        shadowColor: 'rgba(0, 0, 0, 0.1)'
                    }
                    }
                }
                lineY.push(data)
                }
                var option= {
                title: {
                    show: false
                },
                grid: {
                    // borderWidth: 1,
                    top: '10%',
                    left: '30%',
                    right: '20%',
                    bottom: '3%'
                },
                color: color,
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisTick: {
                    show: false
                    },
                    axisLine: {
                    show: false
                    },
                    axisLabel: {
                    show: false,
                    inside: false
                    },
                    data: charts.name
                }, {
                    type: 'category',
                    inverse: true,
                    axisLine: {
                    show: false
                    },
                    axisTick: {
                    show: false
                    },
                    axisLabel: {
                    show: true,
                    inside: false,
                    textStyle: {
                        color: '#38E1E1',
                        fontSize: '8',
                    },
                    formatter: function (val,index) {
                        return `${charts[index].num}`
                    }
                    },
                    splitArea: {
                    show: false
                    },
                    splitLine: {
                    show: false
                    },
                    data: charts
                }],
                xAxis: {
                    // type: 'value',
                    axisTick: {
                    show: false
                    },
                    axisLine: {
                    show: false
                    },
                    splitLine: {
                    show: false
                    },
                    axisLabel: {
                    show: false
                    }
                },
                series: [{
                    name: '',
                    type: 'bar',
                    zlevel: 2,
                    barWidth: '5px',
                    data: lineY,
                    animationDuration: 1500,
                    label: {
                    normal: {
                        color: 'white',
                        show: true,
                        position: [-65, -2],
                        textStyle: {
                        fontSize: 8
                        },
                        formatter: function (a, b) {
                            return a.name
                        }
                    }
                    }
                }],
                animationEasing: 'cubicOut'
                }
                baseChart.setOption(option)
                setInterval(function() {
                    baseChart.clear()
                    baseChart.setOption(option)
                },40000)
            },
            // 问题反馈类型占比
            questionFn:function() {
                var numArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                    {name: '测试66', value: 800},
                ]
                // for(var i = 0; i < data.list.length; i++) {
                //     numArr.push({name: data.list[i].name,value: data.list[i].num})
                // }

4 最后

项目获取：https://gitee.com/sinonfin/system-sharing