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这里面就是这个柱状图的所有信息,可以先打印一下看看自己要用哪些字段。

相关推荐
Mr Xu_6 小时前
【Vue3 + ECharts 实战】正确使用 showLoading、resize 与 dispose 避免内存泄漏
前端·信息可视化·vue·echarts
yuezhilangniao6 小时前
AI智能体全栈开发工程化规范 备忘 ~ fastAPI+Next.js
javascript·人工智能·fastapi
~牧马~7 小时前
【记录63】electron打包vue项目之踩坑
vue.js·electron·electron与node兼容
铅笔侠_小龙虾7 小时前
Flutter Demo
开发语言·javascript·flutter
2501_944525547 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
计算机学姐7 小时前
基于SpringBoot的电影点评交流平台【协同过滤推荐算法+数据可视化统计】
java·vue.js·spring boot·spring·信息可视化·echarts·推荐算法
wangdaoyin20108 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
天天进步20158 小时前
AI Agent 与流式处理:Motia 在生成式 AI 时代的后端范式
javascript
心柠8 小时前
vue3相关知识总结
前端·javascript·vue.js
a1117769 小时前
图书借阅管理系统(FastAPI + Vue)
前端·vue.js·fastapi