echarts的tooltip添加点击事件

第一部分:echarts 鼠标放上去显示提示框属性详解

tooltip ={                                      //提示框组件
    trigger: 'item',                            //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
    triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
    showContent:true,                           //是否显示提示框浮层
    alwaysShowContent:true,                     //是否永远显示提示框内容
    showDelay:0,                                  //浮层显示的延迟,单位为 ms
    hideDelay:100,                                //浮层隐藏的延迟,单位为 ms
    enterable:false,                             //鼠标是否可进入提示框浮层中
    confine:false,                               //是否将 tooltip 框限制在图表的区域内
    transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
    position:['50%', '50%'],                    //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
    formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                        //边框颜色
    borderWidth:0,                              //边框线宽
    padding:5,                                  //图例内边距,单位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本样式
};

第二部分:echarts的tooltip添加点击事件

效果如下

 代码如下

 代码如下

// 注册图例点击事件
let leftslideData = ref(null);
function leftslide() {
    let params = leftslideData.value;
    console.log(params, 'params');  //获取到点击查看的提示框的值
   
}
window.leftslide = leftslide;
//tooltip配置如下
tooltip: {
    // triggerOn: 'click|mousemove',
    triggerOn: 'click',
    // triggerOn: '',
    enterable: true,
    // alwaysShowContent: true,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    textStyle: { color: '#666' },
    // hideDelay: 0,
    formatter: function (params) {
       leftslideData.value = params;
       let relVal = params[0].name;
       params.forEach((item, index) => {
              relVal +=
                  '<br/>' +
                  params[index].marker +
                  params[index].seriesName +
                  '&emsp;&emsp;' +
                  params[index].data;
          });
          return (
              relVal +
              `<p style='text-align:right;cursor:pointer; ' onclick="leftslide() "><span style='color: #467ddc;'>查看</span></p>`
          );
      },
  },
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在使用echarts柱状图时,可以通过配置tooltip来设置其显示内容。在引入echarts包后,需要在调用myChart.setOption(option)注册表之后,调用tools.loopShowTooltip方法来显示tooltip。其中,myChart为echarts实例,option为该图表的配置。需要注意的是,配置中必须要有tooltip的配置才能生效。 对于柱状图的tooltip配置,可以将其设置在option的tooltip字段中。具体配置方式可以参考下面的示例代码: ```javascript option = { // 其他配置项... tooltip: { trigger: 'axis', // 设置触发类型为轴 axisPointer: { // 设置轴指示器样式 type: 'shadow' // 设置为阴影指示器 } }, // 其他配置项... }; ``` 在上述示例中,我们设置了tooltip的触发类型为轴,表示鼠标悬停在柱状图上时触发显示tooltip。同时,通过axisPointer字段设置了轴指示器的样式为阴影指示器,可以在鼠标悬停时显示柱状图阴影部分的详细信息。 除了以上的配置方式,echarts还提供了丰富的配置选项,可以根据实际需求进行自定义。具体的配置项可以参考echarts官方文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts图表柱状图折线图动态轮播tooltip窗](https://download.csdn.net/download/Dyc_SE/86399277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [echarts-柱状图配置详解](https://blog.csdn.net/benlalagang/article/details/126886719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个好好的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值