异步载数据

ECharts 异步加载数据

概述

在之前的例子中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

json

我们以使用json 数据为例

效果图

data.json 数据格式

{
"data_pie" : [
{"value":235, "name":"视频广告"},
{"value":274, "name":"联盟广告"},
{"value":310, "name":"邮件营销"},
{"value":335, "name":"直接访问"},
{"value":400, "name":"搜索引擎"}
]
}

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <script src=" jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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'));
        $.get('data.json', function (data) {
            myChart.setOption({
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:data.data_pie
                    }
                ],
    title: {
    text:'树懒课堂流量访问来源统计图',
    subtext:'纯属虚构',
    }
            })
        }, 'json')
    </script>
</body> 
</html>

异步加载的等待动画

概述

异步加载需要一段时间
如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。
我们可以添加 loading 效果，ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画

效果图

等待提示

等待动画

等待完成后出现的图表

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <script src="jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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();  // 开启 loading 效果

        $.get('data.json', function (data) {
            alert("可以看到 loading 字样。"); // 测试代码，用于查看 loading 效果
   myChart.hideLoading();  // 隐藏 loading 效果
   myChart.setOption({
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:data.data_pie
                    }
                ] ,
   title:{
    text:"树懒课堂访问来源分析",
    subtext:'数据纯属虚构',
    }
            })
        }, 'json');
    </script>
</body>

其他样式设置数据的动态更新

评论区（0）

异步载数据

ECharts 异步加载数据

概述

json

效果图

data.json 数据格式

代码

异步加载的等待动画

概述

效果图

评论 取消

评论取消