Echarts数据可视化第11章 Echarts高级功能 11.2 数据的异步加载

偏执的太偏执、 2024-03-25 20:46 30阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第11章 Echarts高级功能
         *   *  11.2 数据的异步加载

> Echarts数据可视化：入门、实战与进阶

#### 第11章 Echarts高级功能 ####

##### 11.2 数据的异步加载 #####

很多时候，我们的数据并不是在option 初始化的时候就填入的，而是在初始化option 模板设置好后，需要数据时异步加载进去的。

简单通过设置超时异步，来模拟一下异步加载数据到option

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>异步加载</title>
        
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        function getData(e) {
          
            // 通过 setTimeout 模拟异步加载，设置加载时间为2秒
            setTimeout(function () {
          
                e({
          
                    categories: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品'],
                    data: [
                        {
          value: 343, name: 'A商品'},
                        {
          value: 250, name: 'B商品'},
                        {
          value: 509, name: 'C商品'},
                        {
          value: 108, name: 'D商品'},
                        {
          value: 948, name: 'E商品'}
                    ]
                });
            }, 2000);
        }
    
        // 初始化option
        option = {
          
            title: {
          
                text: '各商品销量占比',
                subtext: 'A商场情况分析',
                left: 'center'
            },
            tooltip: {
          
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
          
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
          
                    name: '所售商品',
                    type: 'pie',
                    data: [],
                }
            ]
        };
    
        myChart.showLoading(); // 显示加载动画
    
        getData(function (data) {
           // 异步加载数据
            myChart.hideLoading(); // 数据加载完成后隐藏动画
            myChart.setOption({
          
                legend: {
          
                    data: data.categories
                },
                series: [{
          
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: data.data
                }]
            });
        });
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

浏览器渲染效果

![在这里插入图片描述][4838c58702774a5c91eef85db101e655.gif_pic_center]

OK，就是这样。

[4838c58702774a5c91eef85db101e655.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ef7d59eaf85145f6b074d241ff7b09b9.png