创新互联ECharts教程：ECharts实现异步数据加载和更新

Echarts 实现异步数据加载

我们在入门第一课中是在初始化后的 setOption 中直接填入数据的，但大部分的时候我们需要将数据异步加载后再填入。那么怎么实现？

荆门网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联公司从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

ECharts 中实现异步数据的更新的操作不难，在初始化图表后的任何时间通过使用 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项即可，操作如下：

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]
        }]
    });
});

还有一种方法是先设置好别的样式，显示出一个空的直角坐标轴，然后获取并填入数据，操作如下：

效果显示如下：

点击编辑实例 》》

ECharts 中通过 name 属性在更新数据的时候对应到相应的系列。

上面示例中如果 name 不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的 name 数据。

Echarts 设置 loading 动画

有时候由于各种原因，数据的加载会需要较多的时间，这样一个空白的直角坐标系会让用户认为出现 bug 了，为了避免这种错觉，我们需要使用 loading 动画给用户一些提示。

利用 Echarts 提供的加载动画，我们通过调用 showLoading 方法显示加载动画，当数据加载完成后再调用 hideLoading 方法将加载动画隐藏。

具体操作如下：

设置完效果如下：

数据为加载完成，显示加载动画：

Echarts 实现数据的动态更新

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

Echarts 中通过 setOption 更新所有的数据，我们要做的只是定时获取数据，然后使用 setOption 填入数据，至于数据在过程中发生了哪些变化，不在我们的考虑范围内。

ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption

具体可以看下面示例：

网站名称：创新互联ECharts教程：ECharts实现异步数据加载和更新
网站URL：http://www.hantingmc.com/qtweb/news36/398436.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联