echarts-自定义tooltip悬浮文本，还原x轴，名称，颜色小点与值

永远不会太晚

已于 2022-07-08 11:29:23 修改

阅读量1.4k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2022-07-08 11:27:49 首次发布

本文链接：https://blog.csdn.net/qq_42611074/article/details/125674983

版权

echarts 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Echarts的formatter属性来自定义图表的样式，展示了一个示例代码，该代码在Echarts编辑器中可直接运行。通过formatter，可以创建包括x轴坐标值、系列名、颜色标记和数值在内的复杂HTML字符串。同时，代码还实现了对两个折线图数据的比较，显示了超出情况。

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

通过formatter属性自定义样式，支持返回一个html字符串，那玩的花样可就多了
formatter返回参数中，比较常用的是：axisValuex轴的坐标值，valuex轴对应的值，seriesName折线的名称，marker颜色小点的html
下方代码可以直接运行在https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color

option = {
   tooltip: {
          trigger: "axis",
          formatter: params => {
            let str = `<div>${params[0].axisValue}</div>`
            params.forEach(item => {
              str += `<div style="display:flex;justify-content:space-between;width:150px;"><span>${item.marker}${item.seriesName}</span><span style="marigin-left:20px;">${
                item.value ? item.value : "-"
              }</span></div>`
            })
              // 数据差
              let result = "未超过"
              if (params[0].value && params[1].value) {
                // 比较不同
                const num = params[0].value - params[1].value
                if (num < 0) {
                  result = Math.abs(num).toFixed(2)
                }
              }
              str += `<div style="display:flex;justify-content:space-between;"><span><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FFDEE0;"></span>超过情况</span><span style="marigin-left:40px;">${result}</span></div>`
            return str
          }
        },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'a',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9]
    },
    {
      name: 'b',
      type: 'line',
      data: [1, 13, 2, 15, 3, 2, 0]
    }
  ]
};