echarts异步数据加载(在下拉框选择事件中异步更新数据)

接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了。在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载数据,在实际的工作的中对数据的刷选非常常见,比如在下拉框中选择,时间选择等的一些事件中异步加载数据。一个很常见的筛选如图:

下面我就直接用代码来实现怎样在事件刷选中异步刷新数据

 //路径配置
    require.config({
        paths: {
            echarts: "/Scripts/echarts-2.2.7/build/dist"
        }
    });
    var MYCHART;  //声明一个大写的全局变量,能不用全局的尽量就不要用全局变量
    //使用
    require(['echarts',      
        'echarts/chart/bar'],  //按需加载
        function (ec)
        {
            //实例dom
             MYCHART = ec.init(document.getElementById("main"));
            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data: ['得分']
                },
                xAxis: [
                    {
                        type: "category",
                        data:['']
                      //  data:["科比", "欧文", "詹姆斯", "库里", '杜兰特', '威少', '韦德']
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        "name": "得分",
                        "type": "bar",
                         data:['']
                         //data:[20102, 2000, 1200, 1002, 1204, 4545, 7878]
                    }
                ]
            }
            console.info(MYCHART);
            //位echart对象加载数据
            MYCHART.setOption(option,true);
            loadOption(2011);//使用ajax同步加载数据
        }
    )


其实我也很纳闷了,这个xAxis中data属性是一个数组,series中data也是一个数组,如果直接不写任何数据,在loadOption方法中,再获取MACHAT.option中会找不到series,xAxis ,option倒是能获取到,但是这个对象是空的。这让我很奇怪,所以只能先写一个空字符串了。

 

    //ajax 异步加载配置数据项
    function loadOption(year)
    {
        $.ajax({
            url: '/Home/GetJson?year='+year,
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (result) {
                if (result)
                {
                    var option = MYCHART._option;  //e2中感觉这个命名十分奇怪,居然要这样获取,必须先设置才有这个属性
                    debugger
                    if (result.seriesData == null) {
                        option.series[0].data = [''];
                        option.xAxis[0].data = ['']
                    }
                    else {
                        option.series[0].data = result.seriesData;
                        option.xAxis[0].data = result.xAxisData;
                    }
                    MYCHART.setOption(option,true);
                }
            },
            error: function ()
            {
                alert("不好意思请求失败了");
            }
        })
    }

 

要注意这两点

 

1.刚开始的时候我也很奇怪,获取option 属性居然有这样获取MYCHART._option 。在e3直接MYCHART.getOption()就可以获取到。

2.echarts图表动态刷新数据不能清空数据,这是因为多次调用option默认是合并的Merge ,文档里说设置第二个参数为true就ok ,如上MYCHART.setOption(option,true)

 

下拉框选择年份事件:

 

    function yearChange(selectObj)
    {
        var year = $(selectObj).val();
        loadOption(year);
    }


实际运行的效果图如下:

 


echarts图表中值得注意两点上面已经说了,一个数据动态加载数据没有清除数据,一个获取option必须先setOption才能获取到。但是我郁闷的是如果不给series 中data属性设值,xAxis中data属性设值获取到的option是一个空的object。虽然实现整个下拉选择事件动态加载数据的功能,但是代码还是得优化一下。

整个思路就是同步执行ajax加载数据,设置option中的属性。还是要注意方法调用的循序。经常会underfined地报错,debugger的时候看的很清楚。

下载地址:http://download.csdn.net/detail/kebi007/9742894

作者:张林

 

标题: echarts异步数据加载(在下拉框选择事件中异步更新数据)原文地址:http://blog.csdn.net/kebi007/article/details/54663620

转载随意注明出处

有兴趣的可以关注一下我的公众号,每天分享一篇it技术、面试技巧、技术感想的文章

 

相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值