0 前言

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

今天要分享的是：基于大数据的通用可视化模板

1 介绍

大数据大屏可视化系列：基于大数据的通用可视化模板

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

项目源码： https://blog.csdn.net/Seniors_DC/article/details/125388429

2 实现效果

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

3 部分关键代码

function echarts_21() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('echart21'));option1 = {tooltip: {trigger: 'axis',axisPointer: { type: 'shadow'}},grid: {left: '0%',top:'10px',right: '0%',bottom: '0px',containLabel: true},xAxis: [{type: 'category',data: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10','11', '12'],axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1)",width: 1,type: "solid"},},axisTick: {show: false,},axisLabel:  {interval: 0,// rotate:50,show: true,splitNumber: 15,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},}],yAxis: [{type: 'value',axisLabel: {//formatter: '{value} %'show:true,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1 )",width: 1,type: "solid"},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",}}}],series: [{type: 'line',data: [5030, 8600, 3000,7200,7200, 5130, 10030, 8600, 13000,7200, 9130,  4130],itemStyle: {normal: {color:'#37a3ff',opacity: 1,BorderRadius: 3,}}}]
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option1);window.addEventListener("resize",function(){myChart.resize();});}
function echarts_22() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('echart22'));option1 = {//  backgroundColor: '#00265f',tooltip: {trigger: 'axis',axisPointer: { type: 'shadow'}},grid: {left: '0%',top:'5px',right: '0%',bottom: '0px',containLabel: true},xAxis: [{type: 'category',data: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10','11', '12'],axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1)",width: 1,type: "solid"},},axisTick: {show: false,},axisLabel:  {interval: 0,// rotate:50,show: true,splitNumber: 15,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},}],yAxis: [{type: 'value',axisLabel: {//formatter: '{value} %'show:true,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1    )",width: 1,type: "solid"},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",}}}],series: [{type: 'line',data: [7200, 9130, 5030, 8600, 3000,7200, 4130, 5130, 10030, 8600, 13000,7200],itemStyle: {normal: {color:'#37a3ff',opacity: 1,barBorderRadius: 3,}}}]
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option1);window.addEventListener("resize",function(){myChart.resize();});}

篇幅有限仅展示关键代码

4 项目源码获取方式

项目源码下载： https://blog.csdn.net/Seniors_DC/article/details/125388429

大数据毕设/课设 - 基于大数据的通用可视化模板相关推荐

大数据毕设/课设 - 水质情况实时监测预警可视化设计与实现
文章目录 0 前言 1 介绍 2 实现效果 3 部分关键代码 4 项目源码获取方式 0 前言 Hi,大家好,今天给大家介绍一个大数据可视化项目,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自 ...
大数据毕设/课设 - 数据大屏监控可视化设计与实现
文章目录 0 前言 1 介绍 2 实现效果 3 部分关键代码 4 项目源码获取方式 0 前言 Hi,大家好,今天给大家介绍一个大数据可视化项目,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自 ...
毕设课设基于Android的校园订餐APP开发（附源码）
1.演示视频链接: https://www.bilibili.com/video/BV1N3411c7Pf/?vd_source=48f4d2985ad54326394e2e5947d91c22 2. ...
基于单片机波形发生器PCB原理图报告设计资料-基于单片机比赛计时计分电路仿真设计-基于单片机报警器与旋转灯设计-基于单片机八路数据电压采集报警控制系统-基于单片机病房呼叫系统控制系统设计【毕设课设资】
1302基于单片机波形发生器PCB原理图报告设计资料-毕设课设原理图程序资料设计一个信号发生器,能在单片机的基础上控制并产生三角波.方波.正弦波和矩形波,且频率幅度和波形可以通过按键改变. #inc ...
大数据统计分析毕业设计_基于大数据分析的电子信息类专业毕业设计成绩影响因素研究...
基于大数据分析的电子信息类专业毕业设计成绩影响因素研究温芳琴 [期刊名称] <佳木斯教育学院学报> [年 ( 卷 ), 期] 2019(000)011 [摘要] 通过收集苏州科技大学天 ...
数据中台建设方案-基于大数据平台(下)
数据中台建设方案 -基于大数据平台(下) 1数据中台建设方案 1.1 总体建设方案 1.2大数据集成平台 1.3大数据计算平台 1.3.1数据计算层建设
数据中台建设方案-基于大数据平台
数据中台建设方案 -基于大数据平台- 1 数据中台建设方案 1.1 总体建设方案通过对客户大数据应用平台服务需求的理解,根据建设目标.设计原则的多方面考虑,建议采用星环科技Transwarp Dat ...
数据中台建设方案-基于大数据平台(上)
数据中台建设方案 -基于大数据平台(上) 1 数据中台建设方案 1.1 总体建设方案通过对客户大数据应用平台服务需求的理解,根据建设目标.设计原则的多方面考虑,建议采用星环科技Transwarp D ...
基于STM32的智能温室控制系统仿真电路设计（温控补光）-基于STM32的智能蓝牙温控风扇控制系统设计-基于STM32的无线蓝牙心电监护仪系统设计【毕设课设分享】
1609 基于STM32的智能蓝牙温控风扇控制系统设计-毕设课设 1.LCD1602液晶显示当前温度,温度上下限值,风扇等级,自动手动模式: 2.设置有4个按键,按键1可以设置自动和手动2种模式切换: ...
2019吉大软件C++课设——模拟即时通信系统
吉林大学大三学生东北师范大学附属中学OJ jinxi20111 2019.08.28 首先第一点,如果你是来学习和提问的,直走请进,如果你还没有仔细阅读完并感受到难度,我的建议是多阅读两遍,或者先动 ...

大数据毕设/课设 - 基于大数据的通用可视化模板

文章目录