function chartClick(param){ document.getElementById('console1').innerHTML=" T:"+ option1.series[0].data[param.dataIndex]+" ℃" document.getElementById('console2').innerHTML=" P:"+ option2.series[0].data[param.dataIndex]+" bar(abs)" document.getElementById('console3').innerHTML=" Qb:"+ option3.series[0].data[param.dataIndex]+" Sm3/h" document.getElementById('console4').innerHTML=" Q:"+option3.series[1].data[param.dataIndex]+" Sm3/h" } myChart1.on('click',chartClick); myChart2.on('click',chartClick); myChart3.on('click',chartClick);
完整代码
<div id="" class="row" style="">
<div class="col-lg-12">
<h3 class="box-title general-title margin_t0">温度 <span id="console1"></span></h3>
<div id="main1" style="height:150px;"></div>
</div>
<div class="col-lg-12">
<h3 class="box-title general-title">压力<span id="console2"></span></h3>
<div id="main2" style="height:150px;"></div>
</div>
<div class="col-lg-12">
<h3 class="box-title general-title">瞬时标况流量 <span id="console3" class="margin_r20"></span>瞬时工况流量<span id="console4"></span></h3>
<div id="main3" style="height:200px;"></div>
</div>
<div class="col-lg-12">
<h3 class="box-title general-title"><span id="h-xslj">累计供气量</span> <span id="console5" class="margin_r20"></span>计量点时间段<span id="console6"></span></h3>
<div id="barchart1" style="height:300px;"></div>
</div>
</div>
<script>
var axisData = [
"8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"
];
option1 = {
tooltip: {
trigger: 'axis',
//showDelay: 0 // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
//axisPointer : {
//type : 'cross',
//crossStyle : {
//color : '#50d9f6',
//width : 1,
//type : 'solid'
//
//}
//},
formatter: "{b} <br/>{a}: {c}"
},
grid: {
top: 5,
},
xAxis: [{
type: 'category',
//position:'top',
boundaryGap: true,
axisLabel: { show: true },
axisTick: { onGap: false },
splitLine: { show: true },
data: axisData
}],
yAxis: {}, // y轴不能删除
series: [{
name: '计量点压力',
type: 'line',
smooth: true,
//symbol: 'none',
data: [
70, 50, 80, 70, 20, 20, 90, 60, 30, 80, 50, 20, 20, 50, 30, 20, 50, 90, 30, 20, 40, 90, 20, 40
],
}]
};
myChart1 = echarts.init(document.getElementById('main1'), theme);
myChart1.setOption(option1);
ObjectResize(myChart1.resize)
function ObjectResize(fn) {
if (window.addEventListener) {
window.addEventListener("resize", fn, false);
} else {
window.attachEvent("onresize", fn)
}
}
option2 = {
tooltip: {
trigger: 'axis',
// showDelay: 0 // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
},
grid: {
top: 5,
},
xAxis: [{
type: 'category',
position: 'bottom',
boundaryGap: true,
axisTick: { onGap: false },
splitLine: { show: true },
data: axisData
}],
yAxis: {},
series: [{
name: '瞬时工况流量',
type: 'line',
//symbol: 'none',
smooth: true,
data: [
80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80, 80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80
],
lineStyle: {
normal: {
color: '#0cc894'
}
},
itemStyle: {
normal: {
color: '#0cc894'
}
},
}]
};
myChart2 = echarts.init(document.getElementById('main2'), theme);
myChart2.setOption(option2);
ObjectResize(myChart2.resize)
var option3 = {
legend: {
data: ['标况流量', '工况流量'],
},
grid: {},
tooltip: {
trigger: 'axis', //没有此触发,则下面的样式无效
},
xAxis: {
type: 'category',
data: axisData,
},
yAxis: {},
series: [{
name: '标况流量',
type: 'line',
smooth: true,
data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56],
},
{
name: '工况流量',
type: 'line',
smooth: true,
data: [80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80, 80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80],
},
]
};
var myChart3 = echarts.init(document.getElementById('main3'), theme);
myChart3.setOption(option3);
ObjectResize(myChart3.resize)
var option4 = {
legend: {
data: ['供气量'],
},
tooltip: {
trigger: 'axis', //没有此触发,则下面的样式无效
},
xAxis: {
data: ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"],
},
yAxis: {},
series: [{
name: '供气量',
type: 'bar',
data: [11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22],
}]
};
var myChart4 = echarts.init(document.getElementById('barchart1'), theme);
myChart4.setOption(option4);
echarts.connect([myChart1, myChart2, myChart3, myChart4]);
ObjectResize(myChart4.resize);
function chartClick(param) {
document.getElementById('console1').innerHTML = option3.xAxis.data[param.dataIndex]
document.getElementById('console2').innerHTML = " P:" + option2.series[0].data[param.dataIndex] + " bar(abs)"
document.getElementById('console3').innerHTML = " Qb:" + option3.series[0].data[param.dataIndex] + " Sm3/h"
document.getElementById('console4').innerHTML = " Q:" + option3.series[1].data[param.dataIndex] + " Sm3/h"
document.getElementById('console5').innerHTML = " Qb:" + option4.series[0].data[param.dataIndex] + " Sm3/h"
document.getElementById('console6').innerHTML = option4.xAxis.data[param.dataIndex]
document.getElementById('h-xslj').innerHTML = "小时累计供气量"
}
myChart1.on('click', chartClick);
myChart2.on('click', chartClick);
myChart3.on('click', chartClick);
myChart4.on('click', chartClick);
</script>
(adsbygoogle = window.adsbygoogle || []).push({});