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

相关推荐
代码煮茶12 分钟前
Vue3 组件通信实战 | 8 种组件通信方式全解析
前端·vue.js
kyriewen13 分钟前
自定义事件:让代码之间也能“悄悄对话”
前端·javascript·面试
心之语歌30 分钟前
Vue2 data + Vue3 ref/reactive 核心知识点总结
开发语言·前端·javascript
诸葛亮的芭蕉扇33 分钟前
tooltip-position-solution
前端·vue.js·elementui
程序员小寒36 分钟前
JavaScript设计模式(六):职责链模式实现与应用
java·javascript·设计模式
这是个栗子1 小时前
关于 TypeScript 的介绍
前端·javascript·typescript
踩着两条虫1 小时前
AI驱动的Vue3应用开发平台深入探究(十八):扩展与定制之集成第三方库
vue.js·人工智能·低代码·重构·架构
钰fly2 小时前
Halcon联合编程适应图像的方法(picture)
开发语言·前端·javascript
束尘2 小时前
Vue3一键复制图片到剪贴板
开发语言·javascript·vue.js
酉鬼女又兒2 小时前
零基础快速入门前端DOM 节点操作核心知识点及蓝桥杯 Web 应用开发考点解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯