如何在ECharts标题后添加自定义提示按钮？

可以实现，以下是两种可行的方案：

方案一：利用ECharts富文本（Rich Text）+ 点击事件 #

ECharts的title.text支持富文本格式，可通过rich配置自定义按钮样式，再绑定点击事件触发通知。

修改后的标题配置代码 #

title: {
    left: 'center',
    top: '0%',
    // 拼接标题文本和富文本按钮
    text: `${getText('KDA001_6')} <span class="tip-btn">🔍</span>`,
    textStyle: {
        fontSize: 34,
        fontWeight: 'bold',
        color: '#333',
        // 定义按钮的富文本样式
        rich: {
            'tip-btn': {
                fontSize: 28,
                color: '#1890ff',
                cursor: 'pointer',
                padding: [0, 0, 0, 8] // 与标题文本拉开间距
            }
        }
    }
},

绑定点击事件 #

在ECharts实例初始化后添加点击监听：

const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

// 监听标题区域的点击事件
myChart.on('click', (params) => {
    if (params.dataIndex === undefined && params.name === 'tip-btn') {
        // 替换为你的通知逻辑，比如弹出弹窗或提示框
        alert('这是共享式提示内容');
    }
});

方案二：HTML元素叠加定位 #

直接在ECharts容器内创建提示按钮，通过CSS绝对定位放在标题文本后方，样式自定义度更高。

HTML结构 #

<div id="main" style="width: 600px; height: 400px; position: relative;">
    <!-- 提示按钮 -->
    <button id="title-tip-btn" style="position: absolute; top: 10px; left: 50%; transform: translateX(calc(50% + 120px)); border: none; background: transparent; font-size: 28px; color: #1890ff; cursor: pointer;">🔍</button>
</div>

绑定点击事件 #

document.getElementById('title-tip-btn').addEventListener('click', () => {
    // 触发通知逻辑
    alert('这是共享式提示内容');
});

注意事项 #

• 按钮的left和transform值需根据标题文本长度、字体大小调整，确保对齐标题后方；
• 若标题为动态生成，可通过JS计算标题宽度后动态调整按钮位置。

内容的提问来源于stack exchange，提问作者Tran Hoang