0 前言

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

今天要分享的是：水质情况实时监测预警可视化设计与实现

1 介绍

大数据大屏可视化系列：水质情况实时监测预警可视化设计与实现

可搭载任意自己想用的数据，动态效果不错

项目源码： https://download.csdn.net/download/Seniors_DC/85662098

2 实现效果

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

3 部分关键代码

function leidatu(){// var imgPath = ['http://bmob-cdn-15355.b0.upaiyun.com/2017/12/01/bee4341c4089af7980b87074a77479ad.png']var myChart = echarts.init(document.getElementById('leida'));option = {color: ['#00c2ff', '#f9cf67', '#e92b77'],legend: {show: true,// icon: 'circle',//图例形状bottom: 0,center: 0,itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。textStyle: {fontSize: 12,color: '#ade3ff'},data: ['2016', '2017', '2018'],},radar: [{indicator: [{text: '重庆市',max: 100},{text: '北京市',max: 100},{text: '上海市',max: 100},{text: '广东省',max: 100},{text: '浙江省',max: 100}],textStyle: {color: 'red'},center: ['50%', '50%'],radius: 60,startAngle: 90,splitNumber: 3,orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.// shape: 'circle',// backgroundColor: {//     image:imgPath[0]// },name: {formatter: '{value}',textStyle: {fontSize: 12, //外圈标签字体大小color: '#5b81cb' //外圈标签字体颜色}},splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。show: true,areaStyle: { // 分隔区域的样式设置。color: ['#141c42', '#141c42'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。}},// axisLabel:{//展示刻度//     show: true// },axisLine: { //指向外圈文本的分隔线样式lineStyle: {color: '#153269'}},splitLine: {lineStyle: {color: '#113865', // 分隔线颜色width: 1, // 分隔线线宽}}}, ],series: [{name: '雷达图',type: 'radar',itemStyle: {emphasis: {lineStyle: {width: 4}}},data: [{name: '2016',value: [85, 65, 55, 90, 82],areaStyle: {normal: { // 单项区域填充样式color: {type: 'linear',x: 0, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#00c2ff'}, {offset: 0.5,color: 'rgba(0,0,0,0)'}, {offset: 1,color: '#00c2ff'}],globalCoord: false},opacity: 1 // 区域透明度}},symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。label: {                    // 单个拐点文本的样式设置normal: {show: true,             // 单个拐点文本的样式设置。[ default: false ]position: 'top',        // 标签的位置。[ default: top ]distance: 2,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]color: '#6692e2',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]fontSize: 14,           // 文字的字体大小formatter:function(params) {return params.value;}}},itemStyle: {normal: { //图形悬浮效果borderColor: '#00c2ff',borderWidth: 2.5}},// lineStyle: {//     normal: {//         opacity: 0.5// 图形透明度//     }// }}, {name: '2017',value: [50, 20, 45, 30, 75],symbolSize: 2.5,itemStyle: {normal: {borderColor: '#f9cf67',borderWidth: 2.5,}},areaStyle: {normal: { // 单项区域填充样式color: {type: 'linear',x: 0, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#f9cf67'}, {offset: 0.5,color: 'rgba(0,0,0,0)'}, {offset: 1,color: '#f9cf67'}],globalCoord: false},opacity: 1 // 区域透明度}},// lineStyle: {//     normal: {//         opacity: 0.5// 图形透明度//     }// }}, {name: '2018',value: [37, 80, 12, 50, 25],symbolSize: 2.5,itemStyle: {normal: {borderColor: '#e92b77',borderWidth: 2.5,}},areaStyle: {normal: { // 单项区域填充样式color: {type: 'linear',x: 0, //右y: 0, //下x2: 1, //左y2: 1, //上colorStops: [{offset: 0,color: '#e92b77'}, {offset: 0.5,color: 'rgba(0,0,0,0)'}, {offset: 1,color: '#e92b77'}],globalCoord: false},opacity: 1 // 区域透明度}}}]}, ]};myChart.setOption(option);
}

篇幅有限仅展示关键代码

4 项目源码获取方式

项目源码下载： https://download.csdn.net/download/Seniors_DC/85662098

大数据毕设/课设 - 水质情况实时监测预警可视化设计与实现相关推荐

大数据毕设/课设 - 数据大屏监控可视化设计与实现
文章目录 0 前言 1 介绍 2 实现效果 3 部分关键代码 4 项目源码获取方式 0 前言 Hi,大家好,今天给大家介绍一个大数据可视化项目,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自 ...
基于阿里云之大数据学习：使用DataV制作实时销售数据可视化大屏
学习目标: 了解数据可视化应用场景掌握阿里云DataV可视化工具了解可视化大屏制作流程使用DataV模板制作数据可视化大屏一.数据可视化介绍 1.数据可视化: 是指将相对复杂的数据通过可视的. ...
大数据毕设系列项目说明【源码+论文】
文章目录 1 项目下载步骤 2 项目包含内容 3 样例展示 4 代码样例 1 项目下载步骤 Hi,大家好,这里是学长开发的大数据可视化项目系列,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自 ...
基于单片机波形发生器PCB原理图报告设计资料-基于单片机比赛计时计分电路仿真设计-基于单片机报警器与旋转灯设计-基于单片机八路数据电压采集报警控制系统-基于单片机病房呼叫系统控制系统设计【毕设课设资】
1302基于单片机波形发生器PCB原理图报告设计资料-毕设课设原理图程序资料设计一个信号发生器,能在单片机的基础上控制并产生三角波.方波.正弦波和矩形波,且频率幅度和波形可以通过按键改变. #inc ...
基于STM32的智能温室控制系统仿真电路设计（温控补光）-基于STM32的智能蓝牙温控风扇控制系统设计-基于STM32的无线蓝牙心电监护仪系统设计【毕设课设分享】
1609 基于STM32的智能蓝牙温控风扇控制系统设计-毕设课设 1.LCD1602液晶显示当前温度,温度上下限值,风扇等级,自动手动模式: 2.设置有4个按键,按键1可以设置自动和手动2种模式切换: ...
2019吉大软件C++课设——模拟即时通信系统
吉林大学大三学生东北师范大学附属中学OJ jinxi20111 2019.08.28 首先第一点,如果你是来学习和提问的,直走请进,如果你还没有仔细阅读完并感受到难度,我的建议是多阅读两遍,或者先动 ...
【电路】基于单片机智能睡眠枕系统设计-基于单片机音乐喷泉制作设计-基于单片机智能温控风扇调速系统设计-基于单片机智能自动循迹小车控制系统设计-基于数字电路的4人投票系统设计（仿真，报告）毕设课设资料
1620基于单片机智能睡眠枕系统设计-文档+PPT+PCB图+原理图+源码智能睡眠枕主要由lcd屏幕.蓝牙.压力传感器.蜂鸣器.单片机等等组成,用户可通过四个独立按键进行操控(四个按键从左至右为1. ...
青春有你，成长同行——2022《大数据实践课》成果展示
1 实践单位:中国广核新能源控股有限公司项目名称:基于机器学习的风电机组传动链故障诊断小组成员: 高祥机械系(组长) 李艳文机械系范祥祺工物系研究目标:随着风电机组运行年限的增加,机 ...
《大数据实践课》开创实践教学新模式：清华大数据能力提升项目特色课程系列报道之一
2014年4月,清华大学顺应时代潮流成为全国第一批成立大数据研究机构的高等学府.四年来,清华-青岛数据科学研究院(以下简称:数据院)与研究生院共同设计组织实施了以大数据能力提升项目为主的大数据人才培养 ...

大数据毕设/课设 - 水质情况实时监测预警可视化设计与实现

文章目录