Echarts tooltip 提示框自定义样式

最新推荐文章于 2024-07-12 17:36:05 发布

时光足迹

最新推荐文章于 2024-07-12 17:36:05 发布

阅读量4.7k

点赞数 2

分类专栏： Echarts 文章标签：前端 echarts vue 图表

本文链接：https://blog.csdn.net/gaoxiaoba/article/details/119886811

版权

Echarts 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ECharts的tooltip组件的formatter函数来自定义提示框的内容。通过设置触发类型、背景颜色、字体样式等属性，并利用formatter函数处理数据，创建出符合需求的提示信息，包括轴值、系列名、值以及总计的显示。示例代码展示了如何处理多条数据并计算总计，适用于需要详细信息展示的图表应用。

摘要由CSDN通过智能技术生成

tooltip默认的样式或者值可能不符合开发的要求，可以使用formatter函数自定义处理

let option = {
  tooltip: {
    // 提示框组件
    trigger: "axis", // 坐标轴触发
    padding: [20, 16, 12, 16],
    backgroundColor: "#fff",
    alwaysShowContent: false,
    formatter: function(params) {
      let html = `<div style="height:auto;width: 163px;">
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
            ${params[0].axisValue}
          </div>
          ${params
            .map(
              (
                item
              ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
                <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
                  item.color
                };"></span>
                ${item.seriesName}
                <span style="flex:1;text-align:right;">¥${item.value[
                  item.encode.y[0]
                ] || 0}</span>
              </div>`
            )
            .join("")}
            <div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#333;padding-top:4px;margin-bottom:8px;line-height:1;">
            <span>总计</span>
            <span>¥${R.reduceRight(
              R.add,
              0,
              R.drop(1, params[0].value || [])
            )}</span>
          </div>
        </div>`;
      return html;
    },
  },
};