github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 解决高版本TS错误问题

Browse Source
This commit is contained in:
奔跑的面条 2023-12-16 21:26:16 +08:00
parent 4f21020d24
commit 3e641e4bab
3 changed files with 157 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/packages/components/Charts/Mores/Funnel/index.vue
View File

@ -1,44 +1,52 @@
<template> <template>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart> <v-chart
</template> ref="vChartRef"
:init-options="initOptions"
<script setup lang="ts"> :theme="themeColor"
import { computed, PropType } from 'vue' :option="(option as EChartsOption)"
import VChart from 'vue-echarts' :manual-update="isPreview()"
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' autoresize
import { use } from 'echarts/core' ></v-chart>
import { CanvasRenderer } from 'echarts/renderers' </template>
import { FunnelChart } from 'echarts/charts'
import { includes } from './config' <script setup lang="ts">
import { mergeTheme } from '@/packages/public/chart' import { computed, PropType } from 'vue'
import { useChartDataFetch } from '@/hooks' import VChart from 'vue-echarts'
import { CreateComponentType } from '@/packages/index.d' import { EChartsOption } from 'echarts'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { isPreview } from '@/utils' import { use } from 'echarts/core'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers'
import { FunnelChart } from 'echarts/charts'
const props = defineProps({ import { includes } from './config'
themeSetting: { import { mergeTheme } from '@/packages/public/chart'
type: Object, import { useChartDataFetch } from '@/hooks'
required: true import { CreateComponentType } from '@/packages/index.d'
}, import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
themeColor: { import { isPreview } from '@/utils'
type: Object, import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
required: true
}, const props = defineProps({
chartConfig: { themeSetting: {
type: Object as PropType<CreateComponentType>, type: Object,
required: true required: true
} },
}) themeColor: {
type: Object,
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting) required: true
},
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent]) chartConfig: {
type: Object as PropType<CreateComponentType>,
const option = computed(() => { required: true
return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }
}) })
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
</script>
use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>

3
src/packages/components/Charts/Mores/Graph/index.vue
View File

@ -3,7 +3,7 @@
ref="vChartRef" ref="vChartRef"
:init-options="initOptions" :init-options="initOptions"
:theme="themeColor" :theme="themeColor"
:option="option" :option="(option as EChartsOption)"
:manual-update="isPreview()" :manual-update="isPreview()"
autoresize autoresize
></v-chart> ></v-chart>
@ -12,6 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, PropType, watch } from 'vue' import { ref, computed, PropType, watch } from 'vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { EChartsOption } from 'echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import dataJson from './data.json' import dataJson from './data.json'
import { use } from 'echarts/core' import { use } from 'echarts/core'

198
src/packages/components/Charts/Mores/Heatmap/index.vue
View File

@ -1,95 +1,103 @@
<template> <template>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart> <v-chart
</template> ref="vChartRef"
:init-options="initOptions"
<script setup lang="ts"> :theme="themeColor"
import { ref, watch, computed, PropType } from 'vue' :option="(option as EChartsOption)"
import VChart from 'vue-echarts' :manual-update="isPreview()"
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' autoresize
import dataJson from './data.json' ></v-chart>
import { use } from 'echarts/core' </template>
import { CanvasRenderer } from 'echarts/renderers'
import { HeatmapChart } from 'echarts/charts' <script setup lang="ts">
import { includes } from './config' import { ref, watch, computed, PropType } from 'vue'
import { mergeTheme, setOption } from '@/packages/public/chart' import VChart from 'vue-echarts'
import { useChartDataFetch } from '@/hooks' import { EChartsOption } from 'echarts'
import { CreateComponentType } from '@/packages/index.d' import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import dataJson from './data.json'
import { isPreview } from '@/utils' import { use } from 'echarts/core'
import { import { CanvasRenderer } from 'echarts/renderers'
DatasetComponent, import { HeatmapChart } from 'echarts/charts'
GridComponent, import { includes } from './config'
TooltipComponent, import { mergeTheme, setOption } from '@/packages/public/chart'
LegendComponent, import { useChartDataFetch } from '@/hooks'
VisualMapComponent import { CreateComponentType } from '@/packages/index.d'
} from 'echarts/components' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
const props = defineProps({ import {
themeSetting: { DatasetComponent,
type: Object, GridComponent,
required: true TooltipComponent,
}, LegendComponent,
themeColor: { VisualMapComponent
type: Object, } from 'echarts/components'
required: true
}, const props = defineProps({
chartConfig: { themeSetting: {
type: Object as PropType<CreateComponentType>, type: Object,
required: true required: true
} },
}) themeColor: {
type: Object,
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting) required: true
},
use([ chartConfig: {
DatasetComponent, type: Object as PropType<CreateComponentType>,
CanvasRenderer, required: true
HeatmapChart, }
GridComponent, })
TooltipComponent,
LegendComponent, const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
VisualMapComponent
]) use([
DatasetComponent,
const option = computed(() => { CanvasRenderer,
return mergeTheme(props.chartConfig.option, props.themeSetting, includes) HeatmapChart,
}) GridComponent,
TooltipComponent,
const vChartRef = ref<typeof VChart>() LegendComponent,
VisualMapComponent
const dataSetHandle = (dataset: typeof dataJson) => { ])
const { seriesData, xAxis, yAxis } = dataset
if (xAxis) { const option = computed(() => {
// @ts-ignore return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
props.chartConfig.option.xAxis.data = xAxis })
}
if (yAxis) { const vChartRef = ref<typeof VChart>()
// @ts-ignore
props.chartConfig.option.yAxis.data = yAxis const dataSetHandle = (dataset: typeof dataJson) => {
} const { seriesData, xAxis, yAxis } = dataset
if (seriesData) { if (xAxis) {
props.chartConfig.option.series[0].data = seriesData // @ts-ignore
} props.chartConfig.option.xAxis.data = xAxis
if (vChartRef.value && isPreview()) { }
setOption(vChartRef.value, props.chartConfig.option) if (yAxis) {
} // @ts-ignore
} props.chartConfig.option.yAxis.data = yAxis
}
watch( if (seriesData) {
() => props.chartConfig.option.dataset, props.chartConfig.option.series[0].data = seriesData
newData => { }
try { if (vChartRef.value && isPreview()) {
dataSetHandle(newData) setOption(vChartRef.value, props.chartConfig.option)
} catch (error) { }
console.log(error) }
}
}, watch(
{ () => props.chartConfig.option.dataset,
deep: false newData => {
} try {
) dataSetHandle(newData)
} catch (error) {
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => { console.log(error)
dataSetHandle(newData) }
}) },
</script> {
deep: false
}
)
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
dataSetHandle(newData)
})
</script>