2022-03-10 20:54:02 +08:00

46 lines
1.1 KiB
Vue

<template>
<VChart :theme="themeColor" :option="option" autoresize />
</template>
<script setup lang="ts">
import { computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<config>,
required: true
}
})
use([
CanvasRenderer,
LineChart,
GridComponent,
TooltipComponent,
LegendComponent
])
const chartEditStore = useChartEditStore()
const option = computed(() => {
console.log(chartEditStore.getEditCanvasConfig.chartThemeColor)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>