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

相关推荐
cd ~/Homestead11 分钟前
Vue 配置跨域的两种方法
前端·javascript·vue.js
Moment12 分钟前
AI 全栈时代,为什么推荐 NodeJs 服务端使用 NestJs
前端·javascript·后端
i220818 Faiz Ul14 分钟前
教育资源共享平台|基于springboot + vue教育资源共享平台系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·教育资源共享平台
Moment14 分钟前
AI全栈入门指南:什么是 NestJs
前端·javascript·后端
happymaker062616 分钟前
Vue自定义指令、插槽、路由的简单使用
前端·javascript·vue.js
AIBox36523 分钟前
codex api 配置教程:安装、鉴权、Windows 环境变量
javascript·人工智能·windows·gpt
Reisentyan28 分钟前
[vue3]HTML Learn Data Day 9
前端·vue.js·html
斌味代码1 小时前
Next.js 14 App Router 完全指南:服务端组件、流式渲染与中间件实战
开发语言·javascript·中间件
~ rainbow~1 小时前
前端转型全栈(二)——NestJS 入门指南:从 Angular 开发者视角理解后端架构
前端·javascript·angular.js
IT 行者8 小时前
Web逆向工程AI工具:JSHook MCP,80+专业工具让Claude变JS逆向大师
开发语言·javascript·ecmascript·逆向