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

相关推荐
至善迎风20 分钟前
Bun:下一代 JavaScript 运行时与工具链
开发语言·javascript·ecmascript·bun
DJ斯特拉22 分钟前
Vue工程化
前端·javascript·vue.js
LinDon_29 分钟前
【vue2form表单中的动态表单校验】
前端·javascript·vue.js
一水鉴天39 分钟前
整体设计 之28 整体设计 架构表表述总表的 完整程序(之27 的Q268 )(codebuddy)
java·前端·javascript
DsirNg1 小时前
使用 SSE 单向推送实现 系统通知功能
前端·javascript
宋军涛1 小时前
重操旧业,继续码农生活,温故vue moment类库和new Date()
vue.js·生活
莓莓儿~1 小时前
Next.js 14 App Router数据获取开发手册
开发语言·前端·javascript
Kaze_story2 小时前
Vue第五章(1):scoped、组件通信
前端·javascript·vue.js
匠心网络科技2 小时前
前端框架-Vue为何开发更高效?
前端·javascript·vue.js·前端框架
哆啦A梦15882 小时前
商城后台管理系统 02 添加规格参数-动态表单
javascript·vue.js·elementui