关于在vue3中渲染柱状图小记一个普通的tooltip展示

原创于 2025-03-25 10:52:17 发布 · 147 阅读

CC 4.0 BY-SA版权

文章标签：

在echarts柱状图中，小记一个tooltip的简单渲染方式，复制即用

tooltip: {
      trigger: 'axis', // 坐标轴触发，主要在柱状图、折线图等会使用类目轴的图表中使用
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (param: any) {
        let tooltipText = param[0].axisValue + '</br>'
        param.forEach((item, index) => {
          tooltipText += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background:${item.color}"></span>${item.seriesName}：<span style="font-weight:800">${item.value}</span>  人</br>`
        })
        return tooltipText
      }
    },

效果如图所示：