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

相关推荐
GoFly开发者34 分钟前
使用AES加解密在vue3前端加密、Golang后端解密实战教程(后端框架可以为Gin、Goframe等框架使用)
vue.js·aes加密vue·aes解密go
普通码农1 小时前
Vue-Konva 使用(缩放 / 还原 / 拖动) 示例
前端·javascript·vue.js
一 乐1 小时前
运动会|基于SpingBoot+vue的高校体育运动会管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·学习·springboot
7***n751 小时前
JavaScript混合现实案例
开发语言·javascript·mr
X_hope2 小时前
巧妙浏览器事件监听API:addEventListener的第三个参数
前端·javascript
1***Q7842 小时前
TypeScript类型兼容
前端·javascript·typescript
多啦C梦a2 小时前
React useTransition 全网最通俗深度讲解:为什么它能让页面“不卡”?
前端·javascript·react.js
inCBle2 小时前
vue3+ts 封装一个通用流程复用工具函数
前端·vue.js·设计
WindrunnerMax2 小时前
基于 NodeJs 的分布式任务队列与容器优雅停机
javascript·后端·node.js
南山安2 小时前
HTML5 自定义属性 data-*:别再把数据塞进 class 里了!
前端·javascript·代码规范