Echartsは、フィルタ条件に基づいてグラフを動的に生成し、連動easyui(問題と解決)を使用します.


2、3ヶ月前に初めて開発したとき、今日は小さな問題が発生したくなかった.
ポイント1:フィルタ条件に基づいてグラフを動的に生成する
ポイント2:プロンプトボックスに従って、下のeasyui表と連動してリアルタイム更新表示を行う
その他、その他の関連する小さな問題と解決に関する注意事項:
1:combobox入力内容を選択するとフォーカスがクリアされ、
2:checkedの値を求め、propプロパティを使用することを選択し、最新バージョンjqueryで説明し、falseまたはtrueを返します.
attrはundefinedまたはcheckedを返し、
3:サブフォーム親フォームの他のサブフォームメソッドを呼び出し、関連する要素値を取得
4:ラジオボタン、オフセット、オリジナルの入力コントロール、easyuiコントロール、スタイルが一致しません
5:重中の重さ:良いコード習慣を身につけて、必ず先に判断してから使用しなければならなくて、集合が空であるかどうかに関わらず、やはり要素自身が空であるかどうか、フロントエンドとバックグラウンドに関わらず
グラフカートンやページの偽死を直接招く
もと書いたシナリオを見直したところ、問題は解決され、真相が明らかになった.
ps:もっと言って、この図はfastststoneでスクリーンを録画して、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;//b 3がfalseであれば、b 2はfalse if(b 33==false){flag 2=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 row 3={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);
以上はこの文章のすべての内容で、本文の内容がみんなの学习あるいは仕事に対して一定の助けをもたらすことができることを望みます~もし疑问があればみんなは伝言を残して交流することができて、関心を持つことができることが好きで、みんなの私に対する支持に感谢します!