欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > echarts ( 折线图,柱状图 ) 和 饼图 tooltip 文字样式修改

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

2024/10/23 21:17:47 来源:https://blog.csdn.net/m0_62021563/article/details/141331677  浏览:    关键词:echarts ( 折线图,柱状图 ) 和 饼图 tooltip 文字样式修改

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,},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com