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

相关推荐
kyriewen1125 分钟前
Next.js:让你的React应用从“裸奔”到“穿衣服”
开发语言·前端·javascript·react.js·设计模式·ecmascript
MXN_小南学前端26 分钟前
基于 Vue3 + ECharts 的数据大屏实例(提供gitHub仓库地址)
前端·javascript·echarts
宁雨桥33 分钟前
for of,for in以及传统for循环的区别与不同场景下的使用选择
前端·javascript
椰羊~王小美1 小时前
除了前端 JS 配置的国际化,对于 JS 没覆盖到的文本,怎么实现国际化
前端·javascript·状态模式
军军君012 小时前
数字孪生监控大屏实战模板:固体颗粒物监管平台
前端·javascript·vue.js·typescript·前端框架·echarts·less
菜鸟小码2 小时前
MapReduce 核心思想:分而治之,大数据处理的智慧之源
前端·javascript·mapreduce
前端那点事2 小时前
Cookie和Token的核心区别(附使用场景,易懂好记)
前端·vue.js
前端那点事2 小时前
Vue设计模式实战解析:6种高频模式+源码拆解,面试/开发双适用
前端·vue.js
凤头百灵鸟2 小时前
Python语法进阶篇 --- 单例模式、魔法方法
javascript·python·单例模式
敲代码的彭于晏2 小时前
感谢掘金,我的书又出版了
前端·vue.js·react.js