大数据毕设/课设 - 基于大数据的共享单车可视化平台

0 前言

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

今天要分享的是：基于大数据的共享单车可视化平台

---

1 介绍

大数据大屏可视化系列：基于大数据的共享单车可视化平台

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

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

2 实现效果

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

3 部分关键代码

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
 option = {
          legend: {
           orient: 'vertical',
            itemWidth: 10,
            itemHeight: 10,
            textStyle:{
                color:'rgba(255,255,255,.5)'
            },
              top:'20%',
          right:30,
            data:['已入驻','已出售','已租赁','闲置房产']
        },
        color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
       
        calculable : true,
        series : [
            {
              
                type:'pie',
                radius : [20, 70],
                center: ["35%", "50%"],
                roseType : 'area',
                data:[ 
                    {value:300, name:'已入驻'},
                    {value:200, name:'已出售'},
                    {value:205, name:'已租赁'},
                    {value:180, name:'闲置房产'},
               
                ],
                 label: {
                 normal: {
                     formatter: function(param) {
                         return param.name +':\n' + param.value +'\n';
                     }
    
                 }
             },
             labelLine: {
                 normal: {
                      length:5,
                      length2:15,
                     lineStyle: { width: 1}
                 }
             },
    
             itemStyle: {
                 normal: {
                     shadowBlur: 30,
                     shadowColor: 'rgba(0, 0, 0, 0.4)'
                 }
    
             },
            }
        ]
    };
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));
option = {
    
    tooltip: {
        trigger: 'axis'
    },
    radar: [{
        indicator: [{
            text: '盈利能力',
            max: 100
        }, {
            text: '发展水平',
            max: 100
        }, {
            text: '融资能力',
            max: 100
        }, {
            text: '技术能力',
            max: 100
        }, {
            text: '企业规模',
            max: 100
        }],
        textStyle: {
            color: 'red'
        },
        center: ['50%', '50%'],
        radius: '70%',
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
    
        name: {
            padding:-5,
            formatter: '{value}',
            textStyle: {
              
                color: 'rgba(255,255,255,.5)'
            }
        },
        splitArea: {
            areaStyle: {
                color: 'rgba(255,255,255,.05)'
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.05)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.05)'
            }
        }
    }, ],
    series: [{
        name: '雷达图',
        type: 'radar',
        tooltip: {
            trigger: 'item'
        },
        data: [{
            name: '园区平均值',
            value: [90, 80, 20, 10, 30],
            lineStyle: {
                normal: { 
                    color:'#03b48e',
                    width:2,
                }
            },
            areaStyle: {
                normal: {
                    color: '#03b48e',
                    opacity:.4
                }
            },
            symbolSize: 0,
          
        }, {
            name: '当前园区',
            value: [30, 20, 75, 80, 70],
            symbolSize: 0,
            lineStyle: {
                normal: { 
                    color:'#3893e5',
                    width:2,
                }
            },
                 areaStyle: {
                normal: {
                    color: 'rgba(19, 173, 255, 0.5)'
                }
            }
        }]
    }, ]
};
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
})

篇幅有限仅展示关键代码

4 项目源码获取方式

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