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

简单来说，就是动态的往option里面添加数据
因为要使用到jQuery和echarts，所以要引入

在这里插入图片描述

往坐标轴中动态添加数据

可以先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。
先构建一个空的坐标轴：

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        //初始化option，先显示一个空的坐标轴
		option = {
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
        myChart.setOption(option);
    </script>
</body>

在这里插入图片描述
添加数据：

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        //初始化option，先显示一个空的坐标轴
        option = {
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };
        //fetchData 中的参数是一个匿名方法，参数就是
        fetchData(function (data) {
            myChart.setOption({
                xAxis: {
                    data: data.categories //设置x轴的值
                },
                series: [{
                    name: '销量',// 根据名字对应到相应的系列
                    data: data.data //第一个data是下面的cb，相当于cb.data
                }]
            });
        });
        
        //定义函数fetchData,传入参数cb
        function fetchData(cb) {
            // 通过 setTimeout 模拟异步加载
            //function(){...} 是一个函数表达式（即匿名函数）
            setTimeout(function () {
                cb({
                    categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                    data: [5, 20, 36, 10, 10, 20]
                });
            }, 1000);//1s后给cb赋值
        }   
        myChart.setOption(option);
    </script>
</body>

分析：
通过代码可以看到，option里面的东西都是固定，
代码的核心就在fetchData 函数中，而通过fetchData函数中的核心就是setTimeout函数。
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
如果将setTimeout() 中的函数表达式后面的1000改为10000，那么就会再10s后再显式数据。
代码中的意思是1s后给cb赋值

这里有一个我刚开始很疑惑的地方：
fetchData中的参数是cb,为什么调用fetchData时却是匿名函数

fetchData(function (data) {...});

有点想不通，等我js学的好一点再来解释。

读取json文件

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

不知道有没有人和我一样，不知道这个

$.get(...).done(....);

是什么意思，这里其实用到了Ajax，
从‘data.json’ 中读取的数据返回到了data 中，

loading

如果异步加载需要一段时间，我们可以添加 loading 效果，ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。
数据加载完成后再调用 hideLoading 方法隐藏加载动画：

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

数据的动态更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption 实现，
你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

官网的教程感觉好麻烦，我给简化了一下：

代码

<!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">
        var date = [];//x轴的数据
        var data = [100];//y轴的数据，100表示y轴的初始值是100
        var xadd = 1;//x轴的每次增量是100

        function addData(shift) {
            date.push(xadd);//date是x轴的数据集
            data.push(1 + data[data.length - 1]);//data 是y轴的数据集

            if (shift) {
                date.shift();//移除date中的第一个元素
                data.shift();//移除data中的第一个元素
            }
            xadd  += 1;//xadd加一，下一次调用addData的时候，会将xadd 的值加入date中
        }

        for (var i = 1; i < 100; i++) {
            addData();//初始化data和date
        }

        option = {
            xAxis: {
                type: 'category',   //设置x轴为类目轴
                boundaryGap: false,
                data: date //
            },
            yAxis: {
                boundaryGap: [0, '50%'],
                type: 'value'//设置y轴为值轴
            },
            series: [
                {
                    name:'成交',
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    stack: 'a',
                    areaStyle: {
                        normal: {}
                    },
                    data: data
                }
            ]
        };

        setInterval(function () {
            addData(true); //调用addData，参数为true说明每调用一次addData会将date，data的首元素移除
            myChart.setOption({//设置option
                xAxis: {
                    data: date//x轴的值对应date数组中的值
                },
                series: [{
                    name:'成交',
                    data: data//y轴的值对应data数组中的值
                }]
            });
        }, 500);//每隔500ms执行一次方法体中的方法。
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    </script>
</body>

代码分析：

这个代码我刚开始也没看懂什么意思，因为js基础不是很好，而且这个和Java，C有一些区别，理解起来稍有难度。下面是我的思路，可以帮助理解一下。

addData(shift) 就是每调用一次该方法，x轴的数据+1，y轴的数据加上(1 + data[data.length - 1])，push方法就是往集合中添加元素。而每调用一次addData，添加元素的同时也会移除数据集合中的第一个元素，这样就形成了一种平移的效果。shift 就是移除数组中的第一个元素
for (var i = 1; i < 100; i++) { addData();}
我刚开始不太理解这段代码什么意思，后来才知道这一段代码是为了向data，和date中添加数据，就相当于初始化data和date，为其赋值。改变的只是刚开始显式的数据，并不会对变化过程造成影响。
setInterval(function () {…}, 500);
前面的代码理解起来都比较简单，难点就在这里了，案例的核心也在这里。其实也不难，只要弄懂了原理就很简单，
setInterval和前面的setTimeout类似。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
所以这段代码的意思就是每隔500ms，执行一次addData。

下面是官网的代码：

var base = +new Date(2020, 9, 3);//x初始值
var oneDay = 24 * 3600 * 1000;//一天的时间
var date = [];//x轴数据

var data = [100];//时间
var now = new Date(base);

function addData(shift) {
    //改变y轴数据
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);//将上一个结果增加一个随机值
    data.push(100 + data[data.length -1]);//每一次在循环中使用addData，添加一次y轴的数据
    if (shift) {
        date.shift();
        data.shift();
    }

    //改变x轴数据
    //将now转化为时间的形式
    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
    date.push(now);//每调用一次adduser，将更新一次时间
    now = new Date(+new Date(now) + oneDay);//将时间加一天
}

for (var i = 1; i < 30; i++) {
    addData();
}

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        boundaryGap: [0, '50%'],
        type: 'value'
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};

setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date//x轴的数据是数据
        },
        series: [{
            name:'成交',
            data: data//y轴的数据是时间
        }]
    });
}, 500);

动态的正弦图

将上面的例子修改一下，就变成了一个正弦图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var date = [];//x轴的数据
        var data = [100];//y轴的数据，100表示y轴的初始值是100
        var xadd = 1;//x轴的每次增量是100

        function addData(shift) {
            date.push(xadd);//date是x轴的数据集
            data.push(Math.sin(xadd));//data 是y轴的数据集

            if (shift) {
                date.shift();//移除date中的第一个元素
                data.shift();//移除data中的第一个元素
            }
            xadd  += 1;//xadd加一，下一次调用addData的时候，会将xadd 的值加入date中
        }

        for (var i = 1; i < 5; i+=0.1) {
            addData();//初始化data和date
        }

        option = {
            xAxis: {
                type: 'category',   //设置x轴为类目轴
                boundaryGap: false,
                data: date //
            },
            yAxis: {
                boundaryGap: [0, '50%'],
                type: 'value'//设置y轴为值轴
            },
            series: [
                {
                    name:'成交',
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    stack: 'a',
                   
                    data: data
                }
            ]
        };

        setInterval(function () {
            addData(true); //调用addData，参数为true说明每调用一次addData会将date，data的首元素移除
            myChart.setOption({//设置option
                xAxis: {
                    data: date//x轴的值对应date数组中的值
                },
                series: [{
                    name:'成交',
                    data: data//y轴的值对应data数组中的值
                }]
            });
        }, 100);//每隔500ms执行一次方法体中的方法。
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    </script>
</body>

加载出来是有动态效果的
在这里插入图片描述

ECharts 异步加载数据详解