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

相关推荐
萧曵 丶4 小时前
Vue 中父子组件之间最常用的业务交互场景
javascript·vue.js·交互
Amumu121385 小时前
Vue3扩展(二)
前端·javascript·vue.js
NEXT065 小时前
JavaScript进阶:深度剖析函数柯里化及其在面试中的底层逻辑
前端·javascript·面试
牛奶7 小时前
你不知道的 JS(上):原型与行为委托
前端·javascript·编译原理
泓博7 小时前
Android中仿照View selector自定义Compose Button
android·vue.js·elementui
牛奶7 小时前
你不知道的JS(上):this指向与对象基础
前端·javascript·编译原理
牛奶7 小时前
你不知道的JS(上):作用域与闭包
前端·javascript·电子书
+VX:Fegn08958 小时前
计算机毕业设计|基于springboot + vue鲜花商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
pas1369 小时前
45-mini-vue 实现代码生成三种联合类型
前端·javascript·vue.js
颜酱10 小时前
数组双指针部分指南 (快慢·左右·倒序)
javascript·后端·算法