在Echarts中的tooltip上添加点击按钮

最新推荐文章于 2024-07-09 14:34:18 发布

富可敌锅

最新推荐文章于 2024-07-09 14:34:18 发布

阅读量2.3k

点赞数 4

文章标签： echarts javascript 前端

XJINGUO

本文链接：https://blog.csdn.net/Hy_0452/article/details/132186665

版权

需求：

在Echarts的tooltips中添加点击按钮并可以鼠标悬停点击该按钮

在这里插入图片描述

功能实现：

在option中的tooltip添加enterable: true的属性，表示鼠标可以移入tooltip中
再在formatter中添加 <button onclick="onTooltipsFun()" style='cursor: pointer' > 点击查看更多</button>，此时的onTooltipsFun方法需要挂载到window上供按钮点击时使用
除了这两处，还需要添加position的属性，该属性默认不设置时位置会跟随鼠标的位置

代码片段：

const onTooltipsFun = () => {
  console.log('tooltips添加按钮点击事件！');
};

window.onTooltipsFun = onTooltipsFun;

// option属性：
  tooltip: {
    enterable: 'true',
    position: (point)=> ([point[0], point[1]]),
    trigger: 'axis',
    padding: [8, 12.5, 8, 12.5],
    backgroundColor: 'rgb(7, 40, 85, 0.7);',
    borderColor: '#53B4FF',
    textStyle: {
      color: "white" //设置文字颜色
    },
    axisPointer: {//设置悬停突出显示x轴值
      label: {
        show: true,
        backgroundColor: '#0b1f56',
        color: '#fff',
        fontSize: 12,
        formatter: (param) => { 
          return `${xAxisTickData[param.seriesData[0].dataIndex].name}`
        },
      },
    },
    formatter: (param) => {
      // console.log(param)
      let content = `${xAxisTickData[param[0].dataIndex].name}</br>`;
      param.forEach((item) => {
         content += `${item.marker + item.seriesName} : ${item.value[1]}%</br>`;
      });
      return `${content}</br><button οnclick="onTooltipsFun()" style='cursor: pointer'> 点击查看更多</button>`;
    },
  },