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

相关推荐
星离~7 小时前
Vue响应式原理详解:从零实现一个迷你Vue
前端·javascript·vue.js
一只小阿乐8 小时前
react 中的判断显示
前端·javascript·vue.js·react.js·react
小沐°8 小时前
React-页码组件
前端·javascript·react.js
消失的旧时光-19438 小时前
Flutter 与 React/Vue 为什么思想一致?——声明式 UI 体系的深度对比(超清晰版)
vue.js·flutter·react.js
零一科技8 小时前
Vue3学习第三课: ref 与 reactive 选择指南
前端·vue.js
诸葛亮的芭蕉扇10 小时前
抓图巡检-底图支持绘制
开发语言·前端·javascript
熊猫比分站10 小时前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot
一 乐11 小时前
健康打卡|健康管理|基于java+vue+的学生健康打卡系统设计与实现(源码+数据库+文档)
android·java·数据库·vue.js·spring boot·微信小程序
木子李BLOG11 小时前
Element Plus
前端·javascript·vue.js