大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
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>改完之后：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/213511.html原文链接：https://javaforall.net
