mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-04 20:59:26 +08:00
feat: PieCircle
新增饼图环形
This commit is contained in:
parent
70f9df7650
commit
ac23d4c8dc
69
src/packages/components/Charts/Pies/PieCircle/config.ts
Normal file
69
src/packages/components/Charts/Pies/PieCircle/config.ts
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
|
||||||
|
import { PieCircleConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
|
||||||
|
export const includes = ['legend']
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
dataset: 0.25,
|
||||||
|
title: {
|
||||||
|
text: 25 + "%",
|
||||||
|
x: "center",
|
||||||
|
y: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#56B9F8",
|
||||||
|
fontSize: 30
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["75%", "80%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
hoverAnimation: true,
|
||||||
|
color: ["#00bcd44a", "transparent"],
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [25],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#03a9f4",
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor:"#97e2f5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [75],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#00bcd44a",
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowColor:"#00bcd44a"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends publicConfig implements CreateComponentType {
|
||||||
|
public key: string = PieCircleConfig.key
|
||||||
|
|
||||||
|
public chartConfig = PieCircleConfig
|
||||||
|
|
||||||
|
// 图表配置项
|
||||||
|
public option = echartOptionProfixHandle(option, includes)
|
||||||
|
}
|
89
src/packages/components/Charts/Pies/PieCircle/config.vue
Normal file
89
src/packages/components/Charts/Pies/PieCircle/config.vue
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 遍历 seriesList -->
|
||||||
|
<CollapseItem v-for="(item, index) in config.series" :key="index" :name="`圆环-${index + 1}`" :expanded="true">
|
||||||
|
<SettingItemBox name="数据">
|
||||||
|
<SettingItem name="数值">
|
||||||
|
<n-input-number v-model:value="config.dataset" :min="0" :max="1" :step="0.01" size="small" placeholder="数值">
|
||||||
|
</n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<!-- Echarts 全局设置 -->
|
||||||
|
<SettingItemBox name="进度条样式">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="item.data[0].itemStyle.normal.color"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="阴影模糊等级">
|
||||||
|
<n-input-number v-model:value="item.data[0].itemStyle.normal.shadowBlur" :min="0" :max="50" :step="1" size="small" placeholder="阴影模糊等级">
|
||||||
|
</n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="阴影颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="item.data[0].itemStyle.normal.shadowColor"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<!-- 中心标题 -->
|
||||||
|
<SettingItemBox name="标题">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="config.title.textStyle.color"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="字体大小">
|
||||||
|
<n-input-number v-model:value="config.title.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="字体大小">
|
||||||
|
</n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
<!-- 其他样式 -->
|
||||||
|
<SettingItemBox name="轨道样式">
|
||||||
|
<SettingItem name="颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="item.data[1].itemStyle.normal.color"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="阴影模糊等级">
|
||||||
|
<n-input-number v-model:value="item.data[1].itemStyle.normal.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影模糊等级">
|
||||||
|
</n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="阴影颜色">
|
||||||
|
<n-color-picker
|
||||||
|
size="small"
|
||||||
|
:modes="['hex']"
|
||||||
|
v-model:value="item.data[1].itemStyle.normal.shadowColor"
|
||||||
|
></n-color-picker>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, computed } from 'vue'
|
||||||
|
// 以下是封装的设置模块布局组件,具体效果可在官网查看
|
||||||
|
import {
|
||||||
|
CollapseItem,
|
||||||
|
SettingItemBox,
|
||||||
|
SettingItem
|
||||||
|
} from '@/components/Pages/ChartItemSetting'
|
||||||
|
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<GlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const config = computed(() => {
|
||||||
|
return props.optionData
|
||||||
|
})
|
||||||
|
</script>
|
14
src/packages/components/Charts/Pies/PieCircle/index.ts
Normal file
14
src/packages/components/Charts/Pies/PieCircle/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import image from '@/assets/images/chart/charts/circle.png'
|
||||||
|
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const PieCircleConfig: ConfigType = {
|
||||||
|
key: 'PieCircle',
|
||||||
|
chartKey: 'VPieCircle',
|
||||||
|
conKey: 'VCPieCircle',
|
||||||
|
title: '饼图-环形',
|
||||||
|
category: ChatCategoryEnum.PIE,
|
||||||
|
categoryName: ChatCategoryEnumName.PIE,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
image
|
||||||
|
}
|
71
src/packages/components/Charts/Pies/PieCircle/index.vue
Normal file
71
src/packages/components/Charts/Pies/PieCircle/index.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :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,
|
||||||
|
TitleComponent,
|
||||||
|
} from 'echarts/components'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
themeSetting: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
themeColor: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
use([
|
||||||
|
DatasetComponent,
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
TitleComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const option = reactive({
|
||||||
|
value: {}
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
(newData) => {
|
||||||
|
// console.log('update:'+newData)
|
||||||
|
const d = parseFloat(`${newData}`) * 100
|
||||||
|
let config = props.chartConfig.option
|
||||||
|
config.title.text = d.toFixed(2) + "%"
|
||||||
|
config.series[0].data[0].value[0] = d
|
||||||
|
config.series[0].data[1].value[0] = 100 - d
|
||||||
|
option.value = mergeTheme(config, props.themeSetting, includes)
|
||||||
|
option.value = config
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||||
|
</script>
|
@ -1,3 +1,4 @@
|
|||||||
import { PieCommonConfig } from './PieCommon/index'
|
import { PieCommonConfig } from './PieCommon/index'
|
||||||
|
import { PieCircleConfig } from './PieCircle/index'
|
||||||
|
|
||||||
export default [PieCommonConfig]
|
export default [PieCommonConfig, PieCircleConfig]
|
Loading…
Reference in New Issue
Block a user