perf: 优化漏斗代码

This commit is contained in:
奔跑的面条 2022-09-08 16:31:26 +08:00
parent 6b81559d4c
commit 2c7192b40c
5 changed files with 14 additions and 12 deletions

View File

@ -19,7 +19,7 @@ export const FunnelLabelPositionEnumList = [
{ label: '内部右侧', value: 'insideRight' } { label: '内部右侧', value: 'insideRight' }
] ]
const option = { export const option = {
tooltip: {}, tooltip: {},
legend: {}, legend: {},
dataset: { ...dataJson }, dataset: { ...dataJson },

View File

@ -8,6 +8,7 @@
<n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" /> <n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" />
</setting-item> </setting-item>
</setting-item-box> </setting-item-box>
<setting-item-box name="区块"> <setting-item-box name="区块">
<setting-item name="边框大小"> <setting-item name="边框大小">
<n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" /> <n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" />
@ -19,6 +20,7 @@
<n-input-number v-model:value="item.gap" :min="0" :max="20" size="small" /> <n-input-number v-model:value="item.gap" :min="0" :max="20" size="small" />
</setting-item> </setting-item>
</setting-item-box> </setting-item-box>
<setting-item-box name="标签"> <setting-item-box name="标签">
<setting-item name="是否显示"> <setting-item name="是否显示">
<n-checkbox v-model:checked="item.label.show" size="small">标签</n-checkbox> <n-checkbox v-model:checked="item.label.show" size="small">标签</n-checkbox>
@ -40,11 +42,11 @@
import { PropType, computed } from 'vue' import { PropType, computed } from 'vue'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index' import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { FunnelOrderEnumList, FunnelLabelPositionEnumList } from './config' import { option, FunnelOrderEnumList, FunnelLabelPositionEnumList } from './config'
const props = defineProps({ const props = defineProps({
optionData: { optionData: {
type: Object as PropType<GlobalThemeJsonType>, type: Object as PropType<typeof option>,
required: true required: true
} }
}) })

View File

@ -1,10 +1,10 @@
{ {
"dimensions": ["product", "2015"], "dimensions": ["product", "category"],
"source": [ "source": [
{ "product": "Matcha Latte", "2015": 20 }, { "product": "data1", "category": 20 },
{ "product": "Milk Tea", "2015": 40 }, { "product": "data2", "category": 40 },
{ "product": "Cheese Cocoa", "2015": 60 }, { "product": "data3", "category": 60 },
{ "product": "Walnut Brownie", "2015": 80 }, { "product": "data4", "category": 80 },
{ "product": "Walnut", "2015": 100 } { "product": "data5", "category": 100 }
] ]
} }

View File

@ -38,7 +38,8 @@ const option = computed(() => {
}) })
const dataSetHandle = (dataset: any) => { const dataSetHandle = (dataset: any) => {
if (props.chartConfig.option.legend && dataset.seriesData) { if (dataset.seriesData) {
// @ts-ignore
props.chartConfig.option.legend.data = dataset.seriesData.map((i: { name: string }) => i.name) props.chartConfig.option.legend.data = dataset.seriesData.map((i: { name: string }) => i.name)
} }
if (dataset.radarIndicator) { if (dataset.radarIndicator) {

View File

@ -86,7 +86,6 @@
"top": "5%", "top": "5%",
"textStyle": { "textStyle": {
"color": "#B9B8CE" "color": "#B9B8CE"
}, }
"data": []
} }
} }