一、bootstrap tabs 解決方案
方式一
tab切換echarts無法正常顯示
https://blog.csdn.net/cjs68/article/details/78072382
tab切換時候，第一個圖正常顯示，第二個及之后的圖無法正常顯示。
問題是這樣的，用了兩個tab切換，每個tab里面加載一個echarts圖表，div的大小是百分比設置的，結果第一個echarts可以正常顯示出來，第二個echarts被嚴重壓縮了。
查看了一下網頁布局，發現div是有大小的，但是里面加載的echarts寬高都是0，這可能就是echarts顯示過小的原因。
有以下三個解決辦法：
- 將div的寬高設置成固定值，比如style=”width:500px;height:500px”，這時候echarts有了明確的大小時候就可以正常顯示出來了。（不過這個方法還是不好，固定值的高寬無法自適應網頁大小啊）
- 在點擊第二個tab的時候獲取父div的寬和高，將具體的寬和高賦值給echarts，如何在這個方法里面初始化echarts，而不要再加載網頁的時候就初始化。
具體的代碼如下：
<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#chart1" data-toggle="tab">tab1</a> </li> <li> <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">tab2</a> </li> <div class="tab-content"> <div class="tab-pane fade in active" id="chart1" style="width=100%;height=100%"></div> <div class="tab-pane fade" id="chart2"></div> </div> </ul>
chartresize()方法如下：
function chartresize(){ console.log("chartresize"); var temp = new initchart(); temp.resize(); }
初始化echarts的方法如下：
var initchart = function(){ var chart2 = echarts.init(document.getElementById('chart2')); var chart2_option={ series: [ { type: 'pie', radius: '55%', center: ['50%', '50%'], data:[ {value:10, name: 'pie1'}, {value:20, name: 'pie2'}, {value:10, name: 'pie3'}, ] } ] } chart2.setOption(chart2_option); $(function(){ window.onresize = function(){ chart2.resize(); } }) this.resize = function size(){ var chart2div=document.getElementById('chart2'); var tabcontent = document.getElementById('tab-content'); width=tabcontent.offsetWidth; height=tabcontent.offsetHeight; chart2div.style.width=width+'px'; chart2div.style.height=height+'px'; chart2.resize(width,height); } }
這樣每次在點擊第二個tab的時候就會重新加載下chart2了，就不會出現chart過小的問題。
3、設置tab切換時候加載時間
代碼如下：
$("a[data-toogle='tab']").on("shown.bs.tab",function(e){ var activeTab=$(e.target)[0].hash; if(activeTab == "#tab1"){ window.onresize(); } if(activeTab == "#tab2"){ window.onresize(); } }
echarts的初始化跟正常的方式一樣，不過記得將tab-content中的echarts高寬設為100%。
方式一詳細說明如下：https://bbs.csdn.net/topics/391032565
關鍵就是在tab轉換的時候div是沒有height的，所有要在標簽頁顯示后有了width和height之后再加載圖表。
tab有show.bs.tab和shown.bs.tab兩種，要選擇shown顯示后的
|
1
2
3
4
5
6
7
|
$(
'a[data-toggle="tab"]'
).on(
'shown.bs.tab'
, function (e) {
// 獲取已激活的標簽頁的名稱
var activeTab = $(e.target)[
0
].hash;
if
(activeTab==
"#day-div"
) loadDay();
//加載圖表
if
(activeTab==
"#week-div"
) loadWeek();
if
(activeTab==
"#month-div"
) loadMonth();
});
|
方式二
解決Echarts使用tab切換時只顯示第一個tab中圖表，其他tab中圖表不顯示或顯示不全問題
來源：https://blog.csdn.net/nongweiyilady/article/details/77042319
近期項目中也使用到了Echarts來畫圖表，也是兩個tab切換頁面中都存在圖表，頁面加載完成后都對所有圖表進行了初始化和繪制，然而在tab切換中出現了如下動圖中的問題：
圖中可以看到，第一個tab顯示是很正常的，但是第二個tab中內容顯示不完整。
我的解決方式如下：
1--在tab導航中加入radio單選按鈕並隱藏，當第二個tab被選中的時候，再初始化圖表數據，導航代碼如下：
- <ul class="tab-nav-list clearfix">
- <li class="active">
- <label><span>數據分析</span>
- <input class="tabToggle hide" type="radio" name="tabToggle" value="0"/></label>
- </li>
- <li>
- <label><span>用戶分析</span>
- <input class="tabToggle hide" type="radio" name="tabToggle" value="1" /></label>
- </li>
- <li><span>頁面分析</span></li>
- </ul>
- initDataAnalyze();//第一個tab圖表初始化
- $(".tabToggle").click(function () {
- if ($(this).val() == 1) {
- initUserAnalyze();//第二個tab圖表初始化
- }
- });
經過以上兩個步驟后得以正常顯示，當然，再多個tab中也可以使用這種方式。
效果如下：
可惜的是沒有我想要的，這個項目用地是easyUI組件及其樣式。
方式三 基於 vue.js 的element組件 的覺得方案。
Vue解決echart在element的tab切換時顯示不正確
最近在項目中遇到了這種情況，需要在tab控件上渲染多個echart圖標，然后切換查看時，發現圖表的寬度不正確
原因：在頁面進行加載時，隱藏的圖表找不到對應的div大小，所以默認給了一個大小。所以要做的就是在頁面加載時，就對圖表進行初始化。
網上的解決方案大多都是監聽tab的切換事件，然后再根據切換的頁面重新渲染echart組件，比較麻煩。如下是個人的解決方法：
原理：利用v-if屬性,當切換至對應的tab時，設置其v-if的值為true即可，同時設置默認顯示的tab
舉例如下：
<el-tabs type="card" v-model="tabItem"> <el-tab-pane name="heart"> <span slot="label"><icon name="heart" scale="2"></icon>心率</span> <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline> </el-tab-pane> <el-tab-pane name="breath"> <span slot="label"><icon name="breath" scale="2"></icon>呼吸</span> <baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline> </el-tab-pane> <el-tab-pane label="體動" name="move"> <span slot="label"><icon name="move" scale="2"></icon>體動</span> <baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline> </el-tab-pane> </el-tabs>
這里默認tab為心率tab，當切換時，同一時刻只有一個v-if為true，當將其設置為true時，Vue會重新在頁面渲染組件，即完成了組件渲染的步驟。
更新: 知乎某不知名大佬給了一個更加的簡單的方法:
el-tab-pane添加上lazy=’true’屬性即可 歡迎訪問我的博客了解更多
難過的時，我的項目用的是EasyUI組件及其樣式，然而沒找到EasyUI的解決方案。
二、jquery EasyUI tabs 解決方案
1 EasyUI 官方文檔
中文版：http://www.jeasyui.net/plugins/160.html
英文版：http://www.jeasyui.com/documentation/index.php#
2發現幾個有用的配置： width、height 、onSelect、resize。
簡化后的代碼：
html
<div id="tt" class="easyui-tabs" style="width:100%;height:650px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
</div>
javascript
$(function () {
// 初始化時設置寬度和高度
$('#tt').tabs({
width: $("#tt").parent().width(),
height: "auto",
onSelect:function(title,index){
console.log(title,index);
//切換的時候重新設置高度和寬度。
chartResize();
}
});
});
function chartResize() {
//改變 tab大小
$('#tt').tabs({
width: $("#tt").parent().width(),
height: "auto"
});
//重置大小，使其子模塊也隨之變化。 如果沒有這一步改變不會發生。
$("#tt").tabs("resize");
//以下是對Echarts 重置方法
//chart_dayPrice_line.resize();
}
//窗口大小改變后，重新調整echarts大小
window.onresize = function () {
setTimeout("chartResize();", 100);
}
以上是對某個問題解決方法的提煉，本人並沒有寫Demo。
3 寬度解決了，echarts高度怎么自適應呢？
百度得：https://blog.csdn.net/u012043416/article/details/51912011
問題解決。
最終效果：
實際完整代碼，內容太多太雜，可以不用看。
@{
var todayWeek = ViewBag.TodayWeek;
var todayYear = ViewBag.TodayYear;
var forecastDefaultRegion = System.Configuration.ConfigurationManager.AppSettings["ForecastDefaultRegion"];
}
<style type="text/css">
</style>
<div class="row">
<div class="col-md-6">
<table>
<tr>
<td><label id="lbselectRegion">地區:</label></td>
<td>
<select class="easyui-combobox" id="selectRegion" data-options="required:false,label: $('#lbselectRegion'),width:150,labelWidth:50"></select>
</td>
<td style="width:20px"></td>
<td><label id="lbselectVegetableType">品種選擇:</label></td>
<td>
<select class="easyui-combobox" id="selectVegetableType" data-options="required:false,label: $('#lbselectVegetableType'),width:200,labelWidth:80"></select>
</td>
</tr>
</table>
</div>
</div>
<!-- 700px-->
<div id="tt" class="easyui-tabs" style="width:100%;height:700px; ">
<div title="價格預測" style="padding:20px;display:none;">
<div class="row">
<div class="col-md-6">
<table>
<tr>
<td><label id="lbselectTimeType">類型:</label></td>
<td>
<select class="easyui-combobox" id="selectTimeType" data-options="required:false,label: $('#lbselectTimeType'),width:150,labelWidth:50"></select>
</td>
</tr>
</table>
</div>
</div>
<div id="day" class="row">
<div class="col-md-12">
<div class="weui-loadmore" id="dayPrice_loadding">
<img src="~/Images/loading.gif" style="width:20px;height:20px" />
<span class="weui-loadmore__tips">正在加載</span>
</div>
<div id="dayPrice" style="width:100%;height:400px;">
</div>
</div>
</div>
<div id="week" class="row">
<div class="col-md-12">
<div class="weui-loadmore" id="weekPrice_loadding">
<img src="~/Images/loading.gif" style="width:20px;height:20px" />
<span class="weui-loadmore__tips">正在加載</span>
</div>
<div id="weekPrice" style="width:100%;height:400px;">
</div>
</div>
</div>
<div id="month" class="row">
<div class="col-md-12">
<div class="weui-loadmore" id="monthPrice_loadding">
<img src="~/Images/loading.gif" style="width:20px;height:20px" />
<span class="weui-loadmore__tips">正在加載</span>
</div>
<div id="monthPrice" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
<div title="結果比較" style="overflow:auto;padding:20px;display:none;">
<div class="row">
<div class="col-md-6">
<table>
<tr>
<td><label id="lbselectTimeTypeCompare">類型:</label></td>
<td>
<select class="easyui-combobox" id="selectTimeTypeCompare" data-options="required:false,label: $('#lbselectTimeTypeCompare'),width:150,labelWidth:50"></select>
</td>
</tr>
</table>
</div>
</div>
<div id="dayCompare">
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td style="width:60px"></td>
<td><label id="lbDateStart" style="width:70px">開始日期:</label></td>
<td>
<input id="boxDateStart" class="easyui-datebox" />
</td>
<td style="width:20px"></td>
<td><label id="lbDateEnd" style="width:70px">結束日期:</label></td>
<td>
<input id="boxDateEnd" class="easyui-datebox" />
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="dayPriceCompare" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
<div id="weekCompare" >
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td style="width:90px"></td>
<td><label id="lbyearStartSelect_Week">開始年:</label></td>
<td>
<select class="easyui-combobox" id="yearStartSelect_WeekCombox" data-options="required:false,label: $('#lbyearStartSelect_Week'),width:150,labelWidth:50"></select>
</td>
<td style="width:20px"></td>
<td><label id="lbweekStartSelect">開始周:</label></td>
<td>
<select class="easyui-combobox" id="weekStartSelectCombox" data-options="required:false,label: $('#lbweekStartSelect'),width:150,labelWidth:50"></select>
</td>
<td style="width:90px"></td>
<td><label id="lbyearEndSelect_Week">結束年:</label></td>
<td>
<select class="easyui-combobox" id="yearEndSelect_WeekCombox" data-options="required:false,label: $('#lbyearEndSelect_Week'),width:150,labelWidth:50"></select>
</td>
<td style="width:20px"></td>
<td><label id="lbweekEndSelect">結束周:</label></td>
<td>
<select class="easyui-combobox" id="weekEndSelectCombox" data-options="required:false,label: $('#lbweekEndSelect'),width:150,labelWidth:50"></select>
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="weekPriceCompare" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
<div id="monthCompare">
<div class="row">
<div class="col-md-12">
<table>
<tr>
<td style="width:60px"></td>
<td><label id="lbYearMonthStart" style="width:70px">起始年月:</label></td>
<td>
<input id="attYearMonthStart" editable="false" name="attYearMonthStart" class="easyui-datebox" style="width: 172px" />
</td>
<td style="width:20px"></td>
<td><label id="lbYearMonthEnd" style="width:70px">終止年月:</label></td>
<td>
<input id="attYearMonthEnd" editable="false" name="attYearMonthEnd" class="easyui-datebox" style="width: 172px" />
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="monthPriceCompare" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//預測默認地區為9（表示上海）,且網站頭部設置中不能改變它，只能通過修改配置文件修改。
var forecastDefaultRegion=@forecastDefaultRegion;
//當前日期
var curr_time = new Date();
//當前年
var y = curr_time.getFullYear();
//當前月
var m = curr_time.getMonth();
//當前日
var d = curr_time.getDate();
//近12個月
var new_time = new Date(y, m - 12, d);
//近一月
var new_time2 = new Date(y, m, d - 30);
//開始日期
var startDay = myformatterDate(new_time2);
//結束日期
var endDay = myformatterDate(curr_time);
//開始年
var yearStartSelect = new_time.getFullYear();
//開始月
var monthStartSelect = new_time.getMonth() + 1;
//結束年
var yearEndSelect = y;
//結束月
var monthEndSelect = m + 1;
//品種
var productSelect = null;
//地區
var locationSelect = null;
//品種名稱
var productSelectName = null;
//地區名稱
var locationSelectName = null;
//品種下拉框
var selectVegetableType = $("#selectVegetableType");
//城市下拉框
var selectRegion = $("#selectRegion");
//數據類型 下拉框
// var selectDataType = $("#selectDataType");
//時間類型（價格預測） 下拉框
var selectTimeType=$("#selectTimeType");
//時間類型(結果比較) 下拉框
var selectTimeTypeCompare=$("#selectTimeTypeCompare");
//開始年_周下拉列表
var yearStartSelect_WeekCombox = $("#yearStartSelect_WeekCombox");
//開始周下拉列表
var weekStartSelectCombox = $("#weekStartSelectCombox");
//結束年_周下拉列表
var yearEndSelect_WeekCombox = $("#yearEndSelect_WeekCombox");
//結束周下拉列表
var weekEndSelectCombox = $("#weekEndSelectCombox");
//開始年_周
var yearStartSelect_Week = @todayYear-1;
//開始周
var weekStartSelect = @todayWeek;
//結束年_周
var yearEndSelect_Week = @todayYear;
//結束周
var weekEndSelect = @todayWeek;
//下拉列表最大年份
var yearFuture = @todayYear+2;
//下拉列表最小年份
var yearPast = @todayYear-9;
/************************************ $(document).ready(function(){}) 開始 **********************************************************/
$(function () {
//開始年、結束年下拉列表數據
for (var j = yearPast; j <= yearFuture; j++) {
yearStartSelect_WeekCombox.append($("<option>").text(j).attr("value", j));
yearEndSelect_WeekCombox.append($("<option>").text(j).attr("value", j));
}
//開始周、結束周列表數據
for (var i = 1; i <= 53; i++) {
weekStartSelectCombox.append($("<option>").text(i).attr("value", i));
weekEndSelectCombox.append($("<option>").text(i).attr("value", i));
}
//開始周默認選中項
if (weekStartSelect != null) {
setTimeout('$("#weekStartSelectCombox").combobox("setValue", ' + weekStartSelect + ')', 100);
}
//結束周默認選中項
if (weekEndSelect != null) {
setTimeout('$("#weekEndSelectCombox").combobox("setValue", ' + weekEndSelect + ')', 100);
}
//開始年默認選中項
if (yearStartSelect_Week != null) {
setTimeout('$("#yearStartSelect_WeekCombox").combobox("setValue", ' + yearStartSelect_Week + ')', 100);
}
//結束年默認選中項
if (yearEndSelect_Week != null) {
setTimeout('$("#yearEndSelect_WeekCombox").combobox("setValue", ' + yearEndSelect_Week + ')', 100);
}
//開始周初始化
weekStartSelectCombox.combobox({
editable: false,
events: {
blur: function (s) {
}
},
onSelect: function (s) {
weekStartSelect = s.value;
WeekPriceCompareLineAJAXDataLoad(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect)
}
});
//結束周初始化
weekEndSelectCombox.combobox({
editable: false,
events: {
blur: function (s) {
}
},
onSelect: function (s) {
weekEndSelect = s.value;
WeekPriceCompareLineAJAXDataLoad(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect)
}
});
//開始年初始化
yearStartSelect_WeekCombox.combobox({
editable: false,
events: {
blur: function (s) {
}
},
onSelect: function (s) {
yearStartSelect_Week = s.value;
WeekPriceCompareLineAJAXDataLoad(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect)
}
});
//結束年初始化
yearEndSelect_WeekCombox.combobox({
editable: false,
events: {
blur: function (s) {
}
},
onSelect: function (s) {
yearEndSelect_Week = s.value;
WeekPriceCompareLineAJAXDataLoad(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect)
}
});
// 周比較條件判斷
function WeekPriceCompareLineAJAXDataLoad(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect) {
if (locationSelect && productSelect && yearStartSelect_Week && weekStartSelect && yearEndSelect_Week && weekEndSelect)
{
return WeekPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect);
}
}
//品種選擇
for (var i in products) {
var canAdd = false;
if (!forecastPriceAll) {
for (var j in forecastPriceProductsValues) {
if (products[i].id == forecastPriceProductsValues[j]) {
canAdd = true;
}
}
}
else {
canAdd = true;
}
if (canAdd) {
var item = $("<option>").text(products[i].ncpmc).attr("value", products[i].id);
//if (item.length == 1) {
// setProductValue = products[i].id;
//}
selectVegetableType.append(item);
}
}
//品種默認選中第一項
setTimeout('$("#selectVegetableType").combobox("select", ' + selectVegetableType[0][0].value + ' )', 100);
//品種選擇combobox 設置
selectVegetableType.combobox({
editable: false,
events: {
blur: function (s) {
//selectVegetableType.combobox();
}
},
onSelect: function (s) {
//console.log(s);
productSelect = s.value;
productSelectName = s.text;
MonthPriceLineAJAXData(locationSelect, productSelect);
WeekPriceLineAJAXData(locationSelect, productSelect);
DayPriceLineAJAXData(locationSelect, productSelect);
DayPriceCompareLineAJAXData(locationSelect, productSelect, startDay, endDay);
//價格預測和實際數據比較（按月）
MonthPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect, monthStartSelect, yearEndSelect, monthEndSelect);
WeekPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect);
}
});
// 地區
var setRegionValue = null;
for (var i in regionData) {
var canAdd = false;
// for (var j in defaultFavorRegionValues) {
// if (regionData[i].id == defaultFavorRegionValues[j]) {
// canAdd = true;
// }
// }
//感興趣defaultFavorRegionValues 改為 只有地點 forecastDefaultRegion
if (regionData[i].id == forecastDefaultRegion) {
canAdd = true;
}
if (canAdd) {
var item = $("<option>").text(regionData[i].cjdd).attr("value", regionData[i].id);
if (regionData[i].id == forecastDefaultRegion) {
//item.attr("selected", "selected");
setRegionValue = forecastDefaultRegion;
}
selectRegion.append(item);
}
}
//地區默認選中項
if (setRegionValue != null) {
setTimeout('$("#selectRegion").combobox("setValue", ' + setRegionValue + ')', 100);
}
//地區combobox 設置
selectRegion.combobox({
editable: false,
onSelect: function (s) {
locationSelect = s.value;
locationSelectName = s.text;
DayPriceLineAJAXData(locationSelect, productSelect);
WeekPriceLineAJAXData(locationSelect, productSelect);
MonthPriceLineAJAXData(locationSelect, productSelect);
DayPriceCompareLineAJAXData(locationSelect, productSelect, startDay, endDay);
//價格預測和實際數據比較（按月）
MonthPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect, monthStartSelect, yearEndSelect, monthEndSelect);
WeekPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect);
}
});
/***************************** 時間類型 開始************************************/
//價格預測
var timeType=["日價格","周價格","月價格"];
for (var i = 0; i < timeType.length; i++) {
var item = $("<option>").text(timeType[i]).attr("value", timeType[i]);
selectTimeType.append(item);
}
selectTimeType.combobox({
editable: false,
events: {
blur: function (s) {
}
},
onSelect: function (s) {
//visibility:hidden/visible 設置為隱藏/顯示(始終占位)
//display:none/block 設置為隱藏(不占位)/顯示(不占位)
//console.log(s)
switch (s.text) {
case timeType[0]:
document.getElementById("day").style.display="block";//顯示
document.getElementById("week").style.display="none";//顯示
document.getElementById("month").style.display="none";//顯示
break;
case timeType[1]:
document.getElementById("day").style.display="none";//顯示
document.getElementById("week").style.display="block";//顯示
document.getElementById("month").style.display="none";//顯示
break;
case timeType[2]:
document.getElementById("day").style.display="none";//顯示
document.getElementById("week").style.display="none";//顯示
document.getElementById("month").style.display="block";//顯示
break;
default:
break;
}
chartResize()
}
});
setTimeout('$("#selectTimeType").combobox("select", "日價格" )', 100);
//結果比較
var timeTypeCompare=["日預測比較","周預測比較","月預測比較"];
for (var i = 0; i < timeTypeCompare.length; i++) {
var item = $("<option>").text(timeTypeCompare[i]).attr("value", timeTypeCompare[i]);
selectTimeTypeCompare.append(item);
}
selectTimeTypeCompare.combobox({
editable: false,
events: {
blur: function (s) {
}
},
onSelect: function (s) {
//console.log(s);
switch (s.text) {
case timeTypeCompare[0]:
document.getElementById("dayCompare").style.display="block";//顯示
document.getElementById("weekCompare").style.display="none";//顯示
document.getElementById("monthCompare").style.display="none";//顯示
break;
case timeTypeCompare[1]:
document.getElementById("dayCompare").style.display="none";
document.getElementById("weekCompare").style.display="block";
document.getElementById("monthCompare").style.display="none";
break;
case timeTypeCompare[2]:
document.getElementById("dayCompare").style.display="none";
document.getElementById("weekCompare").style.display="none";
document.getElementById("monthCompare").style.display="block";
break;
default:
break;
}
chartResize()
}
});
//品種默認選中第一項
setTimeout('$("#selectTimeTypeCompare").combobox("select", "日預測比較" )', 100);
/******************************時間類型 結束**********************************/
//開始時間
$('#boxDateStart').datebox({
editable: false,
onSelect: function (startDate) {
startDay = $("#boxDateStart").datebox("getValue");
var startDate = new Date(startDay);
var endDate = new Date(endDay);
if (startDate > endDate) {
endDay = startDay;
$("#boxDateEnd").datebox("setValue", endDay);
}
DayPriceCompareLineAJAXData(locationSelect, productSelect, startDay, endDay);
}
});
//結束時間
$('#boxDateEnd').datebox({
editable: false,
onSelect: function (endDate) {
endDay = $("#boxDateEnd").datebox("getValue");
var startDate = new Date(startDay);
var endDate = new Date(endDay);
if (startDate > endDate) {
startDay = endDay;
$("#boxDateStart").datebox("setValue", endDay);
}
DayPriceCompareLineAJAXData(locationSelect, productSelect, startDay, endDay);
},
onChange: function (newValue, oldValue) {
endDay = newValue;
DayPriceCompareLineAJAXData(locationSelect, productSelect, startDay, endDay);
}
});
//日期選擇對象
var p = $('#attYearMonthStart').datebox('panel'),
//日期選擇對象中月份
tds = false,
//顯示月份層的觸發控件
span = p.find('span.calendar-text');
//開始年月
$('#attYearMonthStart').datebox({
//顯示日趨選擇對象后再觸發彈出月份層的事件，初始化時沒有生成月份層
onShowPanel: function () {
//觸發click事件彈出月份層
span.trigger('click');
if (!tds)
//延時觸發獲取月份對象，因為上面的事件觸發和對象生成有時間間隔
setTimeout(function () {
tds = p.find('div.calendar-menu-month-inner td');
tds.click(function (e) {
//禁止冒泡執行easyui給月份綁定的事件
e.stopPropagation();
//得到年份
var year = /\d{4}/.exec(span.html())[0],
//月份
month = parseInt($(this).attr('abbr'), 10);
//隱藏日期對象
$('#attYearMonthStart').datebox('hidePanel')
//設置日期的值
.datebox('setValue', year + '-' + month);
});
}, 0);
},
//配置parser，返回選擇的日期
parser: function (s) {
if (!s) return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
},
//配置formatter，只返回年月
formatter: function (d) {
var currentMonth = (d.getMonth() + 1);
var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
// alert(d.getFullYear() + "-" + currentMonthStr);
return d.getFullYear() + '-' + currentMonthStr;
},
onChange: function (newValue, oldValue) {
yearStartSelect = parseInt(newValue.split('-')[0]);
monthStartSelect = parseInt(newValue.split('-')[1]);
//獲取開始和結束時間
var start = yearStartSelect + '-' + monthStartSelect + '-' + 1;
var end = yearEndSelect + '-' + monthEndSelect + '-' + 1;
//日期比較方法
function CompareDate(d1, d2) {
return ((new Date(d1.replace(/-/g, "\/"))) <= (new Date(d2.replace(/-/g, "\/"))));
}
if (end != "null-null-1") {
//如果開始時間<=結束時間就執行以下代碼
if (CompareDate(start, end)) {
//價格預測和實際數據比較（按月）
MonthPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect, monthStartSelect, yearEndSelect, monthEndSelect);
} else {
$('#attYearMonthEnd').datebox("setValue", newValue)
}
}
},
});
//日期選擇對象
var p_2 = $('#attYearMonthEnd').datebox('panel'),
//日期選擇對象中月份
tds_2 = false,
//顯示月份層的觸發控件
span_2 = p_2.find('span.calendar-text');
//結束年月
$('#attYearMonthEnd').datebox({
//顯示日趨選擇對象后再觸發彈出月份層的事件，初始化時沒有生成月份層
onShowPanel: function () {
//觸發click事件彈出月份層
span_2.trigger('click');
if (!tds_2)
//延時觸發獲取月份對象，因為上面的事件觸發和對象生成有時間間隔
setTimeout(function () {
tds_2 = p_2.find('div.calendar-menu-month-inner td');
tds_2.click(function (e) {
//禁止冒泡執行easyui給月份綁定的事件
e.stopPropagation();
//得到年份
var year = /\d{4}/.exec(span_2.html())[0],
//月份
//之前是這樣的month = parseInt($(this).attr('abbr'), 10) + 1;
month = parseInt($(this).attr('abbr'), 10);
//隱藏日期對象
$('#attYearMonthEnd').datebox('hidePanel')
//設置日期的值
.datebox('setValue', year + '-' + month);
});
}, 0);
},
//配置parser，返回選擇的日期
parser: function (s) {
if (!s) return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
},
//配置formatter，只返回年月 之前是這樣的d.getFullYear() + '-' +(d.getMonth());
formatter: function (d) {
var currentMonth = (d.getMonth() + 1);
var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
return d.getFullYear() + '-' + currentMonthStr;
},
onChange: function (newValue, oldValue) {
yearEndSelect = parseInt(newValue.split('-')[0]);
monthEndSelect = parseInt(newValue.split('-')[1]);
//獲取開始和結束時間
var start = yearStartSelect + '-' + monthStartSelect + '-' + 1;
var end = yearEndSelect + '-' + monthEndSelect + '-' + 1;
//日期比較方法
function CompareDate(d1, d2) {
return ((new Date(d1.replace(/-/g, "\/"))) <= (new Date(d2.replace(/-/g, "\/"))));
}
//如果開始時間<=結束時間就執行以下代碼
if (CompareDate(start, end)) {
//價格預測和實際數據比較（按月）
MonthPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect, monthStartSelect, yearEndSelect, monthEndSelect);
} else {
$('#attYearMonthStart').datebox("setValue", newValue)
}
},
});
// 設置當月
$("#attYearMonthStart").datebox("setValue", myformatterDY(new_time));
$("#attYearMonthEnd").datebox("setValue", myformatterDY(curr_time));
//設置日期
$("#boxDateStart").datebox("setValue", myformatterDate(new_time2));
$("#boxDateEnd").datebox("setValue", myformatterDate(curr_time));
$('#tt').tabs({
width: $("#tt").parent().width(),
height: "auto",
onSelect:function(title,index){
console.log(title,index);
chartResize();
}
});
});
/***************************** $(document).ready(function(){}) 結束 **********************************************************/
/************************************ 公共方法 開始 **********************************************************/
// 格式化日期(年-月)
function myformatterDY(date) {
//獲取年份
var y = date.getFullYear();
//獲取月份
var m = date.getMonth()+1 ;
return y + '-' + m;
}
// 格式化日期(年-月-日)
function myformatterDate(date) {
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
}
//保留兩位小數（美國四舍六入）
function formatFloat(val, row) {
if (val == null) { return null; }
return val.toFixed(2);
}
function formatDate(date) {
var pa = /.*\((.*)\)/;
var unixtime = date.match(pa)[1].substring(0, 10);
return getTime(unixtime);
}
function getTime(/** timestamp=0 **/) {
var ts = arguments[0] || 0;
var t, y, m, d, h, i, s;
t = ts ? new Date(ts * 1000) : new Date();
y = t.getFullYear();
m = t.getMonth() + 1;
d = t.getDate();
// h = t.getHours();
// i = t.getMinutes();
// s = t.getSeconds();
// 可根據需要在這里定義時間格式
// return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) ;
}
/************************************ 公共方法 結束 **********************************************************/
/************************************ echarts方法 開始 **********************************************************/
//近三十天的選中品種價格走勢曲線圖
var dayPriceHtml= document.getElementById('dayPrice');
var chart_dayPrice_line = echarts.init(dayPriceHtml);
function DayPriceLineAJAXData(locationSelect, productSelect) {
//近三十天的選中品種價格走勢曲線圖 異步加載數據
var url = "@Url.Action("DayPriceLineAJAXData")";
if (locationSelect && productSelect) {
$("#dayPrice_loadding").show();
$("#dayPrice").hide();
$.ajax({
url: url,
type:'get',
dataType:'json',
data:{ yjxzqid: locationSelect, ncpid: productSelect },
success:function (result) {
if(result!=null&&result!=undefined){
$("#dayPrice_loadding").hide();
$("#dayPrice").show();
}
chart_dayPrice_line.setOption({
title: {
text: productSelectName+'每日價格走勢和預測圖',
left: "center",
},
legend: {
data: ['田頭價格', '批發價格', '零售價格','交易量'],
top: '30px',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '20px',
feature: {
dataView: {
show: true,
title: '數據視圖',
readOnly: true, //點擊刷新按鈕會導致第二列數據消失，此處設置只讀是為了隱藏刷新按鈕。
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐標數據
var series = opt.series; //折線圖數據
var tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭第一列
var tdBodys = ''; //表數據
//組裝表頭
var nameData = new Array('田頭價格', '批發價格', '零售價格', '交易量', '數據類型');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table = '<table border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//組裝表數據
//行數
for (var i = 0; i < axisData.length; i++) {
//列數
for (var j = 0; j < series.length + 1; j++) {
if (j < 7) {
var temp = series[j].data[i];
} else {
var temp = 0; //為了顯示地7列
}
//瀏覽器斷點調試知series.length長度為7,0 1 2 3 4 5 6 分別表示 實際田頭價格, 實際批發價格, 實際零售價格, 批發交易量,
//組裝第7列來區分實際價格和預測價格。
if (i < 23) {//前23天取實際數據
if (j == 0 || j == 1 || j == 2 || j == 6 || j == 7) {
if (temp != null && temp != undefined) {
if (j == 7) {
tdBodys += '<td>實際</td>';
} else {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
}
} else {
tdBodys += '<td></td>';
}
}
} else {//后7天取預測數據
if (j == 3 || j == 4 || j == 5 || j == 7) {
if (temp != null && temp != undefined) {
if (j == 7) {
tdBodys += '<td></td><td>預測</td>';
} else {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
}
} else {
tdBodys += '<td></td>';
}
}
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
dataZoom: { show: true, title: { zoom: '區域縮放', back: '區域縮放還原' } },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.cjrqList,
},
yAxis:[ {
name:'價格(元)',
type: 'value',
min: function (value) {
return Math.floor(value.min - 0.1);
},
axisLabel: {
formatter: '{value} 元'
}
},
{
name: '交易量(噸)',
nameLocation: 'end',
type: 'value',
inverse: false,
}
],
series: [
{
name: '田頭價格',
type: 'line',
data: result.ttjgList,
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgList,
connectNulls: true
},
{
name: '田頭價格',
type: 'line',
data: result.ttjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
}
}
},
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
}
}
},
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true
lineStyle: {
normal: {
width: 2,
type: 'dotted' //'dotted'虛線 'solid'實線
}
},
connectNulls: true
},
{
name: '交易量',
type: 'line',
yAxisIndex: 1,
data: result.jylList,
},
],
tooltip: {
trigger: 'axis',
formatter: function (data) {
var seriesNames = [];
var formateStrings = [];
var formateString = "";
// console.log(typeof (data));
formateStrings.push(data[0].name);
if (data.length != undefined) {
for (var i in data) {
var item = data[i];
if (item.data == null || item.data == "-") {
}
else {
if (seriesNames.indexOf(item.seriesName) < 0) {
seriesNames.push(item.seriesName);
formateStrings.push(item.marker + item.seriesName + ": " + item.data.toFixed(2));
}
}
}
}
else {
var item = data;
if (item.data == null || item.data == "-") {
}
else {
if (!seriesNames.contains(item.seriesName)) {
seriesNames.push(item.seriesName);
formateStrings.push(item.marker + item.seriesName + ": " + item.data.toFixed(2));
}
}
}
formateString = formateStrings.join("<br />");
return formateString;
}
}
})
chart_dayPrice_line.resize();
}
});
}
}
//近12周選中品種價格走勢曲線圖
var weekPriceHtml= document.getElementById('weekPrice');
var chartWeekPrice = echarts.init(weekPriceHtml);
//近12個周選中品種價格走勢曲線圖 異步加載數據
function WeekPriceLineAJAXData(locationSelect, productSelect) {
$("#weekPrice_loadding").show();
$("#weekPrice").hide();
var url = "@Url.Action("WeekPriceLineAJAXData")";
if (locationSelect && productSelect) {
$.post(url, { yjxzqid: locationSelect, ncpid: productSelect }, function (result) {
if(result!=null&&result!=undefined){
$("#weekPrice_loadding").hide();
$("#weekPrice").show();
}
if(result.lsjgList.length >0){
result.lsjgListForecast.splice(8, 1, result.lsjgList[8]);
}
if (result.pfjgList.length > 0) {
result.pfjgListForecast.splice(8, 1, result.pfjgList[8]);
}
if (result.ttjgList.length > 0) {
result.ttjgListForecast.splice(8, 1, result.ttjgList[8]);
}
chartWeekPrice.setOption({
title: {
text:productSelectName+ '每周價格走勢和預測圖',
left: "center",
},
legend: {
data: ['田頭價格', '批發價格', '零售價格','交易量'],
top: 30
},
// color: ['#c23531', '#2f4554', '#61a0a8', '#c23531', '#2f4554', '#61a0a8'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '20px',
feature: {
dataView: {
show: true,
title: '數據視圖',
readOnly: true, //點擊刷新按鈕會導致第二列數據消失，此處設置只讀是為了隱藏刷新按鈕。
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐標數據
var series = opt.series; //折線圖數據
var tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭第一列
var tdBodys = ''; //表數據
//組裝表頭
var nameData = new Array('田頭價格', '批發價格', '零售價格', '交易量', '數據類型');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table = '<table border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//組裝表數據
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length + 1; j++) {
if (j < 7) {
var temp = series[j].data[i];
} else {
temp = ''; //為了顯示地7列
}
if (i < 9) {//前九行為實際價格
if (j == 0 || j == 1 || j == 2 || j == 6 || j == 7) {
if (temp != null && temp != undefined) {
if (j == 7) {
tdBodys += '<td>實際</td>';
} else {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
}
} else {
tdBodys += '<td></td>';
}
}
} else {//后3行為預測價格
if (j == 3 || j == 4 || j == 5 || j == 7) {
if (temp != null && temp != undefined) {
if (j == 7) {
tdBodys += '<td></td><td>預測</td>';
} else {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
}
} else {
tdBodys += '<td></td>';
}
}
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
dataZoom: { show: true, title: { zoom: '區域縮放', back: '區域縮放還原' } },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.weekList,
},
yAxis: [
{
name: '價格(元)',
nameLocation: 'end',
type: 'value',
axisLabel: {
formatter: '{value}元'
}
},
{
name: '交易量(噸)',
nameLocation: 'end',
type: 'value',
inverse: false,
}
],
series: [
{
name: '田頭價格',
type: 'line',
data: result.ttjgList,
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted', //'dotted'虛線 'solid'實線
}
}
},
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
connectNulls: true
},
{
name: '田頭價格',
type: 'line',
data: result.ttjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
connectNulls: true
},
{
name: '交易量',
type: 'line',
yAxisIndex: 1,
data: result.jylList,
},
],
tooltip: {
trigger: 'axis',
formatter: function (data) {
var seriesNames = [];
var formateStrings = [];
var formateString = "";
// console.log(typeof (data));
formateStrings.push(data[0].name);
if (data.length != undefined) {
for (var i in data) {
var item = data[i];
if (item.data == null || item.data == "-") {
}
else {
if (seriesNames.indexOf(item.seriesName) < 0) {
seriesNames.push(item.seriesName);
formateStrings.push(item.marker + item.seriesName + ": " + item.data.toFixed(2));
}
}
}
}
else {
var item = data;
if (item.data == null || item.data == "-") {
}
else {
if (!seriesNames.contains(item.seriesName)) {
seriesNames.push(item.seriesName);
formateStrings.push(item.marker + item.seriesName + ": " + item.data.toFixed(2));
}
}
}
formateString = formateStrings.join("<br />");
return formateString;
}
}
});
});
}
}
//近12個月的月均選中品種價格走勢曲線圖
var monthPriceHtml= document.getElementById('monthPrice');
var chartMonthPrice = echarts.init(monthPriceHtml);
//近12個月的月均選中品種價格走勢曲線圖 異步加載數據
function MonthPriceLineAJAXData(locationSelect, productSelect) {
var url = "@Url.Action("MonthPriceLineAJAXData")";
if (locationSelect && productSelect) {
$("#monthPrice_loadding").show();
$("#monthPrice").hide();
$.post(url, { yjxzqid: locationSelect, ncpid: productSelect }, function (result) {
if(result!=null&&result!=undefined){
$("#monthPrice_loadding").hide();
$("#monthPrice").show();
}
chartMonthPrice.setOption({
title: {
text:productSelectName+ '月均價格走勢和預測圖',
left: "center",
},
legend: {
data: ['田頭價格', '批發價格', '零售價格','交易量'],
top: 30
},
// color: ['#c23531', '#2f4554', '#61a0a8', '#c23531', '#2f4554', '#61a0a8'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '20px',
feature: {
dataView: {
show: true,
title: '數據視圖',
readOnly: true, //點擊刷新按鈕會導致第二列數據消失，此處設置只讀是為了隱藏刷新按鈕。
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐標數據
var series = opt.series; //折線圖數據
var tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭第一列
var tdBodys = ''; //表數據
//組裝表頭
var nameData = new Array('田頭價格', '批發價格', '零售價格', '交易量', '數據類型');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table = '<table border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//組裝表數據
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length + 1; j++) {
if (j < 7) {
var temp = series[j].data[i];
} else {
temp = ''; //為了顯示地7列
}
if (i < 9) {//實際
if (j == 0 || j == 1 || j == 2 || j == 6 || j == 7) {
if (temp != null && temp != undefined) {
if (j == 7) {
tdBodys += '<td>實際</td>';
} else {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
}
} else {
tdBodys += '<td></td>';
}
}
} else {//預測
if (j == 3 || j == 4 || j == 5 || j == 7) {
if (temp != null && temp != undefined) {
if (j == 7) {
tdBodys += '<td></td><td>預測</td>';
} else {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
}
} else {
tdBodys += '<td></td>';
}
}
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
dataZoom: { show: true, title: { zoom: '區域縮放', back: '區域縮放還原' } },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.monthList,
},
yAxis: [
{
name: '價格(元)',
nameLocation: 'end',
type: 'value',
//min: function (value) {
// return Math.floor(value.min - 0.1);
//},
axisLabel: {
formatter: '{value}元'
}
},
{
name: '交易量(噸)',
nameLocation: 'end',
type: 'value',
inverse: false,
}
],
series: [
{
name: '田頭價格',
type: 'line',
data: result.ttjgList,
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted', //'dotted'虛線 'solid'實線
}
}
},
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
connectNulls: true
},
{
name: '田頭價格',
type: 'line',
data: result.ttjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
connectNulls: true
},
{
name: '交易量',
type: 'line',
yAxisIndex: 1,
data: result.jylList,
},
],
tooltip: {
trigger: 'axis',
formatter: function (data) {
var seriesNames = [];
var formateStrings = [];
var formateString = "";
// console.log(typeof (data));
formateStrings.push(data[0].name);
if (data.length != undefined) {
for (var i in data) {
var item = data[i];
if (item.data == null || item.data == "-") {
}
else {
if (seriesNames.indexOf(item.seriesName) < 0) {
seriesNames.push(item.seriesName);
formateStrings.push(item.marker + item.seriesName + ": " + item.data.toFixed(2));
}
}
}
}
else {
var item = data;
if (item.data == null || item.data == "-") {
}
else {
if (!seriesNames.contains(item.seriesName)) {
seriesNames.push(item.seriesName);
formateStrings.push(item.marker + item.seriesName + ": " + item.data.toFixed(2));
}
}
}
formateString = formateStrings.join("<br />");
return formateString;
}
}
});
});
}
}
//價格預測和實際數據比較 按天
var dayPriceCompareHtml= document.getElementById('dayPriceCompare');
var chart_dayPriceCompare_line = echarts.init(dayPriceCompareHtml);
function DayPriceCompareLineAJAXData(locationSelect, productSelect, startDay, endDay) {
//價格預測和實際數據比較 按天 異步加載數據
var url = "@Url.Action("DayPriceCompareLineAJAXData")";
if (locationSelect && productSelect && startDay && endDay) {
$.post(url, { yjxzqid: locationSelect, ncpid: productSelect, start: startDay, end: endDay }, function (result) {
chart_dayPriceCompare_line.setOption({
title: {
text: productSelectName+ '預測價格與實際數據比較(按天)',
left: "center",
},
tooltip: {
trigger: 'axis'
},
legend: {
// data: ['田頭價格', '批發價格', '零售價格', '田頭預測價格', '批發預測價格', '零售預測價格'],
data: ['田頭價格', '批發價格', '零售價格','交易量'],
top: '30px',
},
// color: ['#c23531', '#2f4554', '#61a0a8', '#c23531', '#2f4554', '#61a0a8'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '20px',
feature: {
dataView: {
show: true,
title: '數據視圖',
readOnly: true, //點擊刷新按鈕會導致第二列數據消失，此處設置只讀是為了隱藏刷新按鈕。
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐標數據
var series = opt.series; //折線圖數據
var tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭第一列
var tdBodys = ''; //表數據
//series.forEach(function (item) {
// //組裝表頭
// tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
//});
//組裝表頭
var nameData = ['田頭價格', '批發價格', '零售價格', '田頭預測價格', '批發預測價格', '零售預測價格', '交易量'];
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table = '<table border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//組裝表數據
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
dataZoom: { show: true, title: { zoom: '區域縮放', back: '區域縮放還原' } },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.cjrqList,
},
yAxis: [
{
name: '價格(元)',
nameLocation: 'end',
type: 'value',
min: function (value) {
return Math.floor(value.min - 0.1);
},
axisLabel: {
formatter: '{value}元'
}
},
{
name: '交易量(噸)',
nameLocation: 'end',
type: 'value',
inverse: false,
}
],
series: [
{
name: '田頭價格',
type: 'line',
data: result.ttjgList,
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgList,
connectNulls: true
},
{
name: '田頭價格',
//name: '田頭預測價格',
type: 'line',
data: result.ttjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',//'dotted'虛線 'solid'實線
}
}
},
connectNulls: true
},
{
name: '批發價格',
// name: '批發預測價格',
type: 'line',
data: result.pfjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
}
}
},
connectNulls: true
},
{
name: '零售價格',
//name: '零售預測價格',
type: 'line',
data: result.lsjgListForecast,
smooth: false,
lineStyle: {
normal: {
width: 2,
type: 'dotted'
}
},
connectNulls: true
},
{
name: '交易量',
type: 'line',
yAxisIndex: 1,
data: result.jylList,
connectNulls: true
},
],
tooltip: {
trigger: 'axis',
formatter: function (data) {
var seriesNames = [];
var formateStrings = [];
var formateString = "";
// console.log(typeof (data));
formateStrings.push(data[0].name);
if (data.length != undefined) {
for (var i in data) {
var item = data[i];
//斷點調試 知道 item.seriesId 為 6位"交易量0" ，7位"批發價格0"，9位"批發預測價格0",雙引號也占位。
// 獲取三種實際價格名稱
if (item.seriesId.length == 7) {
var seriesId = item.seriesId.substring(1, 5);
}
// 獲取三種預測價格名稱
if (item.seriesId.length == 9) {
var seriesId = item.seriesId.substring(1, 7);
}
// 獲取交易量名稱
if (item.seriesId.length == 6) {
var seriesId = item.seriesId.substring(1, 4);
}
if (item.data == null || item.data == "-") {
}
else {
if (seriesNames.indexOf(seriesId) < 0) {
seriesNames.push(seriesId);
formateStrings.push(item.marker + seriesId + ": " + item.data.toFixed(2));
}
}
}
}
//else {
// var item = data;
// if (item.seriesId.length == 7) {
// var seriesId = item.seriesId.substring(1, 5);
// } else {
// var seriesId = item.seriesId.substring(1, 7);
// }
// if (item.data == null || item.data == "-") {
// }
// else {
// if (!seriesNames.contains(seriesId)) {
// seriesNames.push(seriesId);
// formateStrings.push(item.marker + seriesId + ": " + item.data.toFixed(2));
// }
// }
// }
formateString = formateStrings.join("<br />");
return formateString;
}
}
})
//chartResize();
});
}
}
//價格預測和實際數據比較 按周
var weekPriceCompareHtml= document.getElementById('weekPriceCompare');
var chartWeekPriceCompare_line = echarts.init(weekPriceCompareHtml);
//價格預測和實際數據比較 按周 異步加載數據
function WeekPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect_Week, weekStartSelect, yearEndSelect_Week, weekEndSelect) {
var url = "@Url.Action("WeekPriceCompareLineAJAXData")";
if (locationSelect && productSelect && yearStartSelect_Week && weekStartSelect && yearEndSelect_Week && weekEndSelect) {
$.post(url, { yjxzqid: locationSelect, ncpid: productSelect, yearStart: yearStartSelect_Week, weekStart: weekStartSelect, yearEnd: yearEndSelect_Week, weekEnd: weekEndSelect }, function (result) {
chartWeekPriceCompare_line.setOption({
title: {
text: productSelectName + '預測價格和實際數據比較(按周)',
left: "center",
},
legend: {
data: ['田頭價格', '批發價格', '零售價格','交易量'],
top: '30px',
},
// color: ['#c23531', '#2f4554', '#61a0a8','#c23531', '#2f4554', '#61a0a8'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '20px',
feature: {
dataView: {
show: true,
title: '數據視圖',
readOnly: true, //點擊刷新按鈕會導致第二列數據消失，此處設置只讀是為了隱藏刷新按鈕。
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐標數據
var series = opt.series; //折線圖數據
var tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭第一列
var tdBodys = ''; //表數據
//series.forEach(function (item) {
// //組裝表頭
// tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
//});
//組裝表頭
var nameData = ['田頭價格', '批發價格', '零售價格', '田頭預測價格', '批發預測價格', '零售預測價格', '交易量'];
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table = '<table border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//組裝表數據
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
dataZoom: { show: true, title: { zoom: '區域縮放', back: '區域縮放還原' } },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: result.weekList,
},
],
yAxis: [
{
name: '價格(元)',
nameLocation: 'end',
type: 'value',
axisLabel: {
formatter: '{value}元'
}
},
{
name: '交易量(噸)',
nameLocation: 'end',
type: 'value',
inverse: false,
}
],
series: [
{
name: '田頭價格',
type: 'line',
data: result.ttjgList,
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgList,
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgList,
connectNulls: true
},
{
name: '田頭價格',
type: 'line',
data: result.ttjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',//'dotted'虛線 'solid'實線
}
}
},
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
}
}
},
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
}
}
},
connectNulls: true
},
{
name: '交易量',
type: 'line',
yAxisIndex: 1,
data: result.jylList,
connectNulls: true
},
],
tooltip: {
trigger: 'axis',
formatter: function (data) {
var seriesNames = [];
var formateStrings = [];
var formateString = "";
formateStrings.push(data[0].name);
if (data.length != undefined) {
for (var i in data) {
var item = data[i];
//斷點調試 知道 item.seriesId 為 6位"交易量0" ，7位"批發價格0"，9位"批發預測價格0",雙引號也占位。
// 獲取三種實際價格名稱
if (item.seriesId.length == 7) {
var seriesId = item.seriesId.substring(1, 5);
}
// 獲取三種預測價格名稱
if (item.seriesId.length == 9) {
var seriesId = item.seriesId.substring(1, 7);
}
// 獲取交易量名稱
if (item.seriesId.length == 6) {
var seriesId = item.seriesId.substring(1, 4);
}
if (item.data == null || item.data == "-") {
}
else {
if (seriesNames.indexOf(seriesId) < 0) {
seriesNames.push(seriesId);
formateStrings.push(item.marker + seriesId + ": " + item.data.toFixed(2));
}
}
}
}
formateString = formateStrings.join("<br />");
return formateString;
}
}
});
});
}
}
//價格預測和實際數據比較 按月
var monthPriceCompareHtml= document.getElementById('monthPriceCompare');
var chartMonthPriceCompare_line = echarts.init(monthPriceCompareHtml);
//價格預測和實際數據比較 按月 異步加載數據
function MonthPriceCompareLineAJAXData(locationSelect, productSelect, yearStartSelect, monthStartSelect, yearEndSelect, monthEndSelect) {
var url = "@Url.Action("MonthPriceCompareLineAJAXData")";
if (locationSelect && productSelect && yearStartSelect && monthStartSelect && yearEndSelect && monthEndSelect) {
$.post(url, { yjxzqid: locationSelect, ncpid: productSelect, yearStart: yearStartSelect, monthStart: monthStartSelect, yearEnd: yearEndSelect, monthEnd: monthEndSelect }, function (result) {
chartMonthPriceCompare_line.setOption({
title: {
text: productSelectName + '預測價格和實際數據比較(按月)',
left: "center",
},
legend: {
data: ['田頭價格', '批發價格', '零售價格','交易量'],
top: '30px',
},
// color: ['#c23531', '#2f4554', '#61a0a8','#c23531', '#2f4554', '#61a0a8'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '20px',
feature: {
dataView: {
show: true,
title: '數據視圖',
readOnly: true, //點擊刷新按鈕會導致第二列數據消失，此處設置只讀是為了隱藏刷新按鈕。
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐標數據
var series = opt.series; //折線圖數據
var tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭第一列
var tdBodys = ''; //表數據
//series.forEach(function (item) {
// //組裝表頭
// tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
//});
//組裝表頭
var nameData = ['田頭價格', '批發價格', '零售價格', '田頭預測價格', '批發預測價格', '零售預測價格', '交易量'];
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table = '<table border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//組裝表數據
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp.toFixed(2) + '</td>';
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
dataZoom: { show: true, title: { zoom: '區域縮放', back: '區域縮放還原' } },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: result.monthList,
},
],
yAxis: [
{
name: '價格(元)',
nameLocation: 'end',
type: 'value',
axisLabel: {
formatter: '{value}元'
}
},
{
name: '交易量(噸)',
nameLocation: 'end',
type: 'value',
inverse: false,
}
],
series: [
{
name: '田頭價格',
type: 'line',
data: result.ttjgList,
connectNulls: true
//lineStyle: {
// normal: {
// color: '#c23531'
// }
//}
},
{
name: '批發價格',
type: 'line',
data: result.pfjgList,
connectNulls: true
//lineStyle: {
// normal: {
// color: '#2f4554'
// }
//}
},
{
name: '零售價格',
type: 'line',
data: result.lsjgList,
connectNulls: true
//lineStyle: {
// normal: {
// color: '#61a0a8'
// }
//}
},
{
name: '田頭價格',
type: 'line',
data: result.ttjgListForecast,
smooth: false, //關鍵點，為true是不支持虛線的，實線就用true。
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',//'dotted'虛線 'solid'實線
// color: '#c23531'
}
}
},
connectNulls: true
},
{
name: '批發價格',
type: 'line',
data: result.pfjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
// color: '#2f4554'
}
}
},
connectNulls: true
},
{
name: '零售價格',
type: 'line',
data: result.lsjgListForecast,
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted',
// color: '#61a0a8'
}
}
},
connectNulls: true
},
{
name: '交易量',
type: 'line',
yAxisIndex: 1,
data: result.jylList,
connectNulls: true
},
],
tooltip: {
trigger: 'axis',
formatter: function (data) {
var seriesNames = [];
var formateStrings = [];
var formateString = "";
formateStrings.push(data[0].name);
if (data.length != undefined) {
for (var i in data) {
var item = data[i];
//斷點調試 知道 item.seriesId 為 6位"交易量0" ，7位"批發價格0"，9位"批發預測價格0",雙引號也占位。
// 獲取三種實際價格名稱
if (item.seriesId.length == 7) {
var seriesId = item.seriesId.substring(1, 5);
}
// 獲取三種預測價格名稱
if (item.seriesId.length == 9) {
var seriesId = item.seriesId.substring(1, 7);
}
// 獲取交易量名稱
if (item.seriesId.length == 6) {
var seriesId = item.seriesId.substring(1, 4);
}
if (item.data == null || item.data == "-") {
}
else {
if (seriesNames.indexOf(seriesId) < 0) {
seriesNames.push(seriesId);
formateStrings.push(item.marker + seriesId + ": " + item.data.toFixed(2));
}
}
}
}
formateString = formateStrings.join("<br />");
return formateString;
}
}
});
});
}
}
/************************************ echarts方法 結束 **********************************************************/
//窗口大小改變后，重新調整echarts大小
window.onresize = function () {
setTimeout("chartResize();", 100);
}
function chartResize() {
//先改變大小
$('#tt').tabs({
width: $("#tt").parent().width(),
height: "auto"
});
//重置大小，使其子模塊也隨之變化。
$("#tt").tabs("resize");
resizeEchartsContainer();
chart_dayPrice_line.resize();
chartWeekPrice.resize();
chartMonthPrice.resize();
chart_dayPriceCompare_line.resize()
chartMonthPriceCompare_line.resize();
chartWeekPriceCompare_line.resize();
console.log("resize2");
}
//echart自適應高度和寬度
var resizeEchartsContainer = function () {
//chart_dayPrice_line.style.width = window.innerWidth+'px'; //寬度不變
// document.getElementById('dayPrice').style.height=window.innerHeight-60-27-34-27-60-90+'px' ; //通過窗體高度減去外部高度。
dayPriceHtml.style.height=window.innerHeight-298+'px';
weekPriceHtml.style.height=window.innerHeight-298+'px';
monthPriceHtml.style.height=window.innerHeight-298+'px';
dayPriceCompareHtml.style.height=window.innerHeight-328+'px';//-60-27-34-27-30-60-90
weekPriceCompareHtml.style.height=window.innerHeight-331+'px';
monthPriceCompareHtml.style.height=window.innerHeight-328+'px';
};
</script>