echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

ECharts 的 tooltip 提示框允许开发者通过自定义配置项来自定义样式，包括添加个性化的圆形标记，即“提示点”。你可以通过 `formatter` 函数来控制 tooltip 内容，并结合 CSS 样式和 HTML 来创建小圆点。

1. 首先，在数据系列的配置中，设置 `tooltip` 选项，例如：

series: [{
    name: '名称',
    data: [...],
    tooltip: {
        trigger: 'item', // 指定触发方式
        formatter: function(params) { // 定义自定义提示格式
            var markup = '<div style="position: relative;">'; // 开始创建 HTML 结构
            markup += '<span class="custom-dot" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f00; width: 8px; height: 8px;"></span>'; // 添加自定义圆点
            markup += params.name + ': ' + params.value + '</div>';
            return markup;
        }
    },
}]

这里 `custom-dot` 类名可以根据需要调整样式，CSS 代码如下：

.custom-dot {
    border-radius: 50%;
    position: absolute;
    transition: all 0.3s ease;
}

2. 对于动态改变圆点的颜色、形状和大小，可以在 `formatter` 中使用条件判断或变量替换，比如根据数据状态更改背景色：

formatter: function(params) {
    var color = params.status === 'good' ? '#0f0' : '#f00'; // 假设 status 变量存在
    return `<span class="custom-dot" style="background-color: ${color}; ...">${params.name}: ${params.value}</span>`;
}