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

Hadint。

已于 2024-04-25 11:12:55 修改

阅读量460

点赞数 9

文章标签： echarts 前端 javascript

于 2024-04-25 11:04:47 首次发布

本文链接：https://blog.csdn.net/h_adint/article/details/138181166

版权

本文介绍了如何使用jQuery库进行异步数据加载，配合ECharts创建柱状图，展示了如何在HTML页面中动态加载并显示咖啡店各年订单数据的过程，以及在Chrome中设置文件权限的注意事项。

摘要由CSDN通过智能技术生成

1.使用异步数据加载要使用到———jquery.js文件

导入jquery.js文件

2.显示加载动画

3.使用 jQuery 的 `$.get()` 函数发送了一个 get请求，从服务器异步获取了数据文件 "咖啡店各年订单.json"

4.隐藏加载动画

5.代码部分

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
</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({
        text:"加载", // 加载时显示的文本
        color:'red', // 加载动画的颜色
        maskColor:'skyblue', // 加载动画的背景色
        });

       


    $.get("咖啡店各年订单.json").done(function(res){
    // 数据加载成功后的回调函数
    myChart.setOption({
        title:{text:'异步数据记载'}, // 设置图表标题
        tooltip:{}, // 设置提示框
        xAxis:{ // 设置 X 轴
            data:res.product // 使用获取的数据中的产品数据作为 X 轴数据
        },
        yAxis:{}, // 设置 Y 轴
        legend:{}, // 设置图例
        series:[{ // 设置系列数据
            name:'销量', // 系列名称
            type:'bar', // 柱状图类型
            data:res.values1 // 使用获取的数据中的销量数据作为柱状图数据
                }],
            })
        },'json');

       // 使用 setTimeout() 函数延迟一秒后执行匿名函数，
        setTimeout(function() {
            myChart.hideLoading();//在匿名函数中调用 hideLoading() 函数隐藏加载动画，表示数据加载完成。
        }, 1000);

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

6.效果展示

1.在Google Chrome浏览器展示为例

需要在——属性——目标加 --allow-file-assess-from-files 这行代码

以允许从文件中访问其他文件（如 JSON 文件）

2.效果

QQ录屏20240425110204

Hadint。

关注

9
点赞
踩
6

收藏

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

需要在——属性——目标加 --allow-file-assess-from-files 这行代码。以允许从文件中访问其他文件（如 JSON 文件）1.在Google Chrome浏览器展示为例。导入jquery.js文件。
复制链接

扫一扫