Echarts使用之——根据筛选条件动态生成图表，及联动easyui(问题及解决)

 两三个月前第一次开发的时候，不想今天便出现了一些小问题，回想起来由于时间比较赶，确实不够健壮，不够美观，体验稍差，整体如下：

重点1：根据筛选条件动态生成图表

重点2：根据提示框，联动下面的easyui表格进行实时更新显示

其他遇到其他相关小问题和解决 注意事项：

1：combobox当要选择输入内容时，聚焦便清空内容，

2：求出checked里面值，选择使用prop 特性，在最新版本jquery里做过说明，它返回false或true

而attr则返回undefined或是checked，

3：子窗体调用父窗体中其他子窗体方法和获取相关元素值

4：单选按钮，偏上，原生的输入控件，和easyui控件，风格不一致

5：重中之重：养成较好的编码习惯，一定要先判断再使用，无论是集合是否为空，还是元素本身是否为空，无论前端还是后台

直接导致图表卡顿，甚至页面假死

重新看了原来写的脚本后，问题得到解决，有图有真相

ps:多说一句，此图用faststone进行录屏，在https://cloudconvert.com/wmv-to-gif上将录好文件wmv格式在线转为gif，个人认为：未来趋势绝对是bs模式大行其道，甚至是向在线操作系统这种模式发展，唯一的限制便是网速，和浏览器功能，以及安全，不管怎么说，因为不用安装，使用简单，真的太方便了。

总结：主要是因为全局条件逻辑判断不是特别清晰，和null值未做任何处理

详细见下文：

---

标题

 

重点1：根据筛选条件动态生成图表

思路：根据传入参数，生成图表需要的几条重要数据结构  ，

          var _legend = [],
                _xAxis = [],
                _series = [];

   function addProfitCompare(flag1, flag2, data, type, flag0) {
            var fundCodeList = $("#fundCodeStr").attr("value");
            var funds = fundCodeList.split(',');
            //console.log(funds);
            //console.log(flag1);
            var h = $(window.parent.parent.document).find("#nav").height();
            var adjust = $(window.parent.parent).width() >= 1020 ? (92 + 94) : (120 + 94);
            var calH = (h - adjust);
            $("#profit").css('height', (calH - 158) + 'px');

            var myChart = echarts.init(document.getElementById('profit'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    //grid: {
                    //    right: '5%'
                    //},
                    formatter: function (params) {
                        //console.log(params[0].name);
                        $("#dgCompare").datagrid('loadData', []);
                        var filter = [];                        
                        //val是一个某一个对象，类似lambda中xx概念
                        //filter = data.filter(function (val) { return params[0].name == val.fsrq });
                        filter = $(data).filter(function (val) { return params[0].name == this.fsrq });
                        //兼容ie考虑，不支持filter原生方法，转为jquery
                        
                       
                        //根据时间抽出对应数组后，顺序乱了，需要根据funds顺序排序一下，同时funds里面是带有引号
                        var filter_ = [];
                        for (var i = 0; i < funds.length; i++) {
                            for (var ii = 0; ii < filter.length; ii++) {
                                //console.log( filter[ii].jjdm + "-" +funds[i].substring(1,7));
                                //console.log(params[i].seriesName);
                                if (data[i].基金简称 == filter[ii].基金简称) {
                                    filter_.push(filter[ii]);
                                }
                            }
                        }
                        //console.log(filter_);
                        filter = filter_;
                        for (var i = 0; i < filter.length; i++) {
                            //console.log(filter[i].基金代码);
                            $('#dgCompare').datagrid('insertRow', {
                                row: {
                                    基金代码: filter[i].基金代码,
                                    基金简称: filter[i].基金简称,
                                    基金类型: filter[i].基金类型,
                                    fsrq: filter[i].fsrq,
                                    dwjz: filter[i].dwjz,
                                    benjin: filter[i].benjin,
                                    DTshizhi: filter[i].DTshizhi,
                                    DTshouyi: filter[i].DTshouyi,
                                    DTshouyilv: filter[i].DTshouyilv,
                                    shizhi: filter[i].shizhi,
                                    shouyi: filter[i].shouyi,
                                    shouyilv: filter[i].shouyilv,
                                    dapanshouyilv: filter[i].dapanshouyilv
                                }
                            });
                        }

                        //另外单独写一个，必须写上一个return,否则是空白的
                        var res = '';
                        //console.log(params);
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            
                           
                            //var style = 'color: ' + param.color;
                            res += param.marker;
                            res += '' + param.seriesName + '：' + param.value + '';
                            res += '
';
                        }
                        return res;
                    }
                },
                legend: {
                    data: []
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            };
           
            var _legend = [],
                _xAxis = [],
                _series = [];            
            switch (type) {
                case "default":
                    for (var i = 0, len = funds.length; i < len; i++) {
                        _legend.push({ name: data[i].基金简称, icon: 'bar' });
                        //根据基金名称分组
                        //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row = { name: data[i].基金简称, type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                                _xAxis.push(group[x].fsrq);
                            }
                            flag0 ? row.data.push(group[x].DTshouyilv != null ? group[x].DTshouyilv.toFixed(2) : 0) : row.data.push(group[x].DTshizhi != null ? group[x].DTshizhi.toFixed(2) : 0);
                        }
                        _series.push(row);
                    }
                    if (flag1) {
                        for (var i = 0, len = funds.length; i < len; i++) {

                            _legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
                            //根据基金名称分组
                            //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                            var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                            var row2 = { name: data[i].基金简称 + '一次性买入', type: 'line', smooth: true, data: [] };
                            for (var x = 0, l = group.length; x < l; x++) {
                                if (i == 0) {
                                    // _xAxis.push(group[x].fsrq);
                                }
                                flag0 ? row2.data.push(group[x].shouyilv != null ? group[x].shouyilv.toFixed(2) : 0) : row2.data.push(group[x].shizhi != null ? group[x].shizhi.toFixed(2) : 0);
                            }
                            _series.push(row2);
                        }
                    }
                    if (flag2 &&flag0) {
                        _legend.push({ name: "上证指数走势", icon: 'bar' });
                        //var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            row3.data.push(group[x].dapanshouyilv != null ? group[x].dapanshouyilv : 0);
                        }
                        _series.push(row3);
                    }
                    
                    break;                        
                case "zichan":
                    for (var i = 0, len = funds.length; i < len; i++) {
                        _legend.push({ name: data[i].基金简称+"定投", icon: 'bar' });
                        //根据基金名称分组
                        //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row = { name: data[i].基金简称 + "定投", type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                                _xAxis.push(group[x].fsrq);
                            }
                            row.data.push(group[x].DTshizhi!=null?group[x].DTshizhi.toFixed(2):0);
                        }
                        _series.push(row);
                    }
                    if (flag1) {
                        for (var i = 0, len = funds.length; i < len; i++) {
                            _legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
                            //根据基金名称分组
                            //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                            var row2 = { name: data[i].基金简称 + "一次性买入", type: 'line', smooth: true, data: [] };

                            for (var x = 0, l = group.length; x < l; x++) {
                                row2.data.push(group[x].shizhi!=null?group[x].shizhi.toFixed(2):0);
                            }
                            _series.push(row2);
                        }
                    }                                                           
                    break;
                case "oneAndZou":
                    for (var i = 0, len = funds.length; i < len; i++) {
                        _legend.push({ name: data[i].基金简称 + "定投", icon: 'bar' });
                        _legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
                        //根据基金名称分组
                        //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row = { name: data[i].基金简称 + '定投', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                                _xAxis.push(group[x].fsrq);
                            }
                            flag0 ? row.data.push(group[x].DTshouyilv != null ? group[x].DTshouyilv.toFixed(2) : 0) : row.data.push(group[x].DTshizhi != null ? group[x].DTshizhi.toFixed(2) : 0);
                        }
                        var row2 = { name: data[i].基金简称 + '一次性买入', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                                // _xAxis.push(group[x].fsrq);
                            }
                            flag0 ? row2.data.push(group[x].shouyilv != null ? group[x].shouyilv.toFixed(2) : 0) : row2.data.push(group[x].shizhi != null ? group[x].shizhi.toFixed(2) : 0);
                        }
                        _series.push(row);
                        _series.push(row2);
                    }
                    _legend.push({ name: "上证指数走势", icon: 'bar' });
                    //var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
                    var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                    var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
                    for (var x = 0, l = group.length; x < l; x++) {
                        row3.data.push(group[x].dapanshouyilv != null ? group[x].dapanshouyilv : 0);
                    }
                    _series.push(row3);
                    break;
                case "oneAnd":
                    for (var i = 0, len = funds.length; i < len; i++) {
                        _legend.push({ name: data[i].基金简称+"定投", icon: 'bar' });
                        _legend.push({ name: data[i].基金简称+"一次性买入", icon: 'bar' });
                        //根据基金名称分组
                        //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row = { name: data[i].基金简称+'定投', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                                _xAxis.push(group[x].fsrq);
                            }
                            flag0 ? row.data.push(group[x].DTshouyilv != null ? group[x].DTshouyilv.toFixed(2) : 0) : row.data.push(group[x].DTshizhi!=null?group[x].DTshizhi.toFixed(2):0);
                        }
                        var row2 = { name: data[i].基金简称+'一次性买入', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                               // _xAxis.push(group[x].fsrq);
                            }
                            flag0 ? row2.data.push(group[x].shouyilv != null ? group[x].shouyilv.toFixed(2) : 0) : row2.data.push(group[x].shizhi!=null?group[x].shizhi.toFixed(2):0);
                        }
                        _series.push(row);
                        _series.push(row2);
                        if (flag2 && flag0) {
                            _legend.push({ name: "上证指数走势", icon: 'bar' });
                            //var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
                            var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                            var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
                            for (var x = 0, l = group.length; x < l; x++) {
                                row3.data.push(group[x].dapanshouyilv!=null?group[x].dapanshouyilv:0);
                            }
                            _series.push(row3);
                        }
                    }
                   
                    break;
                case "AndZou":
                    for (var i = 0, len = funds.length; i < len; i++) {
                        _legend.push({ name: data[i].基金简称 + "定投", icon: 'bar' });                       
                        //根据基金名称分组
                        //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row = { name: data[i].基金简称 + '定投', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            if (i == 0) {
                                _xAxis.push(group[x].fsrq);
                            }
                            row.data.push(group[x].DTshouyilv!=null?group[x].DTshouyilv.toFixed(2):0);
                        }
                        _series.push(row);
                        if (flag1)
                        {
                            _legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
                            //var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
                            var row2 = { name: data[i].基金简称 + '一次性买入', type: 'line', smooth: true, data: [] };
                            for (var x = 0, l = group.length; x < l; x++) {
                                if (i == 0) {
                                    // _xAxis.push(group[x].fsrq);
                                }
                                row2.data.push(group[x].shouyilv!=null?group[x].shouyilv.toFixed(2):0);
                            }                        
                            _series.push(row2);
                        }                                                
                    }
                    _legend.push({ name: "上证指数走势", icon: 'bar' });
                    //var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
                    var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                    var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
                    for (var x = 0, l = group.length; x < l; x++) {                        
                        row3.data.push(group[x].dapanshouyilv!=null?group[x].dapanshouyilv:0);
                    }
                    _series.push(row3);
                    break;
            }
            option.legend.data = _legend;
            option.xAxis.data = _xAxis;
            option.series = _series;
            myChart.setOption(option, true);
            //图形放大缩小
            
            window.onresize = function () {
                var h = $(window.parent.parent.document).find("#nav").height();
                var adjust = $(window.parent.parent).width() >= 1020 ? (92 + 94) : (120 + 94);
                var calH = (h - adjust);               
                $("#profit").css('height', (calH - 158) + 'px');
                myChart.resize();
                //myChart.setOption(option);
            };
            //鼠标移动，联动数据格子里面的数据，跟着移动
            //myChart.on('hover', function (params) {
                //console.log(params.name);
                //console.log('1');                                               
            //});
        }

重点2：根据提示框，联动下面的easyui表格进行实时更新显示

 formatter: function (params) {
                        //console.log(params[0].name);
                        $("#dgCompare").datagrid('loadData', []);
                        var filter = [];                        
                        //val是一个某一个对象，类似lambda中xx概念
                        //filter = data.filter(function (val) { return params[0].name == val.fsrq });
                        filter = $(data).filter(function (val) { return params[0].name == this.fsrq });
                        //兼容ie考虑，不支持filter原生方法，转为jquery
                        
                       
                        //根据时间抽出对应数组后，顺序乱了，需要根据funds顺序排序一下，同时funds里面是带有引号
                        var filter_ = [];
                        for (var i = 0; i < funds.length; i++) {
                            for (var ii = 0; ii < filter.length; ii++) {
                                //console.log( filter[ii].jjdm + "-" +funds[i].substring(1,7));
                                //console.log(params[i].seriesName);
                                if (data[i].基金简称 == filter[ii].基金简称) {
                                    filter_.push(filter[ii]);
                                }
                            }
                        }
                        //console.log(filter_);
                        filter = filter_;
                        for (var i = 0; i < filter.length; i++) {
                            //console.log(filter[i].基金代码);
                            $('#dgCompare').datagrid('insertRow', {
                                row: {
                                    基金代码: filter[i].基金代码,
                                    基金简称: filter[i].基金简称,
                                    基金类型: filter[i].基金类型,
                                    fsrq: filter[i].fsrq,
                                    dwjz: filter[i].dwjz,
                                    benjin: filter[i].benjin,
                                    DTshizhi: filter[i].DTshizhi,
                                    DTshouyi: filter[i].DTshouyi,
                                    DTshouyilv: filter[i].DTshouyilv,
                                    shizhi: filter[i].shizhi,
                                    shouyi: filter[i].shouyi,
                                    shouyilv: filter[i].shouyilv,
                                    dapanshouyilv: filter[i].dapanshouyilv
                                }
                            });
                        }

                        //另外单独写一个，必须写上一个return,否则是空白的
                        var res = '';
                        //console.log(params);
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            
                           
                            //var style = 'color: ' + param.color;
                            res += param.marker;
                            res += '' + param.seriesName + '：' + param.value + '';
                            res += '
';
                        }
                        return res;
                    }
                },

其他遇到其他相关小问题和解决 注意事项：

1：combobox当要选择输入内容时，聚焦便清空内容，

如下要写在onLoadSuccess里面，否则没有效果

$('#textFilter').combobox({
            mode: 'remote',
            url: '/Service/EasyUiService.ashx?Method=AutoComplete_JJBJ',
            valueField: 'val',
            textField: 'txt',
            onLoadSuccess: function () {
                $('#textFilter').next('.combo').find('input').focus(function () {
                    $('#textFilter').combobox('clear');//清空选中项
                    //$('#textFilter').combobox('loadData', {});//清空option选项   
                });
            }
        });

2：求出checked里面值，选择使用prop 特性，在最新版本jquery里做过说明，它返回false或true

而attr则返回undefined或是checked，

$('input[type=checkbox][name=AddOne]').eq(0).click(function () {
                
                //flag1 = !flag1;
                //console.log($(this).prop("checked"));
                flag1 = $(this).prop("checked");
                flag2 = $('input[type=checkbox][name=AddOne]').eq(1).prop("checked");
                var b33 = $('input[type=radio][name=quxian]:checked').val() == 0 ? true : false;
                //假如是b3为false，那么b2相当于为false
                if (b33 == false) {
                    flag2 = false;
                }
                flag1 ? addProfitCompare(flag1, flag2, data, 'oneAnd', b33) : addProfitCompare(flag1, flag2, data, 'default', b33);
            });

3：子窗体调用父窗体中其他子窗体方法和获取相关元素值

$(parent.frames["jjdtIframe"].frames["jjdtpage"].document)

ps:衍生一下，想起一个知识点，关于$和parent.$区别，是本页面里的$对象还是，父页面中$对象

任何知识一到了实际应用，就会变得复杂，要想学习战争， 最好是在战争中学习战争，编写代码也一样，最好的学习，便是

在开发实践中学习，

推荐使用给这些iframe定义name=“” 通过如下方式调用，很方便

 $(parent.frames["jjdtIframe"].frames["jjdtpage"].document).find("#fundCodeStr").html($("#fundCodeStr").html());
                    $(parent.frames["jjdtIframe"].frames["jjdtpage"].document).find("#showdate").html(time_start);
                    $("#fundCodeStr").attr("value", fundCodeList);
                    $(parent.frames["jjdtIframe"].frames["jjdtpage"].document).find("#fundCodeStr").attr("value", $("#fundCodeStr").attr("value"));
                    parent.frames["jjdtIframe"].frames["jjdtpage"].parentReloadByIframe(data);
                    //parent.frames["jjdtIframe"].$('#dialog', parent.frames["jjdtIframe"].document).window('close');
                    //parent.frames["jjdtIframe"].$('#dialog1', parent.frames["jjdtIframe"].document).window('close');
                    parent.$('#dialog', parent.document).window('close');

4：单选按钮，偏上，原生的输入控件，和easyui控件，风格不一致解决css样式表copy一份如下：

：not(:first-child);和：not(first-type-p);伪选择器是有区别的

  select{
             height:26px;
            border-radius:6px;
            border: #95B8E7 1px solid !important;
         }
             input[type=text] {
                 height:22px;
            border-radius:6px;
              border: #95B8E7 1px solid !important;
             }
              #_easyui_textbox_input1 {
                
              border: none !important;
             }
         input:focus,select:focus {
            outline: none;
            border-color: #9ecaed;
            box-shadow: 0 0 10px #9ecaed;
        }
         input[type='radio']:focus,input[type='checkbox']:focus{
            outline: none;
            border-color: #9ecaed;
            /*box-shadow: 0 0 10px #9ecaed;*/
        }
          input[type='radio'],input[type='checkbox']:nth-child(-n+3){                         
             height:15px; 
             vertical-align:bottom;
              margin-bottom:-1px;
               margin-top:-1px;
               /*margin-left:-3px;*/
         }
          input[type='checkbox']{                         
             height:15px; 
             vertical-align:bottom;
              margin-bottom:5px;
               margin-top:-1px;
               /*margin-left:-3px;*/
         }
        .toolspan {
            height:28px;
            line-height:28px;
        }
          .Wdate {
    border: #95B8E7 1px solid !important;
    border-radius:6px;
    height: 26px;
    margin-top:-5px;
}

5：重中之重：养成较好的编码习惯，一定要先判断再使用，无论是集合是否为空，还是元素本身是否为空，无论前端还是后台

直接导致图表卡顿，甚至页面假死

_legend.push({ name: "上证指数走势", icon: 'bar' });
                        //var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
                        var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
                        var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
                        for (var x = 0, l = group.length; x < l; x++) {
                            row3.data.push(group[x].dapanshouyilv != null ? group[x].dapanshouyilv : 0);
                        }
                        _series.push(row3);

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，喜欢可以关注哦，谢谢大家对我的支持!