Pre Merge pull request !23 from 王志强/master

This commit is contained in:
王志强 2022-06-23 09:02:29 +00:00 committed by Gitee
commit 52b62cca85
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
8 changed files with 212 additions and 2 deletions

View File

@ -0,0 +1,69 @@
import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { GaugeRingConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import dataJson from './data.json'
const option = {
dataset: { ...dataJson },
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
color:'#3263ec'
}
},
axisLine: {
lineStyle: {
width: 40
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
title: {
fontSize: 14,
offsetCenter: ['0%', '-10%']
},
detail: {
width: 50,
height: 14,
fontSize: 20,
color: '#3263ec',
borderColor: 'auto',
borderRadius: 20,
borderWidth: 0,
formatter: '{value}%',
valueAnimation: true,
offsetCenter: ['0%', '0%']
}
}
]
}
export default class Config extends publicConfig implements CreateComponentType {
public key: string = GaugeRingConfig.key
public chartConfig = GaugeRingConfig
// 图表配置项
public option = echartOptionProfixHandle(option,[])
}

View File

@ -0,0 +1,51 @@
<template>
<!-- 遍历 seriesList -->
<CollapseItem :name="`圆环`" :expanded="true">
<SettingItemBox name="样式">
<SettingItem name="环宽度">
<n-input-number v-model:value="config.series[0].axisLine.lineStyle.width" :min="10" :step="1" size="small" placeholder="数值">
</n-input-number>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number v-model:value="config.series[0].detail.fontSize" :min="10" :step="1" size="small" placeholder="数值">
</n-input-number>
</SettingItem>
<SettingItem name="环颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="config.series[0].progress.itemStyle.color"
></n-color-picker>
</SettingItem>
<SettingItem name="字颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="config.series[0].detail.color"
></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/cartThemes'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
}
})
const config = computed(() => {
return props.optionData
})
</script>

View File

@ -0,0 +1,6 @@
{
"dimensions": ["data"],
"source": [
{ "data":80 }
]
}

View File

@ -0,0 +1,14 @@
import image from '@/assets/images/chart/charts/pie-circle.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const GaugeRingConfig: ConfigType = {
key: 'GaugeRing',
chartKey: 'VGaugeRing',
conKey: 'VCGaugeRing',
title: '仪表盘-圆环',
category: ChatCategoryEnum.GAUGE,
categoryName: ChatCategoryEnumName.GAUGE,
package: PackagesCategoryEnum.CHARTS,
image
}

View File

@ -0,0 +1,64 @@
<template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
</template>
<script setup lang="ts">
import {PropType, ref, watch} from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { GaugeChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config 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,
GaugeChart,
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
])
const option = ref()
watch(
() => props.chartConfig.option,
(newData) => {
console.log('update:'+newData)
option.value = newData
},
{
immediate: true
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>

View File

@ -0,0 +1,3 @@
import { GaugeRingConfig } from './GaugeRing/index'
export default [GaugeRingConfig]

View File

@ -1,14 +1,16 @@
export enum ChatCategoryEnum {
BAR = 'Bars',
PIE = 'Pies',
GAUGE = 'Gauges',
LINE = 'Lines',
MAP = 'Maps',
MORE = 'Mores'
MORE = 'Mores',
}
export enum ChatCategoryEnumName {
BAR = '柱状图',
PIE = '饼图',
GAUGE = '仪表盘',
LINE = '折线图',
MAP = '地图',
MORE = '更多'

View File

@ -1,7 +1,8 @@
import Bars from './Bars'
import Pies from './Pies'
import Gauges from './Gauges'
import Lines from './Lines'
import Mores from './Mores'
import Maps from './Maps'
export const ChartList = [...Bars, ...Pies, ...Lines, ...Maps, ...Mores]
export const ChartList = [...Bars, ...Pies, ...Gauges, ...Lines, ...Maps, ...Mores]