在 ECharts 中,你可以通过配置 tooltip 来设置折线图的提示框,使得当鼠标悬停在折线上时能够显示相关信息。以下是一些常用的配置项:
option = {
    tooltip: {
        trigger: 'axis', // 提示框触发方式,'axis' 表示在坐标轴上触发
        axisPointer: {
            type: 'line' // 指示器的类型,'line' 表示直线指示器
        },
        formatter: '{b}: {c}', // 提示框内容格式,{b} 表示数据名称,{c} 表示数据值
        backgroundColor: 'rgba(50, 50, 50, 0.7)', // 提示框背景颜色
        textStyle: {
            color: '#fff' // 提示框文本颜色
        }
    },
    series: [
        {
            type: 'line',
            data: [10, 20, 30, 40, 50],
            // 其他配置...
        }
    ]
    // 其他配置项...
};

上述示例中,tooltip 的一些常用配置项包括:

  •  trigger:设置触发方式,'axis' 表示在坐标轴上触发。

  •  axisPointer:设置指示器的类型,'line' 表示直线指示器。

  •  formatter:设置提示框内容的格式,{b} 表示数据名称,{c} 表示数据值。

  •  backgroundColor:设置提示框的背景颜色。

  •  textStyle:设置提示框文本的样式,如颜色。


通过调整这些配置项,你可以根据实际需求自定义折线图的提示框样式。


转载请注明出处:http://www.zyzy.cn/article/detail/5400/ECharts