mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-15 15:02:10 +08:00
Pre Merge pull request !23 from 王志强/master
This commit is contained in:
commit
52b62cca85
69
src/packages/components/Charts/Gauges/GaugeRing/config.ts
Normal file
69
src/packages/components/Charts/Gauges/GaugeRing/config.ts
Normal 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,[])
|
||||
}
|
51
src/packages/components/Charts/Gauges/GaugeRing/config.vue
Normal file
51
src/packages/components/Charts/Gauges/GaugeRing/config.vue
Normal 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>
|
@ -0,0 +1,6 @@
|
||||
{
|
||||
"dimensions": ["data"],
|
||||
"source": [
|
||||
{ "data":80 }
|
||||
]
|
||||
}
|
14
src/packages/components/Charts/Gauges/GaugeRing/index.ts
Normal file
14
src/packages/components/Charts/Gauges/GaugeRing/index.ts
Normal 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
|
||||
}
|
64
src/packages/components/Charts/Gauges/GaugeRing/index.vue
Normal file
64
src/packages/components/Charts/Gauges/GaugeRing/index.vue
Normal 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>
|
3
src/packages/components/Charts/Gauges/index.ts
Normal file
3
src/packages/components/Charts/Gauges/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { GaugeRingConfig } from './GaugeRing/index'
|
||||
|
||||
export default [GaugeRingConfig]
|
4
src/packages/components/Charts/index.d.ts
vendored
4
src/packages/components/Charts/index.d.ts
vendored
@ -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 = '更多'
|
||||
|
@ -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]
|
||||
|
Loading…
x
Reference in New Issue
Block a user