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

fix: 修改图表数据接口的hooks

Browse Source
This commit is contained in:
MTrun
2022-03-25 19:58:39 +08:00
parent a43f0791ea
commit c46c6d30e7
11 changed files with 121 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/index.ts
+3 -1
View File
@@ -1,3 +1,5 @@
export * from '@/hooks/useTheme.hook'
export * from '@/hooks/usePreviewScale.hook'
export * from '@/hooks/useCode.hook'
export * from '@/hooks/useCode.hook'
export * from '@/hooks/useChartDataFetch.hook'
export * from '@/hooks/useChartTheme.hook'
src/hooks/useChartDataFetch.hook.ts
+3 -1
View File
@@ -6,11 +6,13 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
import { RequestDataTypeEnum } from '@/enums/httpEnum'
import { isPreview } from '@/utils'
type ChartEditStoreType = typeof useChartEditStore
/**
* 图表的 setdata 数据监听与更改
* @param chartConfig
*/
export const useChartDataFetch = (chartConfig: CreateComponentType) => {
export const useChartDataFetch = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType) => {
const vChartRef = ref<typeof VChart | null>(null)
let fetchInterval: any = 0
src/hooks/useChartTheme.hook.ts
+34
View File
@@ -0,0 +1,34 @@
import { onMounted, ref, watch } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import merge from 'lodash/merge'
/**
* border-hook
* @param props
* @param _defaultColor 默认颜色
* @param afterResizeFun resize容器之后执行函数
*/
export const useBorderBox = (props: any, _defaultColor: string[]) => {
const mergedColor = ref([])
const defaultColor = ref(_defaultColor)
function mergeColor() {
mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || [])
}
watch(
() => [props.color, props.reverse],
() => {
mergeColor()
}
)
onMounted(() => {
mergeColor()
})
return {
defaultColor,
mergeColor,
mergedColor
}
}
src/packages/components/Charts/Bars/BarCommon/index.vue
+3 -2
View File
@@ -10,8 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {
DatasetComponent,
@@ -48,5 +49,5 @@ const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const { vChartRef } = useChartDataFetch(props.chartConfig)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
src/packages/components/Charts/Bars/BarCrossrange/index.vue
+3 -2
View File
@@ -10,7 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {
DatasetComponent,
@@ -47,5 +48,5 @@ const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const { vChartRef } = useChartDataFetch(props.chartConfig)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
src/packages/components/Charts/Lines/LineCommon/index.vue
+2 -2
View File
@@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartDataFetch } from '@/hooks'
import { isPreview } from '@/utils'
const props = defineProps({
@@ -67,5 +67,5 @@ watch(() => props.chartConfig.option.dataset, () => {
deep: true
})
const { vChartRef } = useChartDataFetch(props.chartConfig)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+2 -2
View File
@@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartDataFetch } from '@/hooks'
import { isPreview } from '@/utils'
const props = defineProps({
@@ -74,5 +74,5 @@ watch(() => props.chartConfig.option.dataset, () => {
deep: true
})
const { vChartRef } = useChartDataFetch(props.chartConfig)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
src/packages/components/Charts/Lines/LineGradients/index.vue
+2 -2
View File
@@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartDataFetch } from '@/hooks'
import { isPreview } from '@/utils'
const props = defineProps({
@@ -73,5 +73,5 @@ watch(() => props.chartConfig.option.dataset, () => {
deep: true
})
const { vChartRef } = useChartDataFetch(props.chartConfig)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
src/packages/components/Charts/Pies/PieCommon/index.vue
+3 -2
View File
@@ -10,7 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {
DatasetComponent,
@@ -48,5 +49,5 @@ const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const { vChartRef } = useChartDataFetch(props.chartConfig)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>
src/packages/components/Decorates/Borders/borderCommon/index.vue
+63 -6
View File
@@ -1,13 +1,70 @@
<template>
<div>
边框
</div>
<div></div>
<!-- <div class="bv-border-box-13" ref="domRef">
<svg class="bv-border-svg-container" :width="width" :height="height">
<path
:fill="backgroundColor"
:stroke="mergedColor[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${width - 20} 10 L ${width - 5} 25
L ${width - 5} ${height - 5} L 20 ${height - 5}
L 5 ${height - 20} L 5 20
`"
/>
<path
fill="transparent"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
:stroke="mergedColor[0]"
:d="`M 16 9 L 61 9`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
/>
<path
fill="transparent"
:stroke="mergedColor[1]"
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${
width - 30
} ${height - 5}`"
/>
</svg>
<div class="border-box-content">
<slot></slot>
</div>
</div> -->
</template>
<script setup lang="ts">
// import { useBorderBox } from '@/hooks'
// const props = defineProps({
// width: {
// type: Number,
// default: 200
// },
// height: {
// type: Number,
// default: 200
// },
// color: {
// type: Array,
// default: () => []
// },
// backgroundColor: {
// type: String,
// default: 'transparent'
// }
// })
// const {defaultColor, mergedColor} = useBorderBox(props, ['#6586ec', '#2cf7fe'])
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>