echarts 设置-tooltip

Echarts 的 tooltip 是用来显示数据项的详细信息的,默认情况下鼠标悬停在图表上时会显示 tooltip。可以通过设置 tooltip 的属性来自定义 tooltip 的样式和显示内容。

下面是一些常用的 tooltip 属性设置示例:

  1. 设置 tooltip 的触发方式为鼠标移动到数据项上时触发:

    tooltip: {
    trigger: 'axis'
    }

  2. 设置 tooltip 的样式,如背景色、边框颜色和宽度等:

    tooltip: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: '#fff',
    borderWidth: 1
    }

  3. 设置 tooltip 的内容格式化,可以使用回调函数来自定义 tooltip 的内容:

    tooltip: {
    formatter: function (params) {
    return params.name + ': ' + params.value;
    }
    }

  4. 设置 tooltip 的显示位置,默认为鼠标所在位置,也可以设置为固定位置:

    tooltip: {
    position: function (point, params, dom, rect, size) {
    return [point[0], '10%']; // 在鼠标所在的 x 轴位置,y 轴位置离图表顶部距离为 10%
    }
    }

上述示例只是一些常用的设置,Echarts 的 tooltip 还有很多其他属性可供设置,具体可参考 Echarts 官方文档中关于 tooltip 的说明。

相关推荐
曲意已决3 分钟前
《深入源码理解webpac构建流程》
前端·javascript
去伪存真13 分钟前
前端如何让一套构建产物,可以部署多个环境?
前端
CC__xy17 分钟前
04 类型别名type + 检测数据类型(typeof+instanceof) + 空安全+剩余和展开(运算符 ...)简单类型和复杂类型 + 模块化
开发语言·javascript·harmonyos·鸿蒙
KubeSphere19 分钟前
EdgeWize v3.1.1 边缘 AI 网关功能深度解析:打造企业级边缘智能新体验
前端
小奋斗22 分钟前
深入浅出:ES5/ES6+数组扁平化详解
javascript·面试
掘金安东尼31 分钟前
解读 hidden=until-found 属性
前端·javascript·面试
1024小神39 分钟前
jsPDF 不同屏幕尺寸 生成的pdf不一致,怎么解决
前端·javascript
滕本尊40 分钟前
构建可扩展的 DSL 驱动前端框架:从 CRUD 到领域模型的跃迁
前端·全栈
借月40 分钟前
高德地图绘制工具全解析:线路、矩形、圆形、多边形绘制与编辑指南 🗺️✏️
前端·vue.js
li理41 分钟前
NavPathStack 是鸿蒙 Navigation 路由的核心控制器
前端