test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-03 20:28:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 饼图新增类型

Browse Source
This commit is contained in:
蒋承 2022-09-26 17:34:33 +08:00
parent 39d9aa1896
commit 43f35de27a
3 changed files with 44 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/components/Charts/Pies/PieCommon/config.ts
View File

@ -24,7 +24,7 @@ const option = {
trigger: 'item'
},
legend: {
show: true,
show: true
},
dataset: { ...dataJson },
series: [

37
src/packages/components/Charts/Pies/PieCommon/config.vue
View File

@ -1,48 +1,39 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" ></global-setting>
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="饼图配置" :expanded="true">
<SettingItemBox name="类型">
<SettingItem>
<n-select
v-model:value="optionData.type"
size="small"
:options="fontWeightOptions"
/>
<n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, watch } from "vue";
import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem,
} from "@/components/Pages/ChartItemSetting";
import { PieTypeObject, PieTypeEnum } from "./config";
import { PropType, watch } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { PieTypeObject, PieTypeEnum } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true,
},
});
required: true
}
})
const fontWeightOptions = [
{
label: PieTypeEnum.NORMAL,
value: PieTypeObject[PieTypeEnum.NORMAL],
value: PieTypeObject[PieTypeEnum.NORMAL]
},
{
label: PieTypeEnum.RING,
value: PieTypeObject[PieTypeEnum.RING],
value: PieTypeObject[PieTypeEnum.RING]
},
{
label: PieTypeEnum.ROSE,
value: PieTypeObject[PieTypeEnum.ROSE],
},
];
value: PieTypeObject[PieTypeEnum.ROSE]
}
]
</script>

76
src/packages/components/Charts/Pies/PieCommon/index.vue
View File

@ -1,54 +1,36 @@
<template>
<v-chart
ref="vChartRef"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
autoresize
></v-chart>
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
import { computed, PropType, reactive, watch } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { mergeTheme } from "@/packages/public/chart";
import config, { includes } from "./config";
import { useChartDataFetch } from "@/hooks";
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
import { isPreview } from "@/utils";
import {
DatasetComponent,
GridComponent,
TooltipComponent,
LegendComponent,
} from "echarts/components";
import { computed, PropType, reactive, watch } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
type: Object,
required: true,
required: true
},
themeColor: {
type: Object,
required: true,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true,
},
});
required: true
}
})
use([
DatasetComponent,
CanvasRenderer,
PieChart,
GridComponent,
TooltipComponent,
LegendComponent,
]);
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@ -56,20 +38,20 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.type,
(newData) => {
if (newData === "nomal") {
props.chartConfig.option.series[0].radius = "70%";
props.chartConfig.option.series[0].roseType = false;
} else if (newData === "ring") {
props.chartConfig.option.series[0].radius = ["40%", "65%"];
props.chartConfig.option.series[0].roseType = false;
newData => {
if (newData === 'nomal') {
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = false
} else if (newData === 'ring') {
props.chartConfig.option.series[0].radius = ['40%', '65%']
props.chartConfig.option.series[0].roseType = false
} else {
props.chartConfig.option.series[0].radius = "70%";
props.chartConfig.option.series[0].roseType = true;
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = true
}
},
{ deep: true, immediate: true }
);
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>