Echarts中级进阶（实用）

最新推荐文章于 2024-04-05 16:57:50 发布

原创最新推荐文章于 2024-04-05 16:57:50 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用ECharts自定义提示框(tooltip)的样式及内容格式化方法，包括设置触发方式、背景颜色、边框颜色等，并提供了一个具体的功能实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.提示框tooltip: {
trigger: ‘item’,
padding: 10,
backgroundColor: ‘#222’,//背景颜色
borderColor: ‘#777’,
borderWidth: 1,
formatter: tooltipFormatter,
}

function tooltipFormatter(params) {
    var valuesFormatter = [];
        valuesFormatter
            .push('<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                params.seriesName +
                '</div>' +
                '<span style="color:' +
                params.color +
                '">' +
                params.name +
                '</span>: ' +
                params.value + '<br>');
    return valuesFormatter;
}