大数据可视化可爱教主波奇酱

贺知煜

已于 2024-04-25 20:45:58 修改

阅读量136

点赞数 1

文章标签：信息可视化

于 2024-04-25 15:44:12 首次发布

本文链接：https://blog.csdn.net/a040607/article/details/138190839

版权

第一种.没有外部数据,直接把数据写进setOption

第二种.有外部数据,表是在同级目录下,get(写入表名)

六.加载动画

一.代码实现图

静态效果

动态效果一

动态效果二

二.实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--主题样式-->
<script src="js/echarts521.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/macarons.js"></script>
<script src="js/dark.js"></script>
<script src="js/essos.js"></script>
<!--主题样式-->

<style>/*div间隔与横向联动设置*/
    .c1 {
        background-image: url('image/01.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #selection {
        background: linear-gradient(45deg, rgb(212, 145, 145,0.5),  rgb(238, 130, 238));
        color: rgb(185, 117, 129);/*设置选择框中文字的颜色为粉色*/
        border: 3px solid gray;/*边框样式*/
        border-color: rgba(198, 112, 209, 0.8);
        border-radius: 10px; /* 设置边框的圆角半径，值为选择框高度的一半 */
        padding: 0px;/*设置选择框内部的内边距为5像素*/
        font-size: 16px;/* 设置选择框中文字的字体大小为16像素*/
        cursor: pointer;/*设置指针悬停在选择框上时的鼠标样式为手型*/
    }
</style>

</head>


<body>
    
    <!-- 盒子 -->
    <div class="c1" style="width: 600px;height: 800px;">
        <div><!-- 下拉列表 -->
            <select id="selection">
                <option value="macarons">macarons</option>
                <option value="essos">essos</option>
                <option value="dark">dark</option>
                <option value="echarts521">还原</option>
            </select>
        </div><!-- 下拉列表 -->
        <div id="a1" style="width: 600px;height: 400px;"></div>
        <div id="a2" style="width: 600px;height: 400px;"></div>
    </div>
    <!-- 盒子 -->



    <script type="text/javascript">
 // 水印
    var name="liushuai";
    var canvas=document.createElement('canvas');
    var ctx=canvas.getContext('2d');
    canvas.width=canvas.height=100;
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.globalAlpha=0.08;
    ctx.font='10px Microsoft Yahei'
    ctx.translate(50,50)
    ctx.rotate(-Math.PI/4)
    ctx.fillText(name,0,12);
// 水印



    var myChar1=echarts.init(document.getElementById('a1'));
    var myChar2=echarts.init(document.getElementById("a2"));
   
    myChar1.setOption({})

    myChar1.showLoading({
        text:'请稍等片刻',
        effect:'bubble',
        icon:'图例',
        maskColor:'white'

    }); 

    myChar1.setOption({  
        color:['#6A0DAD','#FFFACD','#87CEFA','#FFA500','#808080'],
        backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},//水印
        title:{               //标题
            text:'院校历年招生',
        },
        tooltip:{
            trigger:'axis',
            textStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2,
            },
        },
        legend:{              //图例组件
            data:['普招计划','网报人数'],
        },
        toolbox:{
            show:true,
            feature:{
                mark:{show:true},
                DataView:{sho:true,readOnly:false},
                magicType:{show:true,type:['line','bar']},
                restore:{show:true},
                saveAsImage:{show:true},
            },
        },
        xAxis:[
        {
            type:'category',
            data:['2024(29.59%)','2023(24.17%)','2022(32.19%)','2021(41.58%)','2020(51.33)'],

        },
        ],
        yAxis:[
        {
            type:'value',
            boundaryGap:[0,0.4],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
        },
        ],
        dataZoom:[//区域缩放组建
            {
                type:'inside',
                show:true,
                start:0,//开始位置
                end:100,//结束位置
            }
        ],
        series:[
        {
            name:'普招计划',
            type:'bar',
            data:[501,886,1008,867,1023],
        },{
            name:'网报人数',
            type:'bar',
            data:[1695,3665,3131,2085,1993],
        },
        ],
      }
  )
  setTimeout(function(){
    myChar1.hideLoading();
  },1000);
    





//  myChar2.setOption({})
 myChar2.showLoading({
        text:'请稍等片刻',
        effect:'bubble',
        color:'red',
        maskColor:'white'

    });
//  异步加载
 myChar2.setOption({ 
        color:['#6A0DAD','#FFFACD','#87CEFA','#FFA500','#808080'],
        backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
        title:{               //标题
            text:'2022年湖北师范大学招生计划(普通考生)',
        },
        tooltip:{
            trigger:'item',
            formatter:"{a}<br/>{b}:{c}({d}%)",//文本布局
            
        },
        legend:{   
            type:'scroll',
            height :40,           //图例组件
            x:10,
            y:30,
            // borderWidth:1,
             width:150,
            data:['学前教育','小学教育','国际经济与贸易','社会工作','社会体育指导与管理'],
        },
        series:[
            {   
                cursor:'crosshair',//设置经过扇区鼠标形状为十字
                legendHoverLink:false,//是否启用图例 hover 时的联动高亮
                name:'普通考生',
                type:'pie',
                radius:'66%',//饼图的半径。
                //max:10,
                // radius:['50%','60%'],//饼图的半径。可以为如下类型
                itemStyle:{
                    normal:{
                        labelLine:{
                            show:true,
                            length:20,
                            lineStyle:{
                                width:1
                            }
                        }
                    }
                },
                center:['58%','55%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                clockWise:true,//饼图的扇区是否是顺时针排布
                data:[
                    {value:75,name:'学前教育'},
                    {value:54,name:'小学教育'},
                    {value:25,name:'国际经济与贸易'},
                    {value:38,name:'社会工作'},
                    {value:29,name:'社会体育指导与管理'},
                ]
            }
        ]
      })
 
    setTimeout(function(){
    myChar2.hideLoading();
  },1000);
//主题切换
 $('#selection').change(function(){
    myChar1.dispose();
    let yourtheme=$(this).val();
    myChar1=echarts.init(document.getElementById('a1'),yourtheme);
    myChar1.setOption({  
        color:['#6A0DAD','#FFFACD','#87CEFA','#FFA500','#808080'],
        backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},//水印
        title:{               //标题
            text:'院校历年招生',
        },
        tooltip:{
            trigger:'axis',
            textStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2,
            },
        },
        legend:{              //图例组件
            data:['普招计划','网报人数'],
        },
        toolbox:{
            show:true,
            feature:{
                mark:{show:true},
                DataView:{sho:true,readOnly:false},
                magicType:{show:true,type:['line','bar']},
                restore:{show:true},
                saveAsImage:{show:true},
            },
        },
        xAxis:[
        {
            type:'category',
            data:['2024(29.59%)','2023(24.17%)','2022(32.19%)','2021(41.58%)','2020(51.33)'],

        },
        ],
        yAxis:[
        {
            type:'value',
            boundaryGap:[0,0.4],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
        },
        ],
        dataZoom:[//区域缩放组建
            {
                type:'inside',
                show:true,
                start:0,//开始位置
                end:100,//结束位置
            }
        ],
        series:[
        {
            name:'普招计划',
            type:'bar',
            data:[501,886,1008,867,1023],
        },{
            name:'网报人数',
            type:'bar',
            data:[1695,3665,3131,2085,1993],
        },
        ],
      }
  );
    myChar1.resize();//图表自适应窗口大小
})
//主题切换

// 多表联动
echarts.connect([myChar1, myChar2]);
// 多表联动

//触发
 myChar2.on('click',function(params){
    window.alert('不要乱点:'+params.name)
    window.alert('DDDD'+params.name)//提示框
    window.open('https://www.baidu.com');//链接
});
//触发


//交互触发
myChar1.on('datazoom',function(params){
    console.log(params)//打印params
    var startValue=myChar1.getModel().option1.dataZoonm[0].startValue;
    var endValue=myChar1.getModel().option1.dataZoonm[0].endValue;
    var startPercent=myChar1.getModel().option1.dataZoonm[0].start;
    var endPercent=myChar1.getModel().option1.dataZoonm[0].end;
    console.log(startPercent,startValue,endPercent,endValue);
    option1.dataZoom[0].start=startPercent;
    option1.dataZoom[0].end=endPercent;
})
//交互触发

//自动循环动画效果
// 自动循环动画效果
var isSet = true; // 是否启动循环标志
var currentIndex = -1; // 当前高亮的索引

function charHover() {
    var dataLen = myChar2.getOption().series[0].data.length; // 获取数据长度
    myChar2.dispatchAction({
        type: 'downplay', // 取消之前高亮显示的图
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    myChar2.dispatchAction({
        type: 'highlight', // 高亮显示当前图型
        seriesIndex: 0,
        dataIndex: currentIndex
    });
    myChar2.dispatchAction({
        type: 'showTip', // 显示tooltip
        seriesIndex: 0,
        dataIndex: currentIndex
    });
}

// 启动自动循环动画效果
var startCharts = setInterval(charHover, 1000);

// 鼠标移入暂停动画效果
myChar2.on('mouseover', function(param) {
    isSet = false; // 停止自动循环标志
    clearInterval(startCharts); // 清除自动循环定时器
    myChar2.dispatchAction({
        type: 'downplay', // 取消之前高亮显示的图
        seriesIndex: 0,
        dataIndex: param.dataIndex
    });
    currentIndex = param.dataIndex; // 更新当前索引
    myChar2.dispatchAction({
        type: 'highlight', // 高亮显示当前图型
        seriesIndex: 0,
        dataIndex: param.dataIndex
    });
    myChar2.dispatchAction({
        type: 'showTip', // 显示tooltip
        seriesIndex: 0,
        dataIndex: param.dataIndex
    });
});

// 鼠标移出恢复自动循环动画效果
myChar2.on('mouseout', function() {
    if (!isSet) {
        startCharts = setInterval(charHover, 1000); // 重新启动自动循环定时器
        isSet = true; // 恢复自动循环标志
    }
});

window.addEventListener("resize",function(){
    myChar1.resize();
    //图表自适应窗口大小
});




 </script>
 </body>
 </html>