feat: 新增全局样式设置

This commit is contained in:
MTrun
2022-02-21 19:45:11 +08:00
parent 133c6bea6b
commit 8b890fb5e3
11 changed files with 162 additions and 61 deletions
@@ -1,5 +1,5 @@
<template>
<VChart :theme="themeData" :option="option" autoresize />
<VChart :theme="themeColor" :option="option" autoresize />
</template>
<script setup lang="ts">
@@ -8,16 +8,22 @@ 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 merge from 'lodash/merge'
import {
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
} from 'echarts/components'
import config from './config'
const props = defineProps({
themeData: {
type: Object || String,
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartData: {
@@ -31,10 +37,11 @@ use([
BarChart,
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
])
const option = computed(() => {
return props.chartData.option
return merge(props.chartData.option, props.themeSetting)
})
</script>
@@ -1,5 +1,5 @@
<template>
<VChart :theme="themeData" :option="option" autoresize />
<VChart :theme="themeColor" :option="option" autoresize />
</template>
<script setup lang="ts">
@@ -8,17 +8,22 @@ 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 {
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
} from 'echarts/components'
import config from './config'
const props = defineProps({
themeData: {
type: Object || String,
default: 'dark',
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartData: {
@@ -32,11 +37,12 @@ use([
BarChart,
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
])
const option = computed(() => {
return props.chartData.option
return merge(props.chartData.option, props.themeSetting)
})
</script>
@@ -1,5 +1,5 @@
<template>
<VChart :theme="themeData" :option="option" autoresize />
<VChart :theme="themeColor" :option="option" autoresize />
</template>
<script setup lang="ts">
@@ -8,17 +8,22 @@ 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 merge from 'lodash/merge'
import {
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
} from 'echarts/components'
import config from './config'
const props = defineProps({
themeData: {
type: Object || String,
default: 'dark',
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartData: {
@@ -32,10 +37,11 @@ use([
LineChart,
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
])
const option = computed(() => {
return props.chartData.option
return merge(props.chartData.option, props.themeSetting)
})
</script>
@@ -1,5 +1,5 @@
<template>
<VChart :theme="themeData" :option="option" autoresize />
<VChart :theme="themeColor" :option="option" autoresize />
</template>
<script setup lang="ts">
@@ -8,17 +8,22 @@ import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import merge from 'lodash/merge'
import config from './config'
import {
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
} from 'echarts/components'
import config from './config'
const props = defineProps({
themeData: {
type: Object || String,
default: 'dark',
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartData: {
@@ -32,10 +37,11 @@ use([
PieChart,
GridComponent,
TooltipComponent,
LegendComponent
LegendComponent,
TitleComponent
])
const option = computed(() => {
return props.chartData.option
return merge(props.chartData.option, props.themeSetting)
})
</script>