文章目录

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