mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-18 19:59:14 +08:00
feat: 新增饼图纹理配置器
This commit is contained in:
parent
9fa0ee630e
commit
f883fec1f6
@ -1,2 +1,3 @@
|
|||||||
export * from './legends'
|
export * from './legends'
|
||||||
export * from './label'
|
export * from './label'
|
||||||
|
export * from './style'
|
40
src/packages/chartConfiguration/vcharts/style.ts
Normal file
40
src/packages/chartConfiguration/vcharts/style.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
export const styleConfig = {
|
||||||
|
texture: [
|
||||||
|
{
|
||||||
|
label: '无纹理',
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '圆形',
|
||||||
|
value: 'circle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '钻石',
|
||||||
|
value: 'diamond'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '矩形',
|
||||||
|
value: 'rect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '竖线',
|
||||||
|
value: 'horizontal-line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '横线',
|
||||||
|
value: 'vertical-line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '右向左斜线',
|
||||||
|
value: 'bias-rl'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '左向右斜线',
|
||||||
|
value: 'bias-lr'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '格子',
|
||||||
|
value: 'grid'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -49,7 +49,9 @@ export const option: IPieOption & { dataset?: any } = {
|
|||||||
lineWidth: 0,
|
lineWidth: 0,
|
||||||
// 颜色
|
// 颜色
|
||||||
stroke: '#ffffff'
|
stroke: '#ffffff'
|
||||||
}
|
},
|
||||||
|
// 纹理
|
||||||
|
texture: ''
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
hover: {
|
hover: {
|
||||||
|
@ -44,6 +44,13 @@
|
|||||||
<FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
|
<FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="分段样式">
|
<SettingItemBox name="分段样式">
|
||||||
|
<setting-item name="纹理类型">
|
||||||
|
<n-select
|
||||||
|
v-model:value="optionData.pie.style.texture"
|
||||||
|
:options="styleConfig.texture"
|
||||||
|
size="small"
|
||||||
|
></n-select>
|
||||||
|
</setting-item>
|
||||||
<setting-item name="圆角大小">
|
<setting-item name="圆角大小">
|
||||||
<n-input-number v-model:value="optionData.pie.style.cornerRadius" size="small" :min="0"></n-input-number>
|
<n-input-number v-model:value="optionData.pie.style.cornerRadius" size="small" :min="0"></n-input-number>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
@ -64,7 +71,7 @@
|
|||||||
:min="0"
|
:min="0"
|
||||||
></n-input-number>
|
></n-input-number>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
<setting-item name="透明度">
|
<setting-item name="描边透明度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.pie.style.outerBorder.strokeOpacity"
|
v-model:value="optionData.pie.style.outerBorder.strokeOpacity"
|
||||||
:step="0.1"
|
:step="0.1"
|
||||||
@ -89,7 +96,7 @@ import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
|
|||||||
import FontStyle from '@/components/Pages/VChartItemSetting/common/FontStyle.vue'
|
import FontStyle from '@/components/Pages/VChartItemSetting/common/FontStyle.vue'
|
||||||
import type { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
import type { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
import { labelConfig } from '@/packages/chartConfiguration/vcharts/index'
|
import { labelConfig, styleConfig } from '@/packages/chartConfiguration/vcharts/index'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
optionData: {
|
optionData: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user