使用事件来实现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 : {


}
}
} ]
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值