blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-10-15 15:02:10 +08:00
Code Issues Projects Releases Wiki Activity

fit: 饼图的配置项-半径、边框、阴影、扇区颜色自定义

Browse Source
This commit is contained in:
ryker 2022-06-13 15:06:51 +08:00
parent 5abfcfdd1b
commit 21ade49063
2 changed files with 86 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import dataJson from './data.json'
export const includes = ['legend']
const option = {
export const option = {
tooltip: {
show: true,
trigger: 'item'
@ -17,14 +17,17 @@ const option = {
series: [
{
type: 'pie',
radius: ['40%', '65%'],
radius: [40, 65],
center: ['50%', '60%'],
avoidLabelOverlap: false,
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
itemStyle: {
show: true,
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
borderWidth: 2,
borderType: 'solid',
shadowBlur: 10,
shadowColor: "#97e2f5"
},
label: {
show: false,

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

@ -1,12 +1,68 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`圆环-${index + 1}`" :expanded="true">
<SettingItemBox name="半径">
<SettingItem name="内半径">
<n-input-number v-model:value="item.radius[0]" :min="0" :step="1" size="small" placeholder="内半径">
</n-input-number>
</SettingItem>
<SettingItem name="外半径">
<n-input-number v-model:value="item.radius[1]" :min="0" :step="1" size="small" placeholder="外半径">
</n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="边框">
<SettingItem name="半径">
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" :step="1" size="small" placeholder="边框半径">
</n-input-number>
</SettingItem>
<SettingItem name="宽度">
<n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :step="1" size="small" placeholder="边框宽度">
</n-input-number>
</SettingItem>
<SettingItem name="样式">
<n-select v-model:value="item.itemStyle.borderType" :options="borderTypes" placeholder="选择边框样式" />
</SettingItem>
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.borderColor"></n-color-picker>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="阴影">
<SettingItem name="模糊级数">
<n-input-number v-model:value="item.itemStyle.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.itemStyle.shadowColor"></n-color-picker>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="扇区颜色">
<SettingItem :name="'颜色' + index" v-for="(_, index) in item.color">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.color[index]"></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.series[0].color = option.series[0].color"
>
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData" :in-chart="true"></global-setting>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { PropType, computed } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
import {
GlobalSetting,
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
import { option } from './config'
const props = defineProps({
optionData: {
@ -14,4 +70,23 @@ const props = defineProps({
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series
})
const borderTypes = [
{
label: '实线',
value: 'solid'
},
{
label: '虚线',
value: 'dashed'
},
{
label: '点状',
value: 'dotted'
}
]
</script>