zoukankan      html  css  js  c++  java
  • 学习Echarts:(二)异步加载更新

      这部分比较简单,对图表的异步加载和更新,其实只是异步获取数据然后通过setOption传入数据和配置而已。

    $.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]
            }]
        });
    });
    View Code

    官方虽然给的jquery方法示例,但我们可以用原生ajax或fetch等,这部分跟异步方式没关系,只要在回调中或promise的.then()中再次调用setOption刷新图标即可。

    异步任务总会涉及一个问题,就是请求结果返回之前,我们的界面该显示什么?

    1.显示空图表

    官方给出的一种方案是先显示空的图标表,等数据返回后再填充图表。

    // 显示标题,图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });
    
    // 异步加载数据
    $.get('data.json').done(function (data) {
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                data: data.data
            }]
        });
    });
    View Code

    2.loading动画 

    ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
    
    myChart.showLoading();
    $.get('data.json').done(function (data) {
        myChart.hideLoading();
        myChart.setOption(...);
    });
    View Code
  • 相关阅读:
    .net SMTP发送Email 更新(可带附件)
    Ext JS4百强应用: 做可编辑的,可checked的treegrid--第11强
    使你更有思想的20本书
    Sencha Architect 2 的使用
    Test SRM Level One: TemperatureScales
    Test SRM Level Two: CountExpressions, Brute Force
    JPDA 利用Eclipse和Tomcat进行远程调试 --转
    非对称加密算法RSA--转
    java/php/c#版rsa签名以及java验签实现--转
    JAVA/PHP/C#版RSA验签--转
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7842623.html
Copyright © 2011-2022 走看看