echarts tooltip和barGap同时使用

分手后的思念是犯贱 2022-12-26 09:21 144阅读 0赞

因为barGap的原理就是造了一组假数据当背景，所以会默认展示优先的数据

这里有一个坑就是背景的数据给多少合适，根据需要自行封装最高值

关键代码 ⬇️

const option = { 
       tooltip: { 
           trigger: 'axis',
           formatter: params => { 
               return `<span style='font-size: 1rem'>${ params[1].name}：${ params[1].value}</span>`
           }, //显示第二组数据
       },
       series: [
           { 
               type: seriesData.length >= 13 ? 'line' : 'bar',
               color: 'rgba(240, 246, 253, 0.6)',
               barWidth: 32,
               barGap: '-100%', // Make series be overlap
               data: seriesData.map(() => { return formatInt(max)}), //坑在这里
               emphasis: { 
                   itemStyle: { 
                       color: 'rgba(240, 246, 253, 0.6)'
                   }
               }
           },{ 
               type: 'bar',
               data: seriesData,
               barWidth: 32,
               color: '#66aaff',
               borderColor: '#3ba1ff',
               borderWidth: 0,
               areaStyle: { 
                   color: new echarts.graphic.LinearGradient(
                   0, 1, 0, 0, [
                       { offset: 0, color: '#fff'},
                       { offset: 1, color: '#66aaff'}
                   ])
               },
           }
       ]
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts tooltip 数值后显示 %

需求：要求 echarts 在鼠标 hover 时可以看到数据后面显示百分号（数据已是后台处理过的）。效果图： ![1733986-20190802150340710-9

绝地灬酷狼/ 2023年06月02日 09:28/ 0 赞/ 5 阅读

相关 echarts tooltip和barGap同时使用

因为barGap的原理就是造了一组假数据当背景，所以会默认展示优先的数据这里有一个坑就是背景的数据给多少合适，根据需要自行封装最高值关键代码 ⬇️ const

分手后的思念是犯贱/ 2022年12月26日 09:21/ 0 赞/ 145 阅读

相关 Echart自定义tooltip带小圆点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lh

系统管理员/ 2022年11月17日 11:22/ 0 赞/ 276 阅读

相关 echarts.tooltip提示框示例

最近项目用到了echarts,做一下简单总结，主要是提示框tooltip中的formatter用法： ![在这里插入图片描述][watermark_type_ZmFuZ3p

亦凉/ 2022年10月26日 01:25/ 0 赞/ 292 阅读

相关微信小程序使用echarts以及tooltip功能

const app = getApp() import as echarts from '../../components/ec-canvas/echarts

谁践踏了优雅/ 2022年08月29日 15:52/ 0 赞/ 910 阅读

相关 echarts组件自定义---tooltip

tooltip: { trigger: 'axis', axisPointer: {

冷不防/ 2022年04月13日 04:54/ 0 赞/ 349 阅读

相关 echart自定义tooltip

给echart的tooltip数据提示部分增加单位 tooltip: { trigger: 'axis', axisPoi

青旅半醒/ 2021年07月26日 17:41/ 0 赞/ 772 阅读

相关 echart tooltip循环显示，legend随tooltip滚动循环显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlu

偏执的太偏执、/ 2021年07月26日 12:11/ 0 赞/ 753 阅读

相关 echarts 通用配置提示组件tooltip

提示框组件，鼠标移动到图会显示内容 tooltip: { show:true, 是否显示提示框组件,默认显示

蔚落/ 2021年07月24日 15:14/ 0 赞/ 571 阅读

相关 echarts tooltip信息添加%

tooltip : { trigger: 'axis', formatter:function(params)

柔光的暖阳◎/ 2021年06月24日 14:00/ 0 赞/ 708 阅读