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 分钟前
😱一行代码引发的血案:展开运算符(...)竟让图表功能直接崩了!
前端·javascript·vue.js
Hilaku37 分钟前
npm scripts的高级玩法:pre、post和--,你真的会用吗?
前端·javascript·vue.js
mCell1 小时前
React 如何处理高频的实时数据?
前端·javascript·react.js
随笔记1 小时前
HbuilderX载入项目,运行后唤起微信开发者工具,提示:Error: Fail to open IDE,唤醒不起来怎么办
javascript·微信小程序·uni-app
百***35511 小时前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
启山智软2 小时前
使用 Spring Boot + Vue.js 组合开发多商户商城(B2B2C平台)是一种高效的全栈技术方案
vue.js·spring boot·后端
hongliangsam2 小时前
Vue 3 defineModel 完全指南
vue.js
少卿2 小时前
PerformanceObserver 性能条目类型(Entry Types)
前端·javascript
进击的野人2 小时前
防抖与节流:优化前端性能的两种关键技术
前端·javascript
小高0072 小时前
别再滥用 Base64 了——Blob 才是前端减负的正确姿势
前端·javascript·面试