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 : {
}
}
} ]
});