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

相关推荐
Van_captain7 分钟前
rn_for_openharmony常用组件_Breadcrumb面包屑
javascript·开源·harmonyos
静听松涛13312 分钟前
提示词注入攻击的防御机制
前端·javascript·easyui
澄江静如练_30 分钟前
优惠券提示文案表单项(原生div写的)
前端·javascript·vue.js
C_心欲无痕34 分钟前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
Irene19911 小时前
Vue2 与 Vue3 响应式实现对比(附:Proxy 详解)
vue.js·响应式实现
全栈前端老曹1 小时前
【包管理】read-pkg-up 快速上手教程 - 读取最近的 package.json 文件
前端·javascript·npm·node.js·json·nrm·package.json
JQLvopkk1 小时前
Vue框架技术详细介绍及阐述
前端·javascript·vue.js
笔COOL创始人1 小时前
requestAnimationFrame 动画优化实践指南
前端·javascript·面试
sophie旭2 小时前
性能监控之首屏性能监控小实践
前端·javascript·性能优化
+VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue物流配送中心信息化管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·小程序·课程设计