文章/答案/技术大牛

发布

社区首页 >问答首页 >在同一日期显示所有图表的工具提示onHover

问在同一日期显示所有图表的工具提示onHover
EN

Stack Overflow用户

提问于 2021-12-24 10:15:46

回答 1查看 268关注 0票数 0

我正在与echarts和角12工作，我正在寻找如何触发其他图表上的工具提示时，盘旋在一个图表。我看到了echarts中有dispatchAction方法，但是我没有找到如何使用它来触发其他图表上的工具提示。

有人能帮忙吗？

谢谢。

angular

tooltip

echarts

回答 1

Stack Overflow用户

发布于 2021-12-28 03:46:41

我不知道你用的是哪种图表。

我用条形图试试看。

这是你需要的结果吗？

var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:'Testname',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar'
    }
  ]
};

var option2 = {
tooltip:{
        trigger: 'axis',
        axisPointer:{
        show:false
        }
        },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:'Testname2',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar',
      smooth: true
    }
  ]
};
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
myChart.setOption(option);
myChart2.setOption(option2);

myChart.on('mouseover',function (params){
    var event=params.event;
    myChart2.dispatchAction({
                type: 'showTip',
                x:event.offsetX,
                y:event.offsetY,
            });
    });
    myChart.on('globalout',function(params){
      myChart2.dispatchAction({
        type: 'hideTip'
      });
    });

#main{
  width:600px;
  height:400px;
  float:left;
}
#main2{
  width:600px;
  height:400px;
  float:left;
}

<!DOCTYPE html>
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
   <div id="main" ></div>
   <div id="main2"></div>
    </body>
    </html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70471817

复制

相似问题

问在同一日期显示所有图表的工具提示onHover
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在同一日期显示所有图表的工具提示onHoverEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在同一日期显示所有图表的工具提示onHover
EN