文章目录
0 前言1 介绍2 实现效果3 部分关键代码4 项目源码获取方式0 前言
Hi,大家好,今天给大家介绍一个大数据可视化项目,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自己的项目添加灵活的可视化动态效果!
今天要分享的是:基于大数据的通用可视化模板
1 介绍
大数据大屏可视化系列:基于大数据的通用可视化模板
可搭载任意自己想用的数据,动态效果不错
项目源码:/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 项目源码获取方式
项目源码下载:/Seniors_DC/article/details/125388429