echarts 中 tooltip 自定义样式

最新推荐文章于 2024-07-25 09:24:40 发布

csstmg

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量383

点赞数 1

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/csstmg/article/details/128207338

版权

前端专栏收录该内容

171 篇文章 1 订阅

订阅专栏

在这里插入图片描述

 tooltip: {
          // 悬浮展示内容
          trigger: 'item',
          formatter: function (d) {
            console.log(d, '2321') // 根据后台返回数据渲染
            let res = `转化率：<br><div style="background: #fff;margin-top:8px;width: 165px;">`
            for (let index = 0; index < 4; index++) {
              res += ` 
              <div style="height: 32px;padding:0 8px; display:flex;  align-items:center;justify-content:space-between">
                <span>
                  <i class="el-icon-share"></i>
                  <span> ${d.$vars[index]}</span>
                </span>
                <span> ${d.data.value}</span>
              </div>`
            }
            res += `</div>`
            return res
          },
          backgroundColor: 'rgba(204,204,204,0.4)',
          extraCssText: 'box-shadow: 0px 0px 16px 0px rgba(29,48,92,0.15)',
          textStyle: {
            color: '#4E5969'
          }
        },