mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：新增全局属性配置

Browse Source
This commit is contained in:
MTrun 2022-02-23 15:23:09 +08:00
parent b550c3e541
commit 6f68cc58d3
4 changed files with 108 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/ChartItemSetting/GlobalSetting.vue
View File

@ -17,7 +17,7 @@
</CollapseItem>
<CollapseItem name="X轴">
<SettingItemBox name="文本">
<SettingItemBox name="名称">
<SettingItem name="颜色">
<n-color-picker
size="small"
@ -25,6 +25,19 @@
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标签">
<SettingItem name="展示">
<n-space>
<n-switch v-model:value="xAxis.axisLabel.show" size="small" />
</n-space>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="xAxis.axisLabel.color"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="轴线">
<SettingItem name="颜色">
<n-color-picker
@ -45,6 +58,20 @@
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="刻度">
<SettingItem name="展示">
<n-space>
<n-switch v-model:value="xAxis.axisTick.show" size="small" />
</n-space>
</SettingItem>
<SettingItem name="长度">
<n-input-number
v-model:value="xAxis.axisTick.length"
:min="1"
size="small"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="分割线">
<SettingItem name="颜色">
<n-color-picker
@ -62,19 +89,40 @@
<SettingItem name="类型">
<n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
</SettingItem>
<SettingItem name="位置">
<n-select v-model:value="xAxis.position" size="small" :options="axisConf.xposition" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="Y轴">
<SettingItemBox name="文本">
<SettingItemBox name="名称">
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="yAxis.nameTextStyle.color"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="标签">
<SettingItem name="展示">
<n-space>
<n-switch v-model:value="yAxis.axisLabel.show" size="small" />
</n-space>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="yAxis.axisLabel.color"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="轴线">
<SettingItem name="展示">
<n-space>
<n-switch v-model:value="yAxis.axisLine.show" size="small" />
</n-space>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
v-model:value="yAxis.axisLine.lineStyle.color"
@ -94,6 +142,20 @@
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="刻度">
<SettingItem name="展示">
<n-space>
<n-switch v-model:value="yAxis.axisTick.show" size="small" />
</n-space>
</SettingItem>
<SettingItem name="长度">
<n-input-number
v-model:value="yAxis.axisTick.length"
:min="1"
size="small"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="分割线">
<SettingItem name="颜色">
<n-color-picker
@ -111,6 +173,9 @@
<SettingItem name="类型">
<n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
</SettingItem>
<SettingItem name="位置">
<n-select v-model:value="yAxis.position" size="small" :options="axisConf.yposition" />
</SettingItem>
</SettingItemBox>
</CollapseItem>

2
src/components/ChartItemSetting/SettingItemBox.vue
View File

@ -17,7 +17,7 @@ defineProps({
</script>
<style lang="scss" scoped>
$leftWidth: 80px;
$leftWidth: 60px;
@include go('config-item-box') {
position: relative;
display: flex;

20
src/packages/chartConfiguration/echarts/axis.ts
View File

@ -1,4 +1,24 @@
export const axisConf = {
xposition: [
{
label: 'top',
value: 'top'
},
{
label: 'bottom',
value: 'bottom'
}
],
yposition: [
{
label: 'left',
value: 'left'
},
{
label: 'right',
value: 'right'
}
],
splitLint: {
lineStyle: {
type: [

20
src/settings/chartThemes/global.theme.json
View File

@ -11,13 +11,23 @@
"nameTextStyle": {
"color": "#B9B8CE"
},
"axisLabel": {
"show": true,
"color": "#B9B8CE"
},
"position": "bottom",
"axisLine": {
"show": true,
"lineStyle": {
"color": "#B9B8CE",
"width": 1
},
"onZero": true
},
"axisTick": {
"show": true,
"length": 5
},
"splitLine": {
"lineStyle": {
"color": "#484753",
@ -30,13 +40,23 @@
"nameTextStyle": {
"color": "#B9B8CE"
},
"axisLabel": {
"show": true,
"color": "#B9B8CE"
},
"position": "left",
"axisLine": {
"show": true,
"lineStyle": {
"color": "#B9B8CE",
"width": 1
},
"onZero": true
},
"axisTick": {
"show": true,
"length": 5
},
"splitLine": {
"lineStyle": {
"color": "#484753",