修改echarts图表字段显示大小

最新推荐文章于 2024-07-26 15:20:05 发布

且随风而行

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量3.5k

点赞数

分类专栏： Java开发

本文链接：https://blog.csdn.net/weixin_44729970/article/details/109817283

版权

Java开发专栏收录该内容

24 篇文章 3 订阅

订阅专栏

柱状图，线性图

柱状图，线性图X坐标xAxis与Y坐标yAxis调整方法一致，但因为Y轴可能存在两条，所以以Y轴为例。（yAxis[0]为左边的Y轴，yAxis[1]为右边的Y轴，nameTextStyle控制X轴与Y轴的轴名大小显示，textStyle控制坐标轴字段大小显示）

yAxis[0] = {
		name : '例数',
		type : 'value',
		min : 0,
		max : count,
		splitNumber : count < 20 ? 1 : 5,
		axisLabel : {
			textStyle : {
				fontSize : 18
			},
			formatter : function(value) {
				if (value > count) {
					return "";
				} else {
					return value.toFixed(0);
				}
			}
		},
		nameTextStyle : {
			fontSize : 18
		}
	};
	yAxis[1] = {
		name : '百分比',
		type : 'value',
		min : 0,
		axisLabel : {
			textStyle : {
				fontSize : 18
			},
			formatter : function(value) {
				if (value > 100) {
					return "";
				} else {
					return value.toFixed(0) + "%";
				}
			}
		},
		nameTextStyle : {
			fontSize : 18
		}
	};

在这里插入图片描述

饼形图

饼图的话则是在series下通过textStyle 的fontSize 来控制饼图的字段大小显示，
统计项显示则是在legend 下通过textStyle 的fontSize 来控制字段大小显示

series : [ {
       name : '上报例数',
       type : 'pie',
       radius : '55%',
       center : [ '50%', '60%' ],
       itemStyle : {
       	normal : {
       		label : {
       			show : true,
       			formatter : '{b}\n  {c}\n ({d}%)',
       			textStyle : {
       				fontSize : 18
       			}
       		},
       		labelLine : {
       			show : true
       		}
       	}
 }

legend : {
	orient : 'horizontal',
	y : 'bottom',
	data : legendArrs,
	textStyle : {
		fontSize : 18
	}
}