echarts实现tooltip内容可移入选中复制

前言

今天改测试提的一个优化,在我们使用echart统计图关系图的时候,鼠标移入某个点显示tooltip气泡信息。那么问题来了,测试说她需要对气泡内容选中复制,可是默认是无法选中复制的,所以我就想啊想,查啊查,改啊改,话不多说,直接上干货!
在这里插入图片描述
在这里插入图片描述

解决方法

 tooltip: {
          enterable: true, // 设置可移入气泡
*{
  -webkit-user-select: text !important;
  user-select: text !important;
}

其实很简单哈哈哈哈哈哈哈哈哈哈

附:vue实现页面内容禁止选中功能,仅输入框和文本域可选

CSS控制

*{ 
 -webkit-touch-callout:none; /*系统默认菜单被禁用*/ 
 -webkit-user-select:none; /*webkit浏览器*/ 
 -khtml-user-select:none; /*早期浏览器*/ 
 -moz-user-select:none;/*火狐*/ 
 -ms-user-select:none; /*IE10*/ 
 user-select:none; 
} 
input{ 
 -webkit-user-select:auto; /*webkit浏览器*/  
}
textarea{
 -webkit-user-select:auto; /*webkit浏览器*/
}

js控制

onselectstart='return false'
onselect='return false'
oncontextmenu='return false' #此句禁用鼠标右键
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现 EChartsTooltip 的轮播效果,可以通过设置 Tooltip 的 `trigger` 为 `'axis'`,并在 `axisPointer` 中设置轴指示器的 `type` 为 `'none'`,然后在 `formatter` 中自定义 Tooltip内容。 具体步骤如下: 1. 设置 `tooltip.trigger` 为 `'axis'`,并在 `axisPointer` 中将 `type` 设置为 `'none'`,这样 Tooltip 不会跟随鼠标移动,而是固定在数据轴上。 ``` tooltip: { trigger: 'axis', axisPointer: { type: 'none' } } ``` 2. 在 `formatter` 中自定义 Tooltip内容,可以使用 JavaScript 的模板字符串语法,结合 ECharts 提供的数据格式进行自定义。 具体实现轮播效果的方法有很多种,这里提供一种比较简单的实现方式:在 `formatter` 中使用 JavaScript 的 `setInterval` 函数定时切换 Tooltip内容,同时使用一个全局变量来记录当前显示的 Tooltip 索引,每次切换时更新该变量即可。 ``` tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter: function(params) { // 定义 Tooltip 显示的内容 const tooltipList = [ `Tooltip 1: ${params[0].value}`, `Tooltip 2: ${params[1].value}`, `Tooltip 3: ${params[2].value}` ]; // 使用全局变量记录当前显示的 Tooltip 索引 if (typeof window.tooltipIndex === 'undefined') { window.tooltipIndex = 0; } else { window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length; } // 使用 setInterval 定时切换 Tooltip内容 setInterval(() => { const tooltipContent = tooltipList[window.tooltipIndex]; this.chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 0, name: params[0].name, tooltip: { formatter: tooltipContent } }); window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length; }, 2000); // 返回一个空字符串,避免默认的 Tooltip 显示 return ''; } } ``` 需要注意的是,由于 Tooltip内容是通过 JavaScript 的定时器更新的,因此在配置 ECharts 图表时需要将 `tooltip.show` 设置为 `false`,避免默认的 Tooltip 与自定义的 Tooltip 冲突。 完整的 ECharts 配置代码如下: ``` option = { tooltip: { show: false, trigger: 'axis', axisPointer: { type: 'none' }, formatter: function(params) { const tooltipList = [ `Tooltip 1: ${params[0].value}`, `Tooltip 2: ${params[1].value}`, `Tooltip 3: ${params[2].value}` ]; if (typeof window.tooltipIndex === 'undefined') { window.tooltipIndex = 0; } else { window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length; } setInterval(() => { const tooltipContent = tooltipList[window.tooltipIndex]; this.chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 0, name: params[0].name, tooltip: { formatter: tooltipContent } }); window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length; }, 2000); return ''; } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Value', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

老电影故事

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

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

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

打赏作者

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

抵扣说明:

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

余额充值