文章目录

0 前言1 介绍2 实现效果3 部分关键代码4 项目源码获取方式

0 前言

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

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

---

1 介绍

大数据大屏可视化系列：基于大数据的可视化分析模板

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

项目源码：/Seniors_DC/article/details/125388429

2 实现效果

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

3 部分关键代码

function echarts_4() {var myChart = echarts.init(document.getElementById('echart4'));option1= {// backgroundColor: '#00265f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['字段名称1', '字段名称2'],top:'5%',textStyle: {color: "#fff",fontSize: '12',},//itemGap: 35},grid: {left: '0%',top:'40px',right: '0%',bottom: '0',containLabel: true},xAxis: [{type: 'category',data: ['1', '2', '3', '4', '5', '6', '7'],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: 2,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: [{name: '字段名称1',type: 'line',smooth: true,data: [5, 2, 6, 4, 5, 12,20],barWidth:'15',// barGap: 1,itemStyle: {normal: {color:'#62c98d',opacity: 1,barBorderRadius: 5,}}},{name: '字段名称2',type: 'line',smooth: true,data: [7, 11, 8, 13, 10, 13,10],itemStyle: {normal: {color:'#ffc000',opacity: 1,barBorderRadius: 5,}}}]};myChart.setOption(option1);window.addEventListener("resize",function(){myChart.resize();});$(".sebtn a").click(function(){$(this).addClass("active").siblings().removeClass("active")})$(".sebtn a").eq(0).click(function(){myChart.setOption(option1);})$(".sebtn a").eq(1).click(function(){myChart.setOption(option2);})$(".sebtn a").eq(2).click(function(){myChart.setOption(option3);})}function echarts_3() {var myChart = echarts.init(document.getElementById('echart3'));var spNum = 5,_max=100;var legendData = ['已完成', '未完成'];var y_data = ['字段名称1', '字段名称2', '字段名称3', '字段名称4'];var data1 = [10,15,100,13];var data2 = [19,50,40,33];var fomatter_fn = function(v) {return (v.value / _max * 100).toFixed(0) }var _label = {normal: {show: true,position: 'inside',formatter: fomatter_fn,textStyle: {color: '#fff',fontSize: 12}}};

篇幅有限仅展示关键代码

4 项目源码获取方式

项目源码下载：/Seniors_DC/article/details/125388429