echarts ( 折线图，柱状图 ) 和饼图 tooltip 文字样式修改

最新推荐文章于 2025-05-22 16:01:24 发布

天命爱心职责~

最新推荐文章于 2025-05-22 16:01:24 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/m0_62021563/article/details/141331677

1.折线图柱状图

tooltip: {
            confine: true,//是否将 tooltip 框限制在图表的区域内。
            trigger: 'axis',
            backgroundColor: '#0085ff',
            extraCssText: 'background: linear-gradient(to top,#ffffff,#eff1fe);padding:12px 20px', //渐变颜色
            formatter: function (params) {
                // params 是一个数组，数组中包含每个系列的数据信息
                let result = params[0].name;
                params.forEach(function (item) {
                  result += "<br/>";
                    // item 是每一个系列的数据
                    const seriesName = item.seriesName; // 系列名称
                    const value = item.value; // 数据值
                    result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+item.color+'" ></span>'; 
                    result += `${seriesName}: ${value+'33'}<br/>`;
                });
                return result;
            },