github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增图表独立配置混合

Browse Source
This commit is contained in:
mtruning
2022-02-26 17:38:24 +08:00
parent 0bf38c032c
commit 8d97bdc976
43 changed files with 271 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Charts/Bars/BarCommon/config.ts
+43 -37
View File
@@ -6,49 +6,55 @@ import cloneDeep from 'lodash/cloneDeep'
export const includes = ['legend', 'xAxis', 'yAxis']
// 图表配置项
const option = echartOptionProfixHandle(
{
tooltip: {
export const option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
show: true,
trigger: 'axis',
axisPointer: {
show: true,
type: 'shadow'
}
},
legend: {
show: true,
},
xAxis: {
show: true,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'value'
},
series: [
{
name: 'data1',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'data2',
type: 'bar',
data: [130, 130, 312, 268, 155, 117, 160]
}
]
type: 'shadow'
}
},
includes
)
legend: {
show: true,
},
xAxis: {
show: true,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'value'
},
series: [
{
name: 'data1',
type: 'bar',
barWidth: null,
itemStyle: {
color: null,
borderRadius: 0
},
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'data2',
type: 'bar',
barWidth: null,
itemStyle: {
color: null,
borderRadius: 0
},
data: [130, 130, 312, 268, 155, 117, 160]
}
]
}
export default class Config extends publicConfig
implements CreateComponentType {
public key = BarCommonConfig.key
public chartConfig = omit(cloneDeep(BarCommonConfig), ['node'])
// 图表配置项
public option = option
public option = echartOptionProfixHandle(option, includes)
}
src/packages/components/Charts/Bars/BarCommon/config.vue
+39 -1
View File
@@ -1,7 +1,45 @@
<template>
<div>配置项目</div>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
</SettingItem>
<SettingItem>
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
v-model:value="item.barWidth"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
/>
</SettingItem>
<SettingItem name="圆角">
<n-input-number
v-model:value="item.itemStyle.borderRadius"
:min="0"
size="small"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>
src/packages/components/Charts/Bars/BarCommon/index.ts
+2
View File
@@ -1,4 +1,5 @@
import BarCommon from './index.vue'
import Configuration from './config.vue'
import image from '@/assets/images/chart/charts/bar_x.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const BarCommonConfig: ConfigType = {
categoryName: ChatCategoryEnumName.BAR,
package: PackagesCategoryEnum.CHARTS,
node: BarCommon,
conNode: () => Configuration,
image: image,
}
src/packages/components/Charts/Bars/BarCrossrange/config.ts
+42 -35
View File
@@ -6,48 +6,55 @@ import cloneDeep from 'lodash/cloneDeep'
export const includes = ['legend', 'xAxis', 'yAxis']
const option = echartOptionProfixHandle(
{
tooltip: {
export const option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
show: true,
trigger: 'axis',
axisPointer: {
show: true,
type: 'shadow'
}
type: 'shadow',
},
legend: {
show: true,
},
xAxis: {
show: true,
type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'category'
},
series: [
{
name: 'data1',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'data2',
type: 'bar',
data: [130, 130, 312, 268, 155, 117, 160]
}
]
},
includes
)
legend: {
show: true,
},
xAxis: {
show: true,
type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
show: true,
type: 'category',
},
series: [
{
name: 'data1',
type: 'bar',
barWidth: null,
itemStyle: {
color: null,
borderRadius: 0,
},
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: 'data2',
type: 'bar',
barWidth: null,
itemStyle: {
color: null,
borderRadius: 0,
},
data: [130, 130, 312, 268, 155, 117, 160],
},
],
}
export default class Config extends publicConfig
implements CreateComponentType {
public key: string = BarCrossrangefig.key
public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node'])
// 图表配置项
public option = option
public option = echartOptionProfixHandle(option, includes)
}
src/packages/components/Charts/Bars/BarCrossrange/config.vue
+39 -1
View File
@@ -1,7 +1,45 @@
<template>
<div>配置项目</div>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
</SettingItem>
<SettingItem>
<n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
v-model:value="item.barWidth"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
/>
</SettingItem>
<SettingItem name="圆角">
<n-input-number
v-model:value="item.itemStyle.borderRadius"
:min="0"
size="small"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
import { option } from './config'
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const seriesList = computed(() => {
return props.optionData.series
})
</script>
src/packages/components/Charts/Bars/BarCrossrange/index.ts
+2
View File
@@ -1,4 +1,5 @@
import BarCrossrange from './index.vue'
import Configuration from './config.vue'
import image from '@/assets/images/chart/charts/bar_y.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const BarCrossrangefig: ConfigType = {
categoryName: ChatCategoryEnumName.BAR,
package: PackagesCategoryEnum.CHARTS,
node: BarCrossrange,
conNode: () => Configuration,
image: image
}
src/packages/components/Charts/Lines/LineCommon/config.ts
+3 -8
View File
@@ -5,7 +5,7 @@ import omit from 'lodash/omit'
export const includes = ['legend', 'xAxis', 'yAxis']
const options = echartOptionProfixHandle({
const option = {
legend: {
show: true,
},
@@ -23,18 +23,13 @@ const options = echartOptionProfixHandle({
name: 'data1',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'data2',
type: 'line',
data: [130, 130, 312, 268, 155, 117, 160]
}
]
}, includes)
}
export default class Config extends publicConfig implements CreateComponentType {
public key: string = LineCommonConfig.key
public chartConfig = omit(LineCommonConfig, ['node'])
// 图表配置项
public option = options
public option = echartOptionProfixHandle(option, includes)
}
src/packages/components/Charts/Lines/LineCommon/config.vue
-1
View File
@@ -1,5 +1,4 @@
<template>
<div>配置项目</div>
</template>
<script setup lang="ts">
src/packages/components/Charts/Lines/LineCommon/index.ts
+2
View File
@@ -1,4 +1,5 @@
import LineCommon from './index.vue'
import Configuration from './config.vue'
import image from '@/assets/images/chart/charts/line.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const LineCommonConfig: ConfigType = {
categoryName: ChatCategoryEnumName.LINE,
package: PackagesCategoryEnum.CHARTS,
node: LineCommon,
conNode: () => Configuration,
image: image
}
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
-1
View File
@@ -1,5 +1,4 @@
<template>
<div>配置项目</div>
</template>
<script setup lang="ts">
src/packages/components/Charts/Lines/LineGradientSingle/index.ts
+2
View File
@@ -1,4 +1,5 @@
import LineGradientSingle from './index.vue'
import Configuration from './config.vue'
import image from '@/assets/images/chart/charts/line_gradient_single.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const LineGradientSingleConfig: ConfigType = {
categoryName: ChatCategoryEnumName.LINE,
package: PackagesCategoryEnum.CHARTS,
node: LineGradientSingle,
conNode: () => Configuration,
image: image
}
src/packages/components/Charts/Lines/LineGradients/config.ts
+50 -53
View File
@@ -6,72 +6,69 @@ import omit from 'lodash/omit'
export const includes = ['legend', 'xAxis', 'yAxis']
const options = echartOptionProfixHandle(
{
legend: {
show: true
const option = {
legend: {
show: true,
},
xAxis: {
show: true,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
show: true,
type: 'value',
},
series: [
{
name: 'data1',
type: 'line',
smooth: false,
data: [120, 200, 150, 80, 70, 110, 130],
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25,163,223,.3)',
},
{
offset: 1,
color: 'rgba(25,163,223, 0)',
},
]),
},
},
xAxis: {
show: true,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'value'
},
series: [
{
name: 'data1',
type: 'line',
smooth: false,
data: [120, 200, 150, 80, 70, 110, 130],
areaStyle: {
{
name: 'data2',
type: 'line',
smooth: false,
areaStyle: {
normal: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25,163,223,.3)'
color: 'rgba(0,202,149,0.3)',
},
{
offset: 1,
color: 'rgba(25,163,223, 0)'
}
])
}
},
{
name: 'data2',
type: 'line',
smooth: false,
areaStyle: {
normal: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
]),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
}
color: 'rgba(0,202,149,0)',
},
]),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20,
},
data: [130, 130, 312, 268, 155, 117, 160]
}
]
},
includes
)
},
data: [130, 130, 312, 268, 155, 117, 160],
},
],
}
export default class Config extends publicConfig
implements CreateComponentType {
public key: string = LineGradientsConfig.key
public chartConfig = omit(LineGradientsConfig, ['node'])
// 图表配置项
public option = options
public option = echartOptionProfixHandle(option, includes)
}
src/packages/components/Charts/Lines/LineGradients/config.vue
-1
View File
@@ -1,5 +1,4 @@
<template>
<div>配置项目</div>
</template>
<script setup lang="ts">
src/packages/components/Charts/Lines/LineGradients/index.ts
+2
View File
@@ -1,4 +1,5 @@
import LineGradients from './index.vue'
import Configuration from './config.vue'
import image from '@/assets/images/chart/charts/line_gradient2.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const LineGradientsConfig: ConfigType = {
categoryName: ChatCategoryEnumName.LINE,
package: PackagesCategoryEnum.CHARTS,
node: LineGradients,
conNode: () => Configuration,
image: image
}
src/packages/components/Charts/Pies/PieCommon/config.ts
+4 -4
View File
@@ -5,7 +5,7 @@ import omit from 'lodash/omit'
export const includes = ['legend']
const option = echartOptionProfixHandle({
const option = {
tooltip: {
show: true,
trigger: 'item'
@@ -17,7 +17,7 @@ const option = echartOptionProfixHandle({
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
radius: ['40%', '65%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
@@ -49,7 +49,7 @@ const option = echartOptionProfixHandle({
]
}
]
}, includes)
}
export default class Config extends publicConfig implements CreateComponentType {
public key: string = PieCommonConfig.key
@@ -57,5 +57,5 @@ export default class Config extends publicConfig implements CreateComponentType
public chartConfig = omit(PieCommonConfig, ['node'])
// 图表配置项
public option = option
public option = echartOptionProfixHandle(option, includes)
}
src/packages/components/Charts/Pies/PieCommon/config.vue
-1
View File
@@ -1,5 +1,4 @@
<template>
<div>配置项目</div>
</template>
<script setup lang="ts">
src/packages/components/Charts/Pies/PieCommon/index.ts
+2
View File
@@ -1,4 +1,5 @@
import PieCommon from './index.vue'
import Configuration from './config.vue'
import image from '@/assets/images/chart/charts/pie.png'
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const PieCommonConfig: ConfigType = {
categoryName: ChatCategoryEnumName.PIE,
package: PackagesCategoryEnum.CHARTS,
node: PieCommon,
conNode: () => Configuration,
image
}