fix: axis title auto-visible on input + add show/hide switches
- Typing axis title text auto-sets titleVisible=true - Added switches for: show axis, show axis title, show grid lines Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
541440be8a
commit
49ed6a9bcb
|
|
@ -15,6 +15,7 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
|
|||
const { chart, setStyle } = useChartConfig();
|
||||
const key = axis === 'x' ? 'xAxis' : 'yAxis';
|
||||
const axisStyle = chart?.style?.[key];
|
||||
const label = axis === 'x' ? 'X轴' : 'Y轴';
|
||||
|
||||
const update = useCallback(
|
||||
(partial: Partial<AxisStyle>) => {
|
||||
|
|
@ -28,12 +29,28 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
|
|||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={12}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Text style={{ fontSize: 12 }}>显示{label}</Text>
|
||||
<Switch
|
||||
size="small"
|
||||
checked={axisStyle.visible}
|
||||
onChange={(checked) => update({ visible: checked })}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Text style={{ fontSize: 12 }}>显示轴标题</Text>
|
||||
<Switch
|
||||
size="small"
|
||||
checked={axisStyle.titleVisible}
|
||||
onChange={(checked) => update({ titleVisible: checked })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text style={{ fontSize: 12 }}>轴标题</Text>
|
||||
<Input
|
||||
value={axisStyle.titleText}
|
||||
onChange={(e) => update({ titleText: e.target.value })}
|
||||
placeholder={`${axis.toUpperCase()}轴标题`}
|
||||
onChange={(e) => update({ titleText: e.target.value, titleVisible: true })}
|
||||
placeholder={`${label}标题`}
|
||||
size="small"
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
|
|
@ -56,14 +73,6 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
|
|||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Text style={{ fontSize: 12 }}>显示轴线</Text>
|
||||
<Switch
|
||||
size="small"
|
||||
checked={axisStyle.visible}
|
||||
onChange={(checked) => update({ visible: checked })}
|
||||
/>
|
||||
</div>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue