257 lines
7.8 KiB
Vue
257 lines
7.8 KiB
Vue
<script setup lang="ts">
|
|
import { InputNumber, Select, Switch } from 'ant-design-vue'
|
|
import { ColorPicker } from 'vue3-colorpicker'
|
|
|
|
import type { DemoControlPanelModel } from './types'
|
|
|
|
const model = defineModel<DemoControlPanelModel>('model', { required: true })
|
|
</script>
|
|
|
|
<template>
|
|
<section class="control-section">
|
|
<h2>绘图区边距</h2>
|
|
<div class="plot-margin-controls">
|
|
<label class="frame-style-control">
|
|
<span>上边距</span>
|
|
<InputNumber
|
|
v-model:value="model.plotMarginTop"
|
|
:min="0"
|
|
:max="300"
|
|
:step="1"
|
|
addon-after="px"
|
|
size="small"
|
|
aria-label="绘图区上边距"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control">
|
|
<span>下边距</span>
|
|
<InputNumber
|
|
v-model:value="model.plotMarginBottom"
|
|
:min="0"
|
|
:max="300"
|
|
:step="1"
|
|
addon-after="px"
|
|
size="small"
|
|
aria-label="绘图区下边距"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
<section class="control-section">
|
|
<div class="control-section__header">
|
|
<h2>零值参考线</h2>
|
|
<Switch v-model:checked="model.zeroLineVisible" size="small" aria-label="显示零值参考线" />
|
|
</div>
|
|
<div class="auxiliary-style-controls zero-line-controls" style="margin-top: 10px">
|
|
<label class="frame-style-control">
|
|
<span>颜色</span>
|
|
<ColorPicker
|
|
v-model:pure-color="model.zeroLineColor"
|
|
aria-label="零值参考线颜色"
|
|
use-type="pure"
|
|
picker-type="chrome"
|
|
format="hex"
|
|
:disable-alpha="true"
|
|
:blur-close="true"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control">
|
|
<span>线宽</span>
|
|
<InputNumber
|
|
v-model:value="model.zeroLineWidth"
|
|
:min="0.5"
|
|
:max="10"
|
|
:step="0.5"
|
|
size="small"
|
|
aria-label="零值参考线线宽"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control">
|
|
<span>线型</span>
|
|
<Select
|
|
v-model:value="model.zeroLineDash"
|
|
:options="model.zeroLineDashOptions"
|
|
size="small"
|
|
aria-label="零值参考线线型"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
<section class="control-section">
|
|
<h2>网格与轴线</h2>
|
|
<div class="grid-line-controls">
|
|
<div class="grid-line-control">
|
|
<span>水平网格</span>
|
|
<Switch
|
|
v-model:checked="model.horizontalGridVisible"
|
|
size="small"
|
|
aria-label="显示水平网格线"
|
|
/>
|
|
<span class="grid-line-color-picker" role="group" aria-label="水平网格线颜色">
|
|
<ColorPicker
|
|
v-model:pure-color="model.horizontalGridColor"
|
|
use-type="pure"
|
|
picker-type="chrome"
|
|
format="hex"
|
|
:disable-alpha="true"
|
|
:blur-close="true"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="grid-line-control">
|
|
<span>垂直网格</span>
|
|
<Switch
|
|
v-model:checked="model.verticalGridVisible"
|
|
size="small"
|
|
aria-label="显示垂直网格线"
|
|
/>
|
|
<span class="grid-line-color-picker" role="group" aria-label="垂直网格线颜色">
|
|
<ColorPicker
|
|
v-model:pure-color="model.verticalGridColor"
|
|
use-type="pure"
|
|
picker-type="chrome"
|
|
format="hex"
|
|
:disable-alpha="true"
|
|
:blur-close="true"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="grid-line-control grid-line-control--switch-only">
|
|
<span>横轴线</span>
|
|
<Switch v-model:checked="model.xAxisLineVisible" size="small" aria-label="显示横轴线" />
|
|
</div>
|
|
<div class="grid-line-control grid-line-control--switch-only">
|
|
<span>纵轴线</span>
|
|
<Switch v-model:checked="model.yAxisLineVisible" size="small" aria-label="显示纵轴线" />
|
|
</div>
|
|
</div>
|
|
<div class="x-axis-label-controls">
|
|
<label class="frame-style-control frame-style-control--switch">
|
|
<span>自定义 Label</span>
|
|
<Switch
|
|
v-model:checked="model.xAxisLabelFormatterEnabled"
|
|
size="small"
|
|
aria-label="自定义 X 轴 Label"
|
|
/>
|
|
</label>
|
|
<label v-if="model.xAxisLabelFormatterEnabled" class="frame-style-control">
|
|
<span>格式类型</span>
|
|
<Select
|
|
v-model:value="model.xAxisLabelFormat"
|
|
:options="model.xAxisLabelFormatOptions"
|
|
size="small"
|
|
aria-label="X 轴 Label 格式类型"
|
|
/>
|
|
</label>
|
|
<label
|
|
v-if="model.xAxisLabelFormatterEnabled && model.xAxisLabelFormat === 'number'"
|
|
class="frame-style-control"
|
|
>
|
|
<span>运算倍率</span>
|
|
<InputNumber
|
|
v-model:value="model.xAxisLabelMultiplier"
|
|
:min="-1000000"
|
|
:max="1000000"
|
|
:step="0.1"
|
|
size="small"
|
|
aria-label="X 轴 Label 运算倍率"
|
|
/>
|
|
</label>
|
|
<label
|
|
v-if="model.xAxisLabelFormatterEnabled && model.xAxisLabelFormat === 'number'"
|
|
class="frame-style-control"
|
|
>
|
|
<span>小数位数</span>
|
|
<InputNumber
|
|
v-model:value="model.xAxisLabelFractionDigits"
|
|
:min="0"
|
|
:max="12"
|
|
:step="1"
|
|
size="small"
|
|
aria-label="X 轴 Label 小数位数"
|
|
/>
|
|
</label>
|
|
<label
|
|
v-if="model.xAxisLabelFormatterEnabled && model.xAxisLabelFormat === 'datetime'"
|
|
class="frame-style-control"
|
|
>
|
|
<span>时区</span>
|
|
<Select
|
|
v-model:value="model.xAxisLabelTimeZone"
|
|
:options="model.xAxisLabelTimeZoneOptions"
|
|
size="small"
|
|
aria-label="X 轴 Label 时区"
|
|
/>
|
|
</label>
|
|
<label
|
|
v-if="model.xAxisLabelFormatterEnabled && model.xAxisLabelFormat === 'datetime'"
|
|
class="frame-style-control frame-style-control--switch"
|
|
>
|
|
<span>显示毫秒</span>
|
|
<Switch
|
|
v-model:checked="model.xAxisLabelShowMilliseconds"
|
|
size="small"
|
|
aria-label="X 轴 Label 显示毫秒"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
<section class="control-section">
|
|
<h2>图框样式</h2>
|
|
<div class="frame-style-controls">
|
|
<label class="frame-style-control">
|
|
<span>边框颜色</span>
|
|
<ColorPicker
|
|
v-model:pure-color="model.frameBorderColor"
|
|
aria-label="图框边框颜色"
|
|
use-type="pure"
|
|
picker-type="chrome"
|
|
format="rgb"
|
|
:disable-alpha="false"
|
|
:blur-close="true"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control">
|
|
<span>背景颜色</span>
|
|
<ColorPicker
|
|
v-model:pure-color="model.frameBackgroundColor"
|
|
aria-label="图框背景颜色"
|
|
use-type="pure"
|
|
picker-type="chrome"
|
|
format="rgb"
|
|
:disable-alpha="false"
|
|
:blur-close="true"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control">
|
|
<span>线宽</span>
|
|
<InputNumber
|
|
v-model:value="model.frameBorderWidth"
|
|
:min="0"
|
|
:max="10"
|
|
:step="0.5"
|
|
size="small"
|
|
aria-label="图框线宽"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control">
|
|
<span>线型</span>
|
|
<Select
|
|
v-model:value="model.frameBorderStyle"
|
|
:options="model.frameBorderStyleOptions"
|
|
size="small"
|
|
aria-label="图框线型"
|
|
/>
|
|
</label>
|
|
<label class="frame-style-control frame-style-control--switch">
|
|
<span>水印</span>
|
|
<Switch
|
|
v-model:checked="model.frameWatermarkVisible"
|
|
size="small"
|
|
aria-label="显示图框水印"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</template>
|