ECharts如何设置提示框样式

在 ECharts 中，您可以通过配置 tooltip 属性来设置提示框的样式。以下是一个简单的示例，展示了如何自定义提示框的背景颜色、边框颜色、边框宽度、字体大小等样式：

var option = {
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#f5f5f5', // 提示框背景颜色
        borderColor: '#333', // 提示框边框颜色
        borderWidth: 1, // 提示框边框宽度
        textStyle: { // 提示框内的文本样式
            fontSize: 14, // 字体大小
            fontWeight: 'bold' // 字体加粗
        },
        padding: [10, 15], // 提示框内边距
        formatter: function (params) {
            var html = '';
            params.forEach(function (item) {
                html += '<div style="color:' + item.color + '">' + item.seriesName + ': ' + item.value + '</div>';
            });
            return html;
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Sales',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar'
    }]
};

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

在这个示例中，我们设置了提示框的背景颜色、边框颜色、边框宽度、字体大小等样式。同时，我们还自定义了提示框内的文本样式，以及提示框的内边距。最后，我们使用 formatter 函数来自定义提示框显示的内容。