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

相关推荐
Cecilialana15 分钟前
同域名、同项目、仅 hash 变化,window.location.href 不跳转
前端·javascript
Hello--_--World21 分钟前
DOM事件流与事件委托、判断数据类型、深浅拷贝、对象遍历方式
前端·javascript
落魄江湖行24 分钟前
进阶篇二 Nuxt4 渲染模式:SSR/SSG/CSR 怎么选
前端·vue.js·typescript·nuxt4
Ruihong1 小时前
你的 Vue 3 TS 类型声明,VuReact 会处理成什么样的 React?
vue.js·react.js·面试
踩着两条虫1 小时前
VTJ核心引擎开源项目概览
前端·vue.js·低代码
threelab1 小时前
Vue3 + Trilab:打造高扩展性三维可视化插件化框架实战指南
javascript·3d·webgl
阿正的梦工坊1 小时前
JavaScript 函数作用域详解——为什么函数外面访问不到里面的变量?
开发语言·javascript
黑臂麒麟1 小时前
React Hooks 闭包陷阱:状态“丢失“的经典坑
javascript·react native·react.js·ecmascript
1314lay_10071 小时前
Vue+C#根据配置文件实现动态构建查询条件和动态表格
javascript·vue.js·elementui·c#
SuperEugene1 小时前
Vue3 前端配置驱动避坑:配置冗余、渲染性能、扩展性问题解决|配置驱动开发实战篇
前端·javascript·vue.js·驱动开发·前端框架