echarts 堆叠柱状图 tooltip倒序展示数据

最新推荐文章于 2024-05-21 15:00:27 发布

gyuhao_o

最新推荐文章于 2024-05-21 15:00:27 发布

阅读量1.8k

点赞数 2

文章标签： echarts 前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_48571414/article/details/127734130

版权

1、官方文档配置项（从`v5.0.0` 开始支持）

官方文档配置

tooltip: {
    order: 'seriesDesc'  // 按照series顺序倒置展示（与界面上展示的顺序一致）
}

2、自定义（本例中有新增额外的series数据列，所以不适合用官方的配置项）

相当于自己画一个 div 盒子，里面用 ul 和 li 展示每条数据，最终以字符串的形式返回。

tooltip:{
    formatter: (params) => {
        let str = '';
        str = ` 
            <div class="ehover" style="width:80px;background: #FFFFFF;font-family: Microsoft YaHei;">
               <h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;"> ${ params[0].name } </h3>  // 每一列数据的x轴坐标值
               <ul style="margin:0;paddding:0;list-style:none;color: #333333;font-size: 14px;"> 
        `;    
        for ( let i = params.length - 1; i > 0; i-- ) {
             str += `
                  <li style="display:flex;justify-content:space-between;margin-top:6px;height: 15px;">
                      <p> ${ params[i].marker } ${ params[i].seriesName } </p>
                      <p style="font-weight: 400;"> ${ params[i].value } </p>
                  </li>
             `;
        }    // 用li封装每一列数据中的每个series的样式

        str += ` 
                </ul>
            </div>
        `;
        return str;
   },

   padding: 20, // 内边距
   extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
   color: '#333333', // 设置文字颜色
}

在formatter中console.log打印出params，我们用到了以下属性：