本医疗健康档案大数据采集清洗数据分析可视化的设计与实现，系统主要采用java，springboot，动态图表echarts，vue，mysql，mybatisplus，医疗健康档案数据分析，html，css，javascript等技术实现，主要通过互联网采集爬虫获取互联网医疗健康档案，对健康档案数据进行数据分析整合，数据处理成JSON格式，通过前端javascript解析JSON完成数据可视化的动态展示。
系统采集模块主要包含：数据采集解析，数据过滤，数据清洗，数据入库等操作
系统可视化分析模块主要包含：数据维度及指标的建立，动态图表的构建等等

原文地址

一、程序设计

本基于java Springboot的医疗健康档案大数据采集清洗数据分析可视化系统，主要内容涉及：

主要功能模块：数据采集解析，数据过滤，数据清洗，数据入库，系统可视化分析模块主要包含：数据维度及指标的建立，动态图表的构建等等

二、效果实现

演示视频

三、代码实现

基于java Springboot的医疗健康档案大数据采集清洗数据分析可视化系统主要采用前后端模式，针对医疗健康档案数据查询封装成JSON格式，完成数据下发至系统界面端渲染，系统界面端针对JSON解析后采用javascript完成页面展示。其中系统首页医疗健康档案采集模块采用java+javascript开发实现，数据分析代码逻辑如下：

publicNumFn: function () {
                var publicNumChart = echarts.init(document.getElementById('publicNumId'));
                var urlList = baseURL + "counts/cxtj/task/1/DS_INDEX_GDYYFB_COUNTS_TASK/datas";
                var option;
                $.get(urlList, function (r) {
                    let datares = r.result.value;
                    var resArr = datares
                    var xunArr = []
                    var jingArr = []
                    var dateArr = []
                    for (var i = 0; i < resArr.length; i++) {
                        xunArr.push(resArr[i].value)
                        jingArr.push(resArr[i].value)
                        dateArr.push(resArr[i].name)
                    }
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            x: '35%',
                            y: '0%',
                            data: ['疾病', '数量'],
                            textStyle: {
                                color: "#fff",
                                fontSize: 8
                            },
                            itemWidth: 10,
                            itemHeight: 10,
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: dateArr,
                                axisLabel: {
                                    interval: 0,
                                    textStyle: {
                                        fontSize: 8,
                                        color: 'rgba(255,255,255,.7)',
                                    }
                                },
                                "axisTick": {       //y轴刻度线
                                    "show": false
                                },
                                "axisLine": {       //y轴
                                    "show": false,
                                },
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                scale: true,
                                name: '单位：%',
                                nameTextStyle: {
                                    color: 'rgba(255,255,255,.7)',
                                    fontSize: 8
                                },
                                max: 30,
                                min: 0,
                                boundaryGap: [0.2, 0.2],
                                "axisTick": {       //y轴刻度线
                                    "show": false
                                },
                                "axisLine": {       //y轴
                                    "show": false,
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: 'rgba(255,255,255,.8)',
                                        fontSize: 8
                                        // opacity: 0.1,
                                    }
                                },
                                splitLine: {  //决定是否显示坐标中网格
                                    show: true,
                                    lineStyle: {
                                        color: ['#fff'],
                                        opacity: 0.2
                                    }
                                },
                            },
                            {
                                type: 'value',
                                scale: true,
                                show: false,
                                // name: "销量额(万元)",
                                nameTextStyle: {
                                    color: 'rgba(255,255,255,.2)',
                                },
                                max: 1,
                                min: 0,
                                boundaryGap: [0.2, 0.2],
                                "axisTick": {       //y轴刻度线
                                    "show": false
                                },
                                "axisLine": {       //y轴
                                    "show": false,
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: 'rgba(255,255,255,.2)',
                                        // opacity: 0.1,
                                    }
                                },
                                splitLine: {  //决定是否显示坐标中网格
                                    show: true,
                                    lineStyle: {
                                        color: ['#fff'],
                                        opacity: 0.2
                                    }
                                },

                            }
                        ],
                        color: ['#2E8CFF', '#38EB70'],
                        grid: {
                            left: '5%',
                            right: '1%',
                            top: '25%',
                            bottom: '15%'
                            // containLabel: true
                        },
                        series: [
                            {
                                animationDuration: 2500,
                                barWidth: '20%',
                                name: '疾病',
                                type: 'bar',
                                data: xunArr,
                            },
                            {
                                barWidth: '20%',
                                name: '数量',
                                type: 'bar',
                                data: jingArr,
                            }
                        ],
                        animationEasing: 'cubicOut'
                    };