VChart
VChart copied to clipboard
Published
20 hours ago •
VisActor
VisActor
[Feature] 期望轴标签在倾斜时，也能达到竖着时候的自适应效果
What problem does this feature solve?
请问下轴标签如何设置密集一点且能自适应，不重叠？
1、设置自动隐藏属性，如图：
2、取消自动隐藏属性，如图：
3、期望效果：期望轴标签斜着的时候也能达到竖着时候的自适应效果。如图：
配置如下：
const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/stocks.json');
const data = await response.json();
const spec = {
"barMaxWidth": 50,
type: 'bar',
xField: 'Date',
yField: 'Close',
seriesField: 'Symbol',
data: [
{
id: 'bar',
values: data
}
],
"animationAppear": false,
"large": true,
"largeThreshold": 500,
"progressiveStep": 1100,
"progressiveThreshold": 1000,
"series": [
{
"type": "bar",
"bar": {
"style": {},
"state": {
"legend_hover_reverse": {
"fillOpacity": 0.15
},
"hover_series": {
"opacity": 1
},
"unHover_series": {
"opacity": 0.2
}
}
}
}
],
"axes": [
{
"orient": "left",
"visible": true,
"label": {
"visible": true,
"autoLimit": false,
"autoHide": false,
"autoRotate": true,
"autoRotateAngle": [
0
],
"style": {
"show": true,
"interval": 0,
"color": "#788291",
"fontStyle": "normal",
"fontWeight": "400",
"fontFamily": "Helvetica",
"fontSize": 12,
"fill": "#788291",
"maxLineWidth": 100
}
},
"tick": {
"visible": false,
"style": {
"stroke": "#DEDEDE",
"lineWidth": 1
}
},
"domainLine": {
"visible": true,
"onZero": true,
"style": {
"lineWidth": 1,
"stroke": "#DEDEDE",
"lineDash": [
0
],
"lineCap": "square"
}
},
"grid": {
"visible": false,
"alignWithLabel": false,
"style": {
"lineWidth": 1,
"stroke": "#DEDEDE",
"lineDash": [
3,
4
],
"lineCap": "square"
}
},
"sampling": true
},
{
"orient": "bottom",
"visible": true,
"type": "band",
"label": {
"visible": true,
"autoLimit": false,
"autoHide": true,
"autoRotate": true,
"autoRotateAngle": [
0,
305
],
"style": {
"show": true,
"interval": 0,
"color": "#788291",
"fontStyle": "normal",
"fontWeight": "400",
"fontFamily": "Helvetica",
"fontSize": 12,
"fill": "#788291",
"maxLineWidth": 100
}
},
"title": {
"visible": false,
"text": "account_id-yyyymmdd-combo_type-ticker_type",
"position": "middle",
"style": {
"fontSize": 12,
"color": "#788291",
"fontWeight": "normal",
"fontStyle": "normal",
"fill": "#788291"
}
},
"tick": {
"visible": false,
"style": {
"stroke": "#DEDEDE",
"lineWidth": 1
}
},
"domainLine": {
"visible": true,
"onZero": true,
"style": {
"lineWidth": 1,
"stroke": "#DEDEDE",
"lineDash": [
0
],
"lineCap": "square"
}
},
"grid": {
"visible": false,
"alignWithLabel": false,
"style": {
"lineWidth": 1,
"stroke": "#DEDEDE",
"lineDash": [
3,
4
],
"lineCap": "square"
}
},
"sampling": false
}
],
"tooltip": {
"visible": true,
"activeType": [
"dimension"
],
"style": {
"panel": {
"backgroundColor": "#fff"
},
"titleLabel": {
"fontSize": 12,
"color": "#000",
"fontWeight": "normal",
"fontStyle": "normal",
"fontColor": "#000"
},
"keyLabel": {
"fontSize": 12,
"color": "#000",
"fontWeight": "normal",
"fontStyle": "normal",
"fontColor": "#000"
},
"valueLabel": {
"fontSize": 12,
"color": "#000",
"fontWeight": "normal",
"fontStyle": "normal",
"fontColor": "#000"
}
},
"dimension": {
"title": {},
"content": [
{}
]
},
"mark": {
"title": {},
"content": [
{}
]
}
},
"dataZoom": [
{
"orient": "bottom",
"tolerance": 4,
"selectedBackgroundChart": {
"area": {
"visible": false,
"style": {
"visible": false
}
},
"line": {
"visible": false,
"style": {
"visible": false
}
}
},
"showDetail": "auto",
"start": 0.9721706864564007,
"end": 1,
"startText": {},
"endText": {},
"visible": true
}
],
"label": {
"visible": false,
"position": "outside",
"syncState": true,
"smartInvert": false,
"overlap": false,
"style": {
"fontSize": 12,
"fill": "#788291",
"strokeOpacity": 0,
"fontWeight": "normal",
"fontStyle": "normal"
}
},
"padding": [
12,
4,
4,
4
],
"color": [
"#1B83ED",
"#FF7500",
"#83BFF4",
"#FFB86C",
"#3FB27E",
"#9BCC7E",
"#F35352",
"#FF9193",
"#9D61C2",
"#CAAED8",
"#8FA500",
"#BFD000",
"#EDC948",
"#9C755F",
"#BAB0AC"
],
"theme": {
"background": "#ffffff"
}
}
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
What does the proposed API look like?
none
