fix: 格式问题

This commit is contained in:
jiangcheng
2022-10-12 11:30:54 +08:00
parent 016e48cc69
commit 971b03620a
11 changed files with 46 additions and 113 deletions
@@ -1,19 +1,10 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
:name="`柱状图-${index + 1}`"
:expanded="true"
>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.itemStyle.color"
></n-color-picker>
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
</SettingItem>
<SettingItem>
<n-button size="small" @click="item.itemStyle.color = null"> 恢复默认 </n-button>
@@ -28,11 +19,7 @@
></n-input-number>
</SettingItem>
<SettingItem name="圆角">
<n-input-number
v-model:value="item.itemStyle.borderRadius"
:min="0"
size="small"
></n-input-number>
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
@@ -43,18 +30,10 @@
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number
v-model:value="item.label.fontSize"
size="small"
:min="1"
></n-input-number>
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.label.color"
></n-color-picker>
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
@@ -63,7 +42,7 @@
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
@@ -72,23 +51,18 @@
</template>
<script setup lang="ts">
import { PropType, computed } from "vue";
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem,
} from "@/components/Pages/ChartItemSetting";
import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
import { PropType, computed } from 'vue'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true,
},
});
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series;
});
return props.optionData.series
})
</script>
@@ -54,7 +54,7 @@ watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
if (!isObject(newData) || !('dimensions' in newData)) return
if (newData?.dimensions.length !== oldData?.dimensions.length) {
if (Array.isArray(newData?.dimensions)) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(seriesItem)
@@ -53,7 +53,7 @@ watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
if (!isObject(newData) || !('dimensions' in newData)) return
if (newData?.dimensions.length !== oldData?.dimensions.length) {
if (Array.isArray(newData?.dimensions)) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(seriesItem)
@@ -54,7 +54,7 @@ watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
if (!isObject(newData) || !('dimensions' in newData)) return
if (newData?.dimensions.length !== oldData?.dimensions.length) {
if (Array.isArray(newData?.dimensions)) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(seriesItem)
@@ -1,12 +1,7 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
name="单折线面积图"
:expanded="true"
>
<CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
<SettingItemBox name="线条">
<SettingItem name="宽度">
<n-input-number
@@ -18,11 +13,7 @@
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="item.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
></n-select>
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="实心点">
@@ -44,18 +35,10 @@
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number
v-model:value="item.label.fontSize"
size="small"
:min="1"
></n-input-number>
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.label.color"
></n-color-picker>
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
@@ -64,7 +47,7 @@
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
@@ -73,24 +56,19 @@
</template>
<script setup lang="ts">
import { PropType, computed } from "vue";
import { lineConf } from "@/packages/chartConfiguration/echarts/index";
import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem,
} from "@/components/Pages/ChartItemSetting";
import { PropType, computed } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true,
},
});
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series;
});
return props.optionData.series
})
</script>
@@ -70,7 +70,7 @@ watch(
() => props.chartConfig.option.dataset,
(newData, oldData) => {
if (!isArray(newData)) return
if (newData?.length !== oldData?.length) {
if (Array.isArray(newData)) {
replaceMergeArr.value = ['series']
// eslint-disable-next-line vue/no-mutating-props
props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({