fix: 优化漏斗图使用,解决预览数据变更页面的问题

This commit is contained in:
奔跑的面条 2022-09-08 20:47:34 +08:00
parent 455a9735e7
commit 7b3012d8da
5 changed files with 15 additions and 8 deletions

View File

@ -27,9 +27,9 @@ export const option = {
{
name: 'Funnel',
type: 'funnel',
top: '70',
left: '10%',
width: '80%',
bottom: 10,
min: 0,
minSize: '0%',
maxSize: '100%',

View File

@ -2,13 +2,19 @@
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"> </global-setting>
<!-- 漏斗图 -->
<collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图-${index + 1}`" expanded>
<collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图`" expanded>
<setting-item-box name="排序" alone>
<setting-item>
<n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" />
</setting-item>
</setting-item-box>
<SettingItemBox name="范围" :alone="true">
<setting-item :name="`顶部距离:${item.top}px`">
<n-slider v-model:value="item.top" :min="0" :max="300" :format-tooltip="sliderFormatTooltip"></n-slider>
</setting-item>
</SettingItemBox>
<setting-item-box name="区块">
<setting-item name="边框大小">
<n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" />
@ -54,4 +60,8 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const sliderFormatTooltip = (v: number) => {
return `${v}px`
}
</script>

View File

@ -1,5 +1,5 @@
import image from '@/assets/images/chart/charts/funnel.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const FunnelConfig: ConfigType = {
@ -10,5 +10,6 @@ export const FunnelConfig: ConfigType = {
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.CHARTS,
chartFrame: ChartFrameEnum.ECHARTS,
image
}

View File

@ -27,7 +27,6 @@
<SettingItemBox name="范围">
<setting-item :name="`最小值:${radarProp.radius[0]}%`">
<!-- 透明度 -->
<n-slider
v-model:value="radarProp.radius[0]"
:min="0"
@ -37,7 +36,6 @@
></n-slider>
</setting-item>
<setting-item :name="`最大值:${radarProp.radius[1]}%`">
<!-- 透明度 -->
<n-slider
v-model:value="radarProp.radius[1]"
:min="0"
@ -50,7 +48,6 @@
<SettingItemBox name="偏移">
<setting-item :name="`X 轴值:${radarProp.center[0]}%`">
<!-- 透明度 -->
<n-slider
v-model:value="radarProp.center[0]"
:min="0"
@ -60,7 +57,6 @@
></n-slider>
</setting-item>
<setting-item :name="`Y 轴值:${radarProp.center[1]}%`">
<!-- 透明度 -->
<n-slider
v-model:value="radarProp.center[1]"
:min="0"

View File

@ -6,7 +6,7 @@ export const RadarConfig: ConfigType = {
key: 'Radar',
chartKey: 'VRadar',
conKey: 'VCRadar',
title: '雷达',
title: '雷达',
category: ChatCategoryEnum.MORE,
categoryName: ChatCategoryEnumName.MORE,
package: PackagesCategoryEnum.CHARTS,