echarts多图联动tooltip不联动?

发布于 2022-09-06 09:27:14 字数 8143 浏览 12 评论 0

为什么我的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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黑凤梨 2022-09-13 09:27:14

刚好遇到类似的需求,看看对你有没有帮助
https://gallery.echartsjs.com/editor.html?c=xh2fhk47eK&v=1

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文