/** 全域性資料變數 **/

var echarts_tcpData,echarts_udpData,echarts_date;

/** 線上量趨勢 **/
function load_online_bar() {
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('chart_online_bar'), global_theme);
myChart.showLoading();
$.get(chart_online_bar).done(
function(data) {
myChart.hideLoading();
// 指定圖表的配置項和資料
option = {
tooltip : {
trigger : 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
yAxis : {
type : 'value'
},
dataZoom: [
             {   xAxisIndex: 0,
             show:true,
                 type: 'slider', // 這個 dataZoom 元件是 slider 型 dataZoom 元件
                 startValue: 0,      // 從頭開始。
                 endValue: 9         // 一次性展示五個。
             }
         ],
xAxis : {
type : 'category',
data : data.xData
},
series : [ {
name : 'UDP',
type : 'bar',
//barGap : '-100%',


label : {
normal : {
show : false,
position : 'insideRight'
}
},
data : data.udpData
}, {
name : 'TCP',
type : 'bar',
label : {
normal : {
show : false,
position : 'insideRight'
}
},
data : data.tcpData
}


]
};
myChart.setOption(option);


//載入完柱狀圖後加載餅圖，因為餅圖需要柱狀圖的資料;
echarts_tcpData = data.tcpData;
echarts_udpData = data.udpData;
echarts_date = data.xData;
if(echarts_tcpData.length > 0){
load_protocol_pie(echarts_tcpData.length - 1);
}

myChart.on('click', function (params) {
load_protocol_pie(params.dataIndex);
});

});
}


/** 從柱狀圖聯動餅圖 **/
function load_protocol_pie(index) {
var myChart = echarts.init(document.getElementById('chart_protocol_pie'), global_theme);


myChart.setOption({
title: {
       text: echarts_date[index],
       left: 'center',
       top: 20,
       textStyle: {
           color: '#555'
       }
   },
tooltip : {
show : true,
trigger : 'item',
formatter : '{b}: {c} ({d}%)'
},
series : [ {
type : 'pie',
radius : [ '40%', '55%' ],
label : {
show : false
},
data : [
                  {"value":echarts_tcpData[index], "name":"TCP"},
                  {"value":echarts_udpData[index], "name":"UDP"}
              ],
emphasis : {
formatter : {


}
}
} ]
});