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

相关推荐
阿猫的故乡15 小时前
Vue动态组件+异步组件实战:Tab切换、按需加载、KeepAlive缓存,一次搞定
前端·vue.js·缓存
大大杰哥15 小时前
Vue2学习(3)--组件中的通信方式/组件之间的交互
java·前端·javascript
PixelBai15 小时前
JSON过滤使用教程:从入门到精通
javascript·chrome·json
阿猫的故乡15 小时前
Vue3自定义插件:封装一个全局消息提示插件,所有组件都能直接用
前端·javascript·vue.js
用户831348593069815 小时前
Cesium实现实时联动鹰眼缩略图
vue.js·cesium
橘子星15 小时前
树与二叉树:从概念到 JavaScript 实现
前端·javascript·面试
小林ixn15 小时前
前端开发新利器:用Vite+通义万相实现多模态图像生成(附API密钥安全方案)
javascript
用户9385156350715 小时前
HTML5 Canvas 从入门到AI驱动游戏开发:手把手教你用原生JS打造飞机游戏与数据可视化
前端·javascript·人工智能
qq_4221525715 小时前
视频转 GIF 工具怎么选?2026 年动图制作方案与画质参数对比
javascript·vue.js·音视频
怕浪猫16 小时前
Electron 开发实战(十五):实战项目|从零搭建桌面即时通讯(IM)应用
前端·javascript·electron