使用事件来实现echarts之间的联动

/** 全局数据变量 **/

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 : {


}
}
} ]
});

你可能感兴趣的:(使用事件来实现echarts之间的联动)