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

相关推荐
阿伟来咯~27 分钟前
vue3+Nest.js项目 部署阿里云
开发语言·javascript·ecmascript
工业互联网专业1 小时前
基于springboot+vue的健康健身追踪系统
java·vue.js·spring boot·毕业设计·源码·课程设计·健康健身追踪系统
不想上班只想要钱1 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
2501_915373882 小时前
Electron 入门指南
前端·javascript·electron
小猪欧巴哟3 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
吃瓜群众i3 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
猫头虎3 小时前
如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
javascript·ide·vue.js·typescript·node.js·编辑器·vim
Mintopia4 小时前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js
da-peng-song4 小时前
ArcGIS arcpy代码工具——根据属性结构表创建shape图层
javascript·python·arcgis
苹果酱05675 小时前
python3语言基础语法整理
java·vue.js·spring boot·mysql·课程设计