echarts异步数据加载和动画加载

大数据三班罗健

已于 2024-05-15 17:14:08 修改

阅读量200

点赞数 2

文章标签：前端

于 2024-05-15 17:13:36 首次发布

本文链接：https://blog.csdn.net/2301_80975885/article/details/138915588

版权

异步数据加载：

myChart.showLoading();

$.get("咖啡店各年订单.json",function(data){

组件设置，数据之类的都包在mychart.setOption里

调用json文件里的data数据

设置动画时间setTimeout()函数（1000就是动画设置为1秒）

加载数据完成后，隐藏加载动画 myChart.hideLoading();

完整代码如下：

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
        <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
 
        <title></title>
 
       
 
    </head>
 
    <body>
 
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 
    <div id="main" style="width: 600px;height:400px;"></div>
 
    <script type="text/javascript">
 
        // 基于准备好的dom，初始化echarts实例
 
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.get("咖啡店各年订单.json",function(data){
        myChart.setOption({
        		 title: {
                     text: '咖啡店年销',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 legend: {
                     data: ['2012年','2013年', '2014年', '2015年', '2016年', '2017年'],
                 },
                 toolbox: {
                     show: true,
                     feature: {
                         mark: { show: true },
                         dataView: { show: true, readOnly: false },
                         magicType: { show: true, type: ['line', 'bar'] },
                         restore: { show: true },
                         saveAsImage: { show: true },
                     },
                 },
                 calculable: true,
 
        
 
        // 指定图表的配置项和数据
 
      
            	
            	series: [
            		{          
 					name:'咖啡年销量',
                    type:'pie',
                    radius:'66%',
                    center:['58%','55%'],
                    colockWise:true,
                    data:data.data
                }
            ]
                 	
        });
 	
    });
 
 
     
        setTimeout(function(){
              myChart.hideLoading();
        
        },1000)
      
 
 
    </script>
 
</body>
 
</html>

如果需要在谷歌浏览器中运行则需要更改浏览器设置

在属性里添加这一段 --allow-file-access-from-files

效果如下:

大数据三班罗健

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts异步数据加载和动画加载

.get("咖啡店各年订单.json",function(data){在属性里添加这一段 --allow-file-access-from-files。加载数据完成后，隐藏加载动画 myChart.hideLoading();设置动画时间setTimeout()函数（1000就是动画设置为1秒）组件设置，数据之类的都包在mychart.setOption里。如果需要在谷歌浏览器中运行则需要更改浏览器设置。调用json文件里的data数据。
复制链接

扫一扫