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>
阅读 6.5k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题