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

天命爱心职责~

于 2024-08-19 18:09:40 发布

阅读量451

点赞数 3

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

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

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 3 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

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;
            },
            textStyle: {
              color: 'black',
              fontSize: '14',
            },
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: 'rgba(24, 144, 255, 0.12)',
              }
            }
            // formatter: '{a}\n{c}' + this.unitName,
          },

2.饼图

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