bizchartsX轴文字问题

全栈程序员站长

发布于 2022-11-17 16:31:20

5560

大家好，又见面了，我是你们的朋友全栈君。

1. X轴文字太长了，发生重叠

//chartList是数据  当横坐标大于15个值得时候，关闭自动旋转，自定义设置旋转角度12度
<Axis name="text" label = {
  
  {
    rotate:  chartList.length > 15 ? 12 : 0,   
    autoRotate: chartList.length > 15 ? false : true,
}}/>

//chartList是数据  当横坐标大于15个值得时候，关闭自动旋转，自定义设置旋转角度12度
<Axis name="text" label = {
  
  {
    rotate:  chartList.length > 15 ? 12 : 0,   
    autoRotate: chartList.length > 15 ? false : true,
    offset: 30  //X轴文字距离X轴得距离  让文字离开表中 或者用下面的字段，文本对齐方向从头部对齐
    textStyle: chartList.length > 15 ? {
        textAlign: 'start '
    } : {} ,
}}/>

2.自定义纵坐标

const scale = {
	num:{
		type:"pow",
		exponent:2,
		ticks: [0, 50000, 200000, 450000, 800000, 1250000, 1800000, 2450000, 3200000, 4050000, 5000000 ], 
	},
	proportion: {
		ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
	},
};

//自定义左侧Y轴刻度，将左侧纵坐标换成以w为单位，将右侧纵坐标加上%符号

<Chart height={400} forceFit padding={"auto"} scale={scale}  data={chartList}
	onGetG2Instance={chart => {
		chartIns = chart;
	}}>
    <!--X轴-->
	<Axis name="text" label = {
  
  {
		rotate:  chartList.length > 15 ? 12 : 0,
		autoRotate: chartList.length > 15 ? false : true,
		textStyle: chartList.length > 15 ? {
			textAlign: 'start '
		} : {} ,
	}}/>
    <!--左侧Y轴-->
	<Axis name="num" label={
  
  {
		formatter(text, item, index) {
			if(index > 0){
				return `${text/10000}w`;
			}else{
				return `${text}`;
			}
		}
	}} />
    <!--右侧Y轴-->
	<Axis name="proportion"  grid={null} label={
  
  {textStyle: { fill: "#FC8650", fontSize: '12' },
		formatter(text, item, index) {
			if(index > 0){
				return `${text}%`;
			}else{
				return `${text}`;
			}
		}
	}} />
</Chart>

改完之后：