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 += '<span style="">' + param.seriesName + '：' + param.value + '</span>'; res += '<br />'; } 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 += '<span style="">' + param.seriesName + '：' + param.value + '</span>';
res += '<br />';
}
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);
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，喜歡可以關注哦，謝謝大家對我的支援!