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

相关推荐
幸运小圣几秒前
递归(Recursion)快速上手指南【JS例子】
开发语言·javascript·ecmascript
l***37092 分钟前
Docker部署Spring Boot + Vue项目
vue.js·spring boot·docker
我叫张小白。10 分钟前
Vue3 基本生命周期:组件的一生之旅
前端·javascript·vue.js·前端框架·vue3
QH_ShareHub19 分钟前
R 包中的生命周期触发函数全解析
前端·javascript·数据库
AI3D_WebEngineer23 分钟前
企业级业务平台项目设计、架构、业务全解之平台篇
前端·javascript·vue
汤姆Tom41 分钟前
前端转战后端:JavaScript 与 Java 对照学习指南 (第二篇 - 基本数据类型对比)
java·javascript·全栈
七月十二41 分钟前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
星空的资源小屋42 分钟前
Explorer++:更强大的Windows文件管理器
javascript·人工智能·django·电脑
米花丶43 分钟前
解决前端监控上报 Script Error实践
前端·javascript
深色風信子1 小时前
Vue 富文本编辑器
前端·javascript·vue.js·wangeditor·vue 富文本·wangeditor-text·前端富文本