echarts多图联动tooltip不联动?
为什么我的echart多图联动,只有鼠标移动到最后一个图的时候才会显示tooltip,而不是所有图鼠标移动到上面都能显示toolip呢,怎么能移动到每个图表都显示联动的tooltip呢
版本:3.8.4
另外建议官网下载的echarts.js带version注释
<script>
$(function(){
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));
// myChart1.setTheme("macarons");
// myChart2.setTheme("macarons");
// myChart3.setTheme("macarons");
// myChart4.setTheme("macarons");
dataX = [
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
'00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00',
];
dataY = [
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
15,15,16,18,18,19,19,19,19,19,
];
var option1 = {
title : {
show: false,
text: '温度状况',
subtext: '纯属虚构'
},
tooltip : {
show: true,
//trigger: 'axis'
},
legend: {
show: false,
data:['设定温度','进水温度','出水温度','环境温度']
},
xAxis : [
{
show: false,
type : 'category', //x轴为类目类型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : dataX
}],
yAxis : [
{
show: false,
type : 'value' //y轴为值类型
}
],
series : [{
name:'设定温度',
type:'bar',
smooth:true,
data:dataY
}]
}
var option2 = {
show: false,
tooltip : {
show: true,
//trigger: 'axis'
},
legend: {
y:-30,
data:['设定温度','进水温度','出水温度','环境温度']
},
xAxis : [
{
show: false,
type : 'category', //x轴为类目类型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : dataX
}],
yAxis : [
{
show: false,
type : 'value' //y轴为值类型
}
],
series : [{
name:'进水温度',
type:'bar',
smooth:true,
data:dataY
}]
}
var option3 = {
tooltip : {
show: true,
//trigger: 'axis'
},
legend: {
y : -30,
data:['设定温度','进水温度','出水温度','环境温度']
},
xAxis : [
{
show: false,
type : 'category', //x轴为类目类型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : dataX
}],
yAxis : [
{
show: false,
type : 'value' //y轴为值类型
}
],
series : [{
name:'出水温度',
type:'bar',
smooth:true,
data:dataY
}]
}
var option4 = {
tooltip : {
show: true,
// trigger: 'axis'
},
legend: {
y : -30,
data:['设定温度','进水温度','出水温度','环境温度']
},
xAxis : [
{
show: false,
type : 'category', //x轴为类目类型
axisLabel:{
show:true,
interval:0,
rotate:45
},
data : dataX
}],
yAxis : [
{
show: false,
type : 'value' //y轴为值类型
}
],
series : [{
name:'环境温度',
type:'bar',
smooth:true,
data:dataY
}]
}
// 为echarts对象加载数据
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
myChart4.setOption(option4);
//联动配置
// myChart1.connect([myChart2, myChart3,myChart4]);
// myChart2.connect([myChart1, myChart3,myChart4]);
// myChart3.connect([myChart2, myChart1,myChart4]);
// myChart4.connect([myChart2, myChart3,myChart1]);
echarts.connect([myChart1, myChart2,myChart3,myChart4]);
})
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
刚好遇到类似的需求,看看对你有没有帮助
https://gallery.echartsjs.com/editor.html?c=xh2fhk47eK&v=1