blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-29 04:46:36 +08:00
Code Issues Projects Releases Wiki Activity

fix: 解决环形组件不会自动更新的问题

Browse Source
This commit is contained in:
奔跑的面条 2022-06-25 20:34:50 +08:00
parent de0404705b
commit 48a6b14537
1 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/packages/components/Charts/Pies/PieCircle/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart> <v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {computed, PropType, reactive, watch} from 'vue' import { PropType, reactive, watch } from 'vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { use } from 'echarts/core' import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers' import { CanvasRenderer } from 'echarts/renderers'
@ -12,14 +12,7 @@ import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config' import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import {
DatasetComponent,
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent,
} from 'echarts/components'
const props = defineProps({ const props = defineProps({
themeSetting: { themeSetting: {
@ -36,36 +29,41 @@ const props = defineProps({
} }
}) })
use([ use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
DatasetComponent,
CanvasRenderer,
PieChart,
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent
])
const option = reactive({ const option = reactive({
value: {} value: {}
}) })
const dataHandle = (newData: any) => {
const d = parseFloat(`${newData}`) * 100
let config = props.chartConfig.option
config.title.text = d.toFixed(2) + '%'
config.series[0].data[0].value[0] = d
config.series[0].data[1].value[0] = 100 - d
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
option.value = props.chartConfig.option
}
// 配置时
watch( watch(
() => props.chartConfig.option.dataset, () => props.chartConfig.option.dataset,
(newData) => { newData => {
// console.log('update:'+newData) dataHandle(newData)
const d = parseFloat(`${newData}`) * 100 },
let config = props.chartConfig.option {
config.title.text = d.toFixed(2) + "%" immediate: true
config.series[0].data[0].value[0] = d }
config.series[0].data[1].value[0] = 100 - d
option.value = mergeTheme(config, props.themeSetting, includes)
option.value = config
},
{
immediate: true,
}
) )
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) // 预览时
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
let d = parseFloat(`${resData}`) * 100
// @ts-ignore
option.value.title.text = d.toFixed(2) + '%'
// @ts-ignore
option.value.series[0].data[0].value[0] = d
// @ts-ignore
option.value.series[0].data[1].value[0] = 100 - d
})
</script> </script>