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

相关推荐
辰风沐阳1 分钟前
JavaScript 的 WebSocket 使用指南
开发语言·javascript·websocket
jason_yang7 分钟前
这5年在掘金的感想
前端·javascript·vue.js
冰暮流星29 分钟前
javascript如何转换为字符串与布尔型
java·开发语言·javascript
2501_9481226338 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 个人中心页面
javascript·react native·react.js·游戏·ecmascript·harmonyos
Younglina39 分钟前
想提升专注力?我做了一个web端的训练工具
前端·vue.js·游戏
半世轮回半世寻1 小时前
前端开发里最常用的5种本地存储
前端·javascript
爱上妖精的尾巴1 小时前
7-9 WPS JS宏 对象使用实例6:按条件读取多表再拆成多表
前端·javascript·wps·jsa
有意义1 小时前
现代 React 路由实践指南
前端·vue.js·react.js
-凌凌漆-1 小时前
【JS】JavaScript Promise
开发语言·javascript·ecmascript
二DUAN帝1 小时前
像素流与UE通信
前端·javascript·css·ue5·html·ue4·html5