echarts中的自定义tooltip浮层展示

1.轴触发：轴触发拿到的数据是当前这条垂直线上的所有数据（这里做的处理是：将数据从大到小排，只展示数据较大的10条数据）

              tooltip: {trigger: 'axis',//轴触发formatter (params) {// 拿到横坐标时间格式化一下var res = `${i18n.$t('time')}:${moment(params[0].name).format('YYYY-MM-DD HH:mm:ss')}\n`var resCopy = []for (var i = 0; i < params.length; i++) {const name = params[i].seriesName //名称const value = params[i].data[params[i].seriesName] //值const marker = params[i].marker //样式（前面的小圆点）if (value !== null) {resCopy.push({ name: name, value: value, marker: marker })}       }// 对结果排序 且 只保留10条数据resCopy = resCopy.sort(_this.compare('value')).slice(0, 10)for (var j = 0; j < resCopy.length; j++) {// 如果是单条线提示只展示数据，如果是多条线提示显示名字+数据if (resCopy[j].name === 'null') {res += '<br>' + resCopy[j].marker + resCopy[j].value} else if (resCopy[j].value !== null) {res +='<br>' +resCopy[j].marker +resCopy[j].name +'：' +resCopy[j].value}}return res}},

2.点触发：点触发拿到的是当前鼠标接触的点的数据

             tooltip: {trigger: 'item',//点触发formatter (params) {// 拿到横坐标时间格式化一下var res = `${i18n.$t('time')}:${moment(params[0].name).format('YYYY-MM-DD HH:mm:ss')}\n`//点触发拿到的只是当前点的数据const name = params.seriesNameconst value = params.data[params.seriesName]const marker = params.marker    // 如果是单条线提示只展示数据，如果是多条线提示显示名字+数据if (name === 'null') {res += '<br>' + params.marker + +value} else {if (value !== null) {res += '<br>' + params.marker + name + '：' + value}}return res}},

点触发的缺点：1.不太灵敏，必须精确的放到点上才出提示，用户体验不好。

2.针对多条线，且线之间有交叉的话，交叉点只能展示一个点，不能展示所有交叉的线的点

3.如果要展示的是一段文字，限宽不限高，文本自动换行：

   tooltip: {trigger: 'item',triggerOn: 'mousemove',extraCssText: 'white-space: pre-wrap;max-width:400px    ',formatter: function (params) {return `<div >${params.data.name}</div>`}},

echarts中的自定义tooltip浮层展示相关推荐

echarts 中 symbol 自定义图片
在官方文档里面,修改标记的图形(symbol)的方法有三种: 一:ECharts 提供的标记类型有 'circle', 'rect', 'roundRect', 'triangle', 'diamon ...
echarts中自定义图片的矢量路径设置
echarts中自定义图片的矢量路径设置在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 第一步 ...
echarts中tooltip前面的小圆点
Echarts中tooltip前面的小圆点当在Echarts中使用自定义格式的tooltip时(formatter),发现前面的小圆点没有了 1. 为解决这个问题,就要用到Echarts中的mark ...
Echarts中tooltip显示的数据与数据本身顺序相反
echarts中默认的tooltip和柱状图显示顺序相反,客户要求表盘,tooltip,图例显示顺序一致,也就是五线城市在tooltip和图例中都需要第一个显示: 解决方式: 修改tooltip的fo ...
echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip
图自适应屏幕 /*** 自适应*/ window.addEventListener("resize",function () {myChart.resize(option) }) ...
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
要实现的功能比如:我们要实现白云地图24镇街的常住人口统计展示,然后需要我们实现 1s 自动轮播一次地区,自定义标签样式,自定义悬浮样式. 准备工作 1.安装依赖 npm i echarts -s ...
ECharts中setOption的title、tooltip、xAxis、yAxis、series、legend等参数的含义。
ECharts中setOption的title.tooltip.xAxis.yAxis.series.legend等参数的含义. title //标题设置 legend //图例控制 grid //图 ...
.NET WinForm中给DataGridView自定义ToolTip并设置ToolTip的样式
.NET WinForm中的DataGridView为程序开发提供了诸多的便利,我们不需要做许多额外的工作就可以获得一些基础功能,例如点击列标题排序.行选择功能.改变列宽和行宽,以及单元格内容的自动T ...
html表格怎样传入数据类型,Echarts图表中pie类型tooltip中formatter函数传递的参数从哪里来？...
最近参与一个项目遇到一个问题,这个tooltip提示框信息怎么配?找了好久最终配置成功,分享到这里大家共享一下,能节省不少时间首先可以看一下系统介绍的文章,里面知识点比较多,也有注释,讲的很全,推荐 ...
AntDesignVue表格中列的自定义隐藏与展示
Vue版本:2.6.x,AntDesignVue版本:1.7.x 在工作中难免会遇到这种情况,较多列的表格展示,如果只想看某些关键列的数据,就需要用到筛选,官方文档的筛选是针对行的数据筛选,没有对列筛 ...

echarts中的自定义tooltip浮层展示

echarts中的自定义tooltip浮层展示相关推荐

最新文章

热门文章