Echarts使用心得总结——异步数据加载与更新（二）

上次用Echarts做了一个会员增量统计图表，正好用到了Echarts异步数据加载，使用的是下拉联动+Echarts数据更新，下面把实现代码分享给大家。

一、时间选择器下拉联动的实现：

<div class="selects-div">
    <select id="YYYY" onchange="YYYYDD(this.value)" >
        <option value="">选择年</option>
    </select>
    <select id="MM" onchange="MMDD(this.value)" >
        <option value="">选择月</option>
    </select>
    <select id="DD" style="display:none">
        <option value="">选择 日</option>
    </select>
</div>

1、使用js添加年份：

if (document.attachEvent)
   window.attachEvent("onload", YYYYMMDDstart);
else
   window.addEventListener('load', YYYYMMDDstart, false);

function YYYYMMDDstart() {
   MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
   //先给年下拉框赋内容   
   var y = new Date().getFullYear();
   for (var i = (y) ; i < (y + 10) ; i++) //以今年为准，前10年，后10年   
       $('#YYYY').append(new Option(" " + i + " 年", i));
   //赋月份的下拉框   
   for (var i = 1; i < 13; i++)
       $('#MM').append(new Option(" " + i + " 月", i));
}

2、当年份改变时，加载月份的option：

function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)   
{
     loadDataOfYear();

     var MMvalue = $('#MM').val();
     if (MMvalue == "") {
         var e = $('#DD');
         optionsClear(e);
         return;
     }
     var n = MonHead[MMvalue - 1];
     if (MMvalue == 2 && IsPinYear(str)) n++;
     writeDay(n)

    //重置选择日option
   function optionsClear(e) {
       e.html('<option  value="">选择 日</option>');
   }

   //判断是否闰平年   
   function IsPinYear(year) 
   {
       return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
   }

    //据条件写日期的下拉框   
    function writeDay(n) 
    {
         var e = $('#DD');
         optionsClear(e);
         for (var i = 1; i < (n + 1) ; i++)
             e.append(new Option(" " + i + " 日", i));
     }
 }

3、当月份改变时，加载day的option：

//月发生变化时日期联动   
function MMDD(str) 
{   
    loadDataOfMonth();//更新数据

    var YYYYvalue = $('#YYYY').val();
    if (YYYYvalue == "") {
        var e = $('#DD');
        optionsClear(e);
        return;
    }
    var n = MonHead[str - 1];
    if (str == 2 && IsPinYear(YYYYvalue)) n++;
    writeDay(n)
}

二、Echarts数据异步加载和更新：

1、异步加载数据：

            var json = JSON.parse($('#hfJson').val());//获取json数据
            var dataAxis = [];//X轴name
            var data = [];//y轴数据
            for (var i = 0; i < json.length ; i++) {
                dataAxis.push(json[i].X+'年');
                data.push(json[i].Y);
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            myChart.setOption({
                title: {
                    text: '会员增量统计表',
                    subtext: ''
                },
                toolbox: {
                    feature: {
                        magicType: {
                            type: ['stack', 'tiled']
                        },
                        dataView: {},
                        saveAsImage: {
                            pixelRatio: 2
                        }
                    }
                },
                tooltip: {

                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#83bff6'
                            }
                        },
                        data: []
                    }
                ]
            });

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption({
                xAxis: {
                    data: dataAxis
                },
                series: [
                    {
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#83bff6'
                            }
                        },
                        data: data
                    }
                ]
            });

2、数据更新操作（当改变年份或月份时更新数据）：

                //年份改变，更新数据
                function loadDataOfYear() {
                var url;
                if (str == "") {
                    url = '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=0';
                    $("#MM").find("option[text='选择月']").attr("selected", true);
                } else if ($('#MM  option:selected').val() == "") {
                    url = '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=1&year=' + str;
                } else {
                    url = '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=2&year=' + str + '&month=' + $('#MM  option:selected').val();
                }

                myChart.showLoading();
                $.ajax({
                    type: "post",
                    url: url,
                    data: {},
                    success: function (msg) {
                        if (msg.status == 1) {
                            myChart.hideLoading();
                            var obj = msg;
                            dataAxis = [];
                            data = [];
                            for (var i = 0; i < obj.data.length; i++) {
                                var strX;
                                if (str == "") {
                                    strX = obj.data[i].X + "年";
                                } else if ($('#MM  option:selected').val() == "") {
                                    strX = obj.data[i].X + "月";
                                } else {
                                    strX = obj.data[i].X + "日";
                                }
                                dataAxis.push(strX);
                                data.push(obj.data[i].Y);
                            }

                            myChart.setOption({
                                xAxis: {
                                    data: dataAxis
                                },
                                series: [
                                    {
                                        type: 'line',
                                        itemStyle: {
                                            normal: {
                                                color: '#83bff6'
                                            }
                                        },
                                        data: data
                                    }
                                ]
                            });
                        }
                        else {
                            alert(msg.msg);
                        }
                    }
                })
            }

                //月份改变，更新数据
                function loadDataOfMonth() {
                if ($('#YYYY  option:selected').val() == "") {
                    alert("请选择年份");
                    return;
                }
                var url = str == "" ? '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=1&year=' + $('#YYYY  option:selected').val() :
                    '/tools/admin_ajax.ashx?action=ylzg_stat_member_amount&option=2&year=' + $('#YYYY  option:selected').val() + '&month=' + str;

                myChart.showLoading();
                $.ajax({
                    type: "post",
                    url: url,
                    data: {},
                    success: function (msg) {
                        if (msg.status == 1) {
                            myChart.hideLoading();
                            var obj = msg;
                            dataAxis = [];
                            data = [];
                            for (var i = 0; i < obj.data.length; i++) {
                                var strX = str == "" ? obj.data[i].X + '月' : obj.data[i].X + '日';
                                dataAxis.push(strX);
                                data.push(obj.data[i].Y);
                            }
                            myChart.setOption({
                                xAxis: {
                                    data: dataAxis,
                                },
                                series: [
                                    {
                                        type: 'line',
                                        itemStyle: {
                                            normal: {
                                                color: '#83bff6'
                                            }
                                        },
                                        data: data
                                    }
                                ]
                            });
                        }
                        else {
                            alert(msg.msg);
                        }
                    }
                })
            }

三、运行实例为：

四、总结：
ECharts，一个纯 Javascript 的图表库，官网上也有详细的API文档和说明，总的来说对实现数据可视化还是很有不错的，还有好多知识需要慢慢学习！