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:
MTrun
2022-02-24 17:23:20 +08:00
parent 2bdc489827
commit 14010cce8f
17 changed files with 219 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Charts/Bars/BarCommon/config.ts
+23 -12
View File
@@ -4,39 +4,50 @@ import { CreateComponentType } from '@/packages/index.d'
import omit from 'lodash/omit'
import cloneDeep from 'lodash/cloneDeep'
export default class Config extends publicConfig implements CreateComponentType {
public key = BarCommonConfig.key
public chartData = omit(cloneDeep(BarCommonConfig), ['node'])
export const includes = ['legend', 'xAxis', 'yAxis']
// 图表配置项
public option = echartOptionProfixHandle({
// 图表配置项
const option = echartOptionProfixHandle(
{
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ["name1", "name2"]
show: true,
},
xAxis: {
show: true,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'value'
},
series: [
{
name: 'name1',
name: 'data1',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: 'name2',
name: 'data2',
type: 'bar',
data: [130, 130, 312, 268, 155, 117, 160],
data: [130, 130, 312, 268, 155, 117, 160]
}
]
})
}
},
includes
)
export default class Config extends publicConfig
implements CreateComponentType {
public key = BarCommonConfig.key
public chartConfig = omit(cloneDeep(BarCommonConfig), ['node'])
// 图表配置项
public option = option
}
src/packages/components/Charts/Bars/BarCommon/index.vue
+5 -9
View File
@@ -8,13 +8,12 @@ import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import config from './config'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import {
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
LegendComponent
} from 'echarts/components'
const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
type: Object,
required: true
},
chartData: {
chartConfig: {
type: Object as PropType<config>,
required: true
}
@@ -37,13 +36,10 @@ use([
BarChart,
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
LegendComponent
])
const includes = ['title', 'legend', 'xAxis', 'yAxis']
const option = computed(() => {
return mergeTheme( props.chartData.option, props.themeSetting, includes)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
src/packages/components/Charts/Bars/BarCrossrange/config.ts
+27 -14
View File
@@ -2,38 +2,51 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
import { BarCrossrangefig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import omit from 'lodash/omit'
import cloneDeep from 'lodash/cloneDeep'
export default class Config extends publicConfig implements CreateComponentType {
public key: string = BarCrossrangefig.key
export const includes = ['legend', 'xAxis', 'yAxis']
public chartData = omit(BarCrossrangefig, ['node'])
// 图表配置项
public option = echartOptionProfixHandle({
const option = echartOptionProfixHandle(
{
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: true,
},
xAxis: {
show: true,
type: 'value',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: true,
type: 'category'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
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
)
// 设置坐标
public setPosition(x: number, y: number): void {
this.attr.x = x
this.attr.y = y
}
export default class Config extends publicConfig
implements CreateComponentType {
public key: string = BarCrossrangefig.key
public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node'])
// 图表配置项
public option = option
}
src/packages/components/Charts/Bars/BarCrossrange/index.vue
+4 -6
View File
@@ -8,13 +8,12 @@ import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import merge from 'lodash/merge'
import config from './config'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import {
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
} from 'echarts/components'
const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
type: Object,
required: true
},
chartData: {
chartConfig: {
type: Object as PropType<config>,
required: true
}
@@ -38,11 +37,10 @@ use([
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
])
const option = computed(() => {
return merge(props.themeSetting, props.chartData.option)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
src/packages/components/Charts/Lines/LineCommon/config.ts
+31 -28
View File
@@ -3,35 +3,38 @@ import { LineCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import omit from 'lodash/omit'
export const includes = ['legend', 'xAxis', 'yAxis']
const options = echartOptionProfixHandle({
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',
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 chartData = omit(LineCommonConfig, ['node'])
public chartConfig = omit(LineCommonConfig, ['node'])
// 图表配置项
public option = echartOptionProfixHandle({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [130, 130, 312, 268, 155, 117, 160],
type: 'line'
}
]
})
// 设置坐标
public setPosition(x: number, y: number): void {
this.attr.x = x
this.attr.y = y
}
public option = options
}
src/packages/components/Charts/Lines/LineCommon/index.vue
+3 -5
View File
@@ -8,7 +8,7 @@ import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config from './config'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import {
GridComponent,
@@ -26,7 +26,7 @@ const props = defineProps({
type: Object,
required: true
},
chartData: {
chartConfig: {
type: Object as PropType<config>,
required: true
}
@@ -41,9 +41,7 @@ use([
TitleComponent
])
const includes = ['title', 'legend', 'xAxis', 'yAxis']
const option = computed(() => {
return mergeTheme( props.chartData.option, props.themeSetting, includes)
return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
})
</script>
src/packages/components/Charts/Pies/PieCommon/config.ts
+50 -50
View File
@@ -3,59 +3,59 @@ import { PieCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import omit from 'lodash/omit'
export const includes = ['legend']
const option = echartOptionProfixHandle({
tooltip: {
show: true,
trigger: 'item'
},
legend: {
show: true,
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}, includes)
export default class Config extends publicConfig implements CreateComponentType {
public key: string = PieCommonConfig.key
public chartData = omit(PieCommonConfig, ['node'])
public chartConfig = omit(PieCommonConfig, ['node'])
// 图表配置项
public option = echartOptionProfixHandle({
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
})
// 设置坐标
public setPosition(x: number, y: number): void {
this.attr.x = x
this.attr.y = y
}
public option = option
}
src/packages/components/Charts/Pies/PieCommon/index.vue
+3 -6
View File
@@ -9,12 +9,11 @@ import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config from './config'
import config, { includes } from './config'
import {
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
} from 'echarts/components'
const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
type: Object,
required: true
},
chartData: {
chartConfig: {
type: Object as PropType<config>,
required: true
}
@@ -38,12 +37,10 @@ use([
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
])
const includes = ['title', 'legend']
const option = computed(() => {
return mergeTheme( props.chartData.option, props.themeSetting, includes)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
src/packages/index.d.ts
Vendored
+1 -1
View File
@@ -20,7 +20,7 @@ export interface PublicConfigType {
}
export interface CreateComponentType extends PublicConfigType {
key: string
chartData: Omit<ConfigType, 'node'>
chartConfig: Omit<ConfigType, 'node'>
option: object
}
src/packages/public/chart.ts
+12 -11
View File
@@ -1,14 +1,6 @@
import merge from 'lodash/merge'
import pick from 'lodash/pick'
/**
* * ECharts option 统一前置处理
* @param option
*/
export const echartOptionProfixHandle = (option: any) => {
option['backgroundColor'] = 'rgba(0,0,0,0)'
return option
}
import { globalThemeJson } from '@/settings/chartThemes/index'
/**
* * 合并 color 和全局配置项
@@ -17,10 +9,19 @@ export const echartOptionProfixHandle = (option: any) => {
* @param excludes 排除元素
* @returns object
*/
export const mergeTheme = <T, U, E extends keyof U> (
export const mergeTheme = <T, U> (
option: T,
themeSetting: U,
includes: E[] = []
includes: string[]
) => {
return merge({}, pick(themeSetting, includes), option)
}
/**
* * ECharts option 统一前置处理
* @param option
*/
export const echartOptionProfixHandle = (option: any, includes: string[]) => {
option['backgroundColor'] = 'rgba(0,0,0,0)'
return mergeTheme(option, globalThemeJson, includes)
}