【Vue基础-数字大屏】加载动漫效果

柔情只为你懂 2024-02-22 06:32 138阅读 0赞

**一、需求描述**

当网页正在加载而处于空白页面状态时，可以在该页面上显示加载动画提示。

**二、步骤代码**

1、全局下载npm install -g json-server

npm install -g json-server

2、在src目录下新建文件夹mock，新建文件data.json存放模拟数据

![ddd5104859de4114893395b55b34d4be.png][]

{
        "one":[
            { 
                    "value": 67, 
                    "name": "美食",
                    "itemStyle":{
                         "normal":{ 
                            "color":"rgb(132,112,255)"
                         } 
                                }  
                },
                {  
                    "value": 85, 
                    "name": "服饰" ,
                    "itemStyle":{
                         "normal":{ 
                            "color":"rgb(34,139,34)"
                         }
                                }
                },
                { 
                    "value": 45, 
                    "name": "数码",
                    "itemStyle":{
                         "normal":{ 
                            "color":"rgb(0,206,209)"
                         }
                                }
            }, 
                { 
                    "value": 98, 
                    "name": "家电" ,
                    "itemStyle":{
                         "normal":{ 
                            "color":"rgb(255,127,0)"
                         }
                                }
            } 
        ]
    }

3、在mock目录下启动json-server

json-server --watch data.json --port 8888

4、下载数据请求内容npm install --save axios

npm install --save axios

如果加载缓慢，先更换npm的安装镜像源为国内的：

npm config set registry https://registry.npm.taobao.org

可查看镜像是否安装：

npm config get registry

5、启动项目

npm run dev

![d39c85b81d504ec49c1e854b8544bf5a.png][]

<template> 
        <div ref="myChart" id="myChart"></div>
    </template>
    <script>
    import * as echarts from "echarts"
    import axios from "axios"
    export default { 
         data(){
             return {
                 eData:[]
             }
         },
        methods:{
            async linkData(){
                let echarsdata=await axios({url:"http://localhost:8888/one"})
                console.log(echarsdata)
                this.eData=echarsdata.data
            }
        },
        mounted(){
    
            let myChart=echarts.init(this.$refs.myChart) // 2.设置echarts数据  
    
            //开始等待
            myChart.showLoading()
            //请求完毕再渲染
            this.linkData().then(()=>{
    
            //结束等待
            myChart.hideLoading()   
    
            //3.设置配置项   
    
            let option={
                title: {
                    text: '饼状图', 
                    subtext: '基本设置',
                    left: 'center'//设置位置居中 
                    },
                tooltip: {
                    trigger: 'item'//触发类型item数据项图形触发 
                }, 
                legend: {
                    orient: 'vertical',//图例列表的布局朝向vertical纵向    
                    left: 'left' 
                },
                series: [ 
                        { 
                        name: '销售量', 
                        type: 'pie',//饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。          
                        radius: ['40%', '70%'], //饼图的半径。数组的第一项是内半径，第二项是外半径。
                        // 设置环形图      
                        label: {
                            //饼图图形上的文本标签        
                            show: true, 
                            position:"inside",//outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置        
                            color:"yellow"
                         }, 
                        labelLine: {//标签的视觉引导线配置        
                            show: false 
                        }, 
                        roseType: 'area',//是否展示成南丁格尔图，通过半径区分数据大小       
                        itemStyle: {//设置内容样式        
                            color: '#c23531', 
                            shadowBlur: 200, 
                            //shadowColor: 'rgba(0, 0, 0, 0.5)' 
                            shadowColor: 'rgba(255,193,37,0.5)'
                         }, 
                        data:this.eData
                        //data
                     } ] 
                     }
                        // 4.设置图表绘制图表 
                    myChart.setOption(option) 
                    
                
    
            })
    
    
            //1.初始化
            // let data=[
            //     { 
            //         value: 67, 
            //         name: '美食' ,
            //         itemStyle:{
            //              normal:{ 
            //                 color:'rgb(132,112,255)'//香芋紫
            //              } 
            //                     }  
            //     },
            //     { value: 85, 
            //         name: '服饰' ,
            //         itemStyle:{
            //              normal:{ 
            //                 color:'rgb(34,139,34)'//暗绿色
            //              }
            //                     }
            //     },
            //     { value: 45, name: '数码' ,
            //         itemStyle:{
            //              normal:{ 
            //                 color:'rgb(0,206,209)'//湖蓝色
            //              }
            //                     }
            // }, 
            //     { value: 98, name: '家电' ,
            //         itemStyle:{
            //              normal:{ 
            //                 color:'rgb(255,127,0)'//湖蓝色
            //              }
            //                     }
            // } 
            // ]
            
                }
            }
            
    </script>
    <style>
        #myChart{ 
            width: 500px; 
            height: 500px; 
            border: 1px solid red;
            }
    </style>

其中，在渲染完毕前后引用showLoading和hideLoading实现加载动漫效果

//开始等待
    myChart.showLoading()
            
    //请求完毕再渲染
    this.linkData().then(()=>{
    //结束等待
    myChart.hideLoading()
    
    //略

**三、效果展示**

1、

![94a576ca563f493180ad9171e139579e.png][]

获取到上图的数据自动加载到下图中

![143effa156b0412292e5e23a5c7b1308.png][]

2、加载动漫效果

![1a43a382de56486dad57c7894cabfba5.png][]

网页设置网速方法：

![54d81638c77b4835bed01191c9e199a3.png][]

3、页面渲染效果

![03893ecb0d164e2d8f26795622d1791f.png][]

**四、学习链接**

1、加载动画效果[https://www.bilibili.com/video/BV14u411D7qK/?p=38&spm\_id\_from=pageDriver&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV14u411D7qK_p_38_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]

2、遇到的问题及解决方法[https://blog.csdn.net/qq\_42294095/article/details/133807195?spm=1001.2014.3001.5501][https_blog.csdn.net_qq_42294095_article_details_133807195_spm_1001.2014.3001.5501]

[ddd5104859de4114893395b55b34d4be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/227c36bc507142e7aceb043fe16f5095.png
[d39c85b81d504ec49c1e854b8544bf5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/d2ccf3de1dc94199a6473a22c9563faa.png
[94a576ca563f493180ad9171e139579e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/626835b3dd0e47af9dc8e3136a3deaa7.png
[143effa156b0412292e5e23a5c7b1308.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/30656a278a2d4861b201f3647117af83.png
[1a43a382de56486dad57c7894cabfba5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/6e506269124f4c4eb656383c60d5776e.png
[54d81638c77b4835bed01191c9e199a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/5d788c4481a64117b373cf931ad4265d.png
[03893ecb0d164e2d8f26795622d1791f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/736814cb9c934203a689baf284bc5847.png
[https_www.bilibili.com_video_BV14u411D7qK_p_38_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV14u411D7qK/?p=38&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50
[https_blog.csdn.net_qq_42294095_article_details_133807195_spm_1001.2014.3001.5501]: https://blog.csdn.net/qq_42294095/article/details/133807195?spm=1001.2014.3001.5501