vue3中是用echarts的柱状图,自定义tooltip(鼠标放在柱子上显示的提示)

主要是使用的是option配置中的tooltip,自定义的话是使用了tooltip中的formatter方法,

javascript 复制代码
{
    formatter: params => `
  <div>
    <div style="display: flex;align-items: center;gap: 10px;">
        <div style="display: flex;align-items: center;gap: 10px;">
            <div>${params.data.date}${props.dateRange === enums.DATE_RANGE.TODAY ? '点' : ''}</div>
            <div>${params.data.value}${props.unit}</div>
        </div>
    </div>
  </div>`,
  }

这里主要是能使用富文本,可以自定义任何自己想要的提示。

params这里面就是这个柱状图的所有信息,可以先打印一下看看自己要用哪些字段。

相关推荐
大家的林语冰33 分钟前
Node 2026 发布,JS 三大新功能上线,最后一个奇偶版本
前端·javascript·node.js
三*一1 小时前
Mapbox GL JS 自研面要素整形工具开发实录
开发语言·javascript·arcgis·ecmascript
我的世界洛天依1 小时前
胡桃讲编程|续篇!用高数 + JS ES262 硬核解构:求乐正绫的值
javascript
棉猴2 小时前
python海龟绘图之画布与窗口
javascript·python·html·setup·turtle·海龟绘图·screensize
AI_paid_community3 小时前
25k Star 登顶 GitHub:这个专门吃 K 线图长大的 AI,让我意识到之前三年都在裸奔
javascript·claude
i220818 Faiz Ul4 小时前
宠物猫之猫咖管理系统|基于java + vue宠物猫之猫咖管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·宠物猫之猫咖管理系统
gjwjuejin4 小时前
前端埋点第二弹:那些年我们踩过的坑,和填坑的正确姿势
javascript
我叫黑大帅4 小时前
通过白名单解决 pnpm i 报错 Ignored build scripts
前端·javascript·面试
i220818 Faiz Ul4 小时前
二手交易系统|基于springboot + vue二手交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·二手交易系统
gjwjuejin4 小时前
前端埋点不头秃:从打点代码到数据分析的完整实战
javascript