2021 12 13

观影数据集可视化效果;

 

 

 

 

js函数：

function al(ip){
    alert(ip)
}
function on(name,myChart,ip)
{

    if(name==5211) set5211(myChart,ip)
    else if(name==5212) set5212(myChart,ip)
    else if(name==5213) set5213(myChart,ip)
    else if(name==5214) set5214(myChart,ip)
    else if(name==522) set522(myChart,ip)
    else if(name==531) set531(myChart,ip)
    else if(name==532) set532(myChart,ip,2015)
}
function getdate(url)
{
    var date
    $.ajax({
        async:false,
        url:url,
        scriptCharset: 'UTF-8',
        success:function(resp){date= resp},
        dataType:"json"
    })
    return date
}
function set5211(myChart,ip)
{
    url="http://"+this.ip+":8080/movie/getgenres"
    var mydataX=new Array()
    var mydataY=new Array()
    $.each(getdate(url).result,function(i,b){
        mydataX[i]=b.name
        mydataY[i]=b.value
    })
    var option = {
        dataZoom:{
            realtime:true, //拖动滚动条时是否动态的更新图表数据
            height:15,//滚动条高度
            start:0,//滚动条开始位置（共100等份）
            end:45//结束位置（共100等份）
        },                      
        title:{
            show:true,
            text:'5.2.1.1 电影类型数量（绘制条形图）'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }    
        },        
        xAxis: {
            type: 'category',
            data: mydataX                
        },  
        yAxis: {
            type: 'value'
        },    
        series: [
        {           
            data:mydataY,
            type: 'bar',
            itemStyle: {
                normal: {
                     // 随机显示
                    color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);},
                    label: {
                        show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 8
                            }
                        }                                
                }        
            }
        }]
    }
    myChart.clear()
    option && myChart.setOption(option)
    myChart.hideLoading()
    myChart.on('click', function (params) {
        console.log(params.name+params.value)
    })
}
function set5212(myChart,ip)
{
    url="http://"+this.ip+":8080/movie/getgenres"
    var option = {
        title: {
            text: '5.2.1.2 电影类型占比（绘制饼图）',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '70%',
              data: 
                getdate(url).result
              ,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]        
    }
    myChart.clear()
    option && myChart.setOption(option)
    myChart.hideLoading()
    myChart.on('click', function (params) {
        console.log(params.name+params.value)
    })
}
function set5213(myChart,ip)
{
    url="http://"+this.ip+":8080/movie/getgenresyear"
    var Data=new Array()
    var datalegend=new Array()
    var dataX=new Array()
    $.each(getdate(url).result,function(i,name){
        var datay=new Array()
        var moviename
        $.each(name,function(j,year){
            if(i==1) dataX[j]=year.time
            moviename=year.name
            datay[j]=year.value
        })
        datalegend[i]=moviename
        Data[i]={
            name: moviename,
            type: 'line',
            data:datay
        }
    })
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: datalegend
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dataX,
            axisLabel:{
                formatter:'{value} (年)'
            }            
        },
        yAxis: {
            type: 'value'
        },
        series: Data
    }
    myChart.clear()
    option && myChart.setOption(option)
    myChart.hideLoading()
    myChart.on('click', function (params) {
    console.log(params.name+params.value)
    })
}
function set5214(myChart,ip)
{
    url="http://"+this.ip+":8080/movie/getgenres"
    var mydataX=new Array()
    var mydataY=new Array()
    var mydataY2=new Array()
    $.each(getdate(url).result,function(i,b){
        mydataX[i]=b.name
        mydataY[i]=b.budget/100000000
        mydataY2[i]=b.revenue/100000000
    })
    var option = {
        dataZoom:{
            realtime:true, //拖动滚动条时是否动态的更新图表数据
            height:15,//滚动条高度
            start:0,//滚动条开始位置（共100等份）
            end:60//结束位置（共100等份）
        },                      
        title:{
            show:true,
            text:'5.2.1.4 不同电影类型预算/利润（绘制组合图）'
        },
        legend: {
                    data: ['预算', '利润']
        },  
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }    
        },        
        xAxis: {
            type: 'category',
            data: mydataX                
        },  
        yAxis: {
            type: 'value',
            axisLabel:{
                formatter:'{value} (亿)'
            }
        },    
        series: [
        {
            name: '预算',
            data:mydataY,
            type: 'bar',
            itemStyle: {
                normal: {
                     // 随机显示
                    color:'#55aaff'
                }        
            }
        },{
            name: '利润',
            data:mydataY2,
            type: 'bar',
            itemStyle: {
                normal: {
                     // 随机显示
                    color:'#ff557f'
                }        
            }
        }]
    }
    myChart.clear()
    option && myChart.setOption(option)
    myChart.hideLoading()
    myChart.on('click', function (params) {
        console.log(params.name+params.value)
    })
}
function set522(myChart,ip)
{
    url="http://"+this.ip+":8080/movie/getkeys"
    var option = {//词图云option
        title:{
            text:'词云',
            textStyle:{
                color:'#ffffff'
            }
        },tooltip : {
                
        },                            
        series:[{
            type:'wordCloud',
            //网格尺寸,尺寸越大，字体之间的间隔越大
            grideSize:4,
                                    
            //字体的最大与最小字号
            sizeRange:[15,30],
            
            //字体旋转的范围
            rotationRange:[45,90,135,-90],
            
            //词云形状 circle:圆形,pentagon:五边形
            //cardioid:苹果形或心形,star:星形,diamond:钻石,
            //triangle-forward:三角形,triangle:三角形,smooth:平滑
            shape:'pentagon',
            textStyle:{
                color:function(){
                    return 'rgb('+[
                        Math.round(Math.random()*255),
                        Math.round(Math.random()*255),
                        Math.round(Math.random()*255)
                    ].join(',')+')';
                },
                emphasis:{
                    //阴影距离
                    shadowBlur:1,
                    
                    //阴影颜色
                    shadowColor:'#aaff00'
                }
            },
            data:getdate(url).result
        }]                            
    }
    myChart.clear()
    option && myChart.setOption(option)    
    myChart.hideLoading()
}
function set531(myChart,ip)
{
    url="http://"+this.ip+":8080/movie/getruntime"
    var mydataX=new Array()
    var mydataY=new Array()
    $.each(getdate(url).result,function(i,b){
        mydataX[i]=b.name
        mydataY[i]=b.count
    })
    var option = {
        dataZoom:{
            realtime:true, //拖动滚动条时是否动态的更新图表数据
            height:15,//滚动条高度
            start:0,//滚动条开始位置（共100等份）
            end:70//结束位置（共100等份）
        },                      
        title:{
            show:true,
            text:'5.3.1 电影时长（绘制电影时长直方图）'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }    
        },        
        xAxis: {
            type: 'category',
            data: mydataX,
            axisLabel:{
                formatter:'{value} (分钟)'
            }            
        },  
        yAxis: {
            type: 'value'
        },    
        series: [
        {           
            data:mydataY,
            type: 'bar',
            itemStyle: {
                normal: {
                     // 随机显示
                    color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);},
                    label: {
                        show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 8
                            }
                        }                                
                }        
            }
        }]
    }
    myChart.clear()
    option && myChart.setOption(option)
    myChart.hideLoading()
    myChart.on('click', function (params) {
        console.log(params.name+params.value)
    })
}
function set532(myChart,ip,year)
{
    url="http://"+this.ip+":8080/movie/getmonthinfo?year="+year
    var mydataX=new Array()
    var mydataY=new Array()
    var mydataY2=new Array()
    $.each(getdate(url).result,function(i,b){
        mydataX[i]=b.time
        mydataY[i]=b.count
        mydataY2[i]=b.value/100000000
    })
    var option = {
        dataZoom:{
            realtime:true, //拖动滚动条时是否动态的更新图表数据
            height:15,//滚动条高度
            start:0,//滚动条开始位置（共100等份）
            end:60//结束位置（共100等份）
        },                      
        title:{
            show:true,
            text:'5.3.2 发行时间（绘制每月电影数量和单片平均票房）当前时间：'+year+"年"
        },
        legend: {
                    data: ['预算', '利润']
        },  
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }    
        },        
        xAxis: {
            type: 'category',
            data: mydataX                
        },  
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                    formatter:'{value} (亿)'
                },
                name: '平均票房'
            },
            {
              type: 'value',
              name: '数量'
            }
        ],    
        series: [
        {
            name: '数量',
            data:mydataY,
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                     // 随机显示
                    color:'#55aaff'
                }        
            }
        },{
            name: '平均票房',
            data:mydataY2,
            type: 'bar',
            itemStyle: {
                normal: {
                     // 随机显示
                    color:'#ff557f'
                }        
            }
        }]
    }
    myChart.clear()
    option && myChart.setOption(option)
    myChart.hideLoading()
    myChart.on('click', function (params) {
        var year
        layer.open({
         type:1,
         shade:0,
         area:['800px','200px'],
         title: '选择年份'
         ,content: $("#year")
         ,btn: ['提交']
         ,btn1: function(index, layero){
            year=$("#y").val()
            layer.closeAll();
            set532(myChart,ip,year)
         }
         ,success:function(layero){
            var mask = $(".layui-layer-shade");
            mask.appendTo(layero.parent());
         }
        })
        console.log(params.name+params.value)
    })
}

html代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/echarts.js" ></script>
<script src="js/echarts-wordcloud.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="event.js"></script>
<style type="text/css">
	#main{
		position: absolute;
		 1100px;
		height: 550px;
		border-style:solid;

		border-1px;
	}
</style>
<body>

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>观影大数据分析</legend>
	</fieldset>
	<div class="layui-col-md3" >
		<span id="test13" class="demo-tree-more"></span>
	</div>
	<div class="layui-col-md9" >
		<span id="main"></span>
		
	</div>
	<form class="layui-form" id="year" style="display:none" lay-filter="year">
		<div class="layui-form-item">
			<br>
			<div class="layui-form-item">
					<label class="layui-form-label">年份</label>
					<div class="layui-input-block">
						<input type="text" name="y" id="y" lay-verify="required"  placeholder="请输入年份例如:2016" autocomplete="off" class="layui-input">   
					</div>
			</div>
	</form>
</body>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
	var chartDom = document.getElementById('main');
	var ip="172.18.38.120"
	var myChart = echarts.init(chartDom);
	layui.use(['tree', 'util'], function(){
	  var tree = layui.tree
	  ,layer = layui.layer
	  ,util = layui.util
	  //模拟数据
	  ,data1 = [{
		title: '5.2 What'
		,id: 1
		,children: [{
		  title: '5.2.1.1 电影类型数量（绘制条形图）'
		  ,id: 5211
		},{
		  title: '5.2.1.2 电影类型占比（绘制饼图）'
		  ,id: 5212
		},{
		  title: '5.2.1.3 电影类型变化趋势（绘制折线图）'
		  ,id: 5213
		},{
		  title: '5.2.1.4 不同电影类型预算/利润（绘制组合图）'
		  ,id: 5214
		},{
		  title: '5.2.2 电影关键词（keywords 关键词分析，绘制词云图）'
		  ,id: 522
		}]
	  },{
		title: '5.3 Why'
		,id: 1
		,children: [{
		  title: '5.3.1 电影时长（绘制电影时长直方图）'
		  ,id: 531
		},{
		  title: '5.3.2 发行时间（绘制每月电影数量和单片平均票房）'
		  ,id: 532
		}]
	  }]
	  //无连接线风格
	  tree.render({
		elem: '#test13'
		,data: data1
		,showLine: false  //是否开启连接线
		,click: function(obj){
			on(obj.data.id,myChart,ip)
			}
	  });
	  
	});
</script>

</body>
</html>