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

相关推荐
Highcharts.js1 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
FRing032 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷2 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
kyriewen4 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
工控丫丫5 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
Dream-Y.ocean7 小时前
鸿蒙PC平台星图遥感适配实战:基于 Electron 壳方案的纯 JavaScript 遥感图像处理引擎开发
javascript·electron·harmonyos
螺丝钉tina8 小时前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战:API测试
前端·javascript·typescript
Highcharts.js10 小时前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格
Java后端的Ai之路10 小时前
【AIAgent开发】-Agent工具封装成CLI(纯干货!!!)
java·javascript·人工智能·agent·cli
薛定谔的猫-菜鸟程序员11 小时前
Electron开发超详细教程(从入门到放弃)
前端·javascript·electron