mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-04 12:49:14 +08:00
feat: 新增热力图mock，解决热力图无法响应式更新的问题
This commit is contained in:
奔跑的面条
parent
3fc6012145
commit
cfa7f59b0b
199
src/api/mock/heatMapData.json
Normal file
199
src/api/mock/heatMapData.json
Normal file
@ -0,0 +1,199 @@
|
||||
{
|
||||
"xAxis": [
|
||||
"12a",
|
||||
"1a",
|
||||
"2a",
|
||||
"3a",
|
||||
"4a",
|
||||
"5a",
|
||||
"6a",
|
||||
"7a",
|
||||
"8a",
|
||||
"9a",
|
||||
"10a",
|
||||
"11a",
|
||||
"12p",
|
||||
"1p",
|
||||
"2p",
|
||||
"3p",
|
||||
"4p",
|
||||
"5p",
|
||||
"6p",
|
||||
"7p",
|
||||
"8p",
|
||||
"9p",
|
||||
"10p",
|
||||
"11p"
|
||||
],
|
||||
"yAxis": ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"],
|
||||
"seriesData": [
|
||||
[0, 0, "@integer(0, 10)"],
|
||||
[1, 0, "@integer(0, 10)"],
|
||||
[2, 0, "-"],
|
||||
[3, 0, "-"],
|
||||
[4, 0, "-"],
|
||||
[5, 0, "-"],
|
||||
[6, 0, "-"],
|
||||
[7, 0, "-"],
|
||||
[8, 0, "-"],
|
||||
[9, 0, "-"],
|
||||
[10, 0, "-"],
|
||||
[11, 0, "@integer(0, 10)"],
|
||||
[12, 0, "@integer(0, 10)"],
|
||||
[13, 0, "@integer(0, 10)"],
|
||||
[14, 0, "@integer(0, 10)"],
|
||||
[15, 0, "@integer(0, 10)"],
|
||||
[16, 0, "@integer(0, 10)"],
|
||||
[17, 0, "@integer(0, 10)"],
|
||||
[18, 0, "@integer(0, 10)"],
|
||||
[19, 0, "@integer(0, 10)"],
|
||||
[20, 0, "@integer(0, 10)"],
|
||||
[21, 0, "@integer(0, 10)"],
|
||||
[22, 0, "@integer(0, 10)"],
|
||||
[23, 0, "@integer(0, 10)"],
|
||||
[0, 1, 7],
|
||||
[1, 1, "-"],
|
||||
[2, 1, "-"],
|
||||
[3, 1, "-"],
|
||||
[4, 1, "-"],
|
||||
[5, 1, "-"],
|
||||
[6, 1, "-"],
|
||||
[7, 1, "-"],
|
||||
[8, 1, "-"],
|
||||
[9, 1, "-"],
|
||||
[10, 1, "@integer(0, 10)"],
|
||||
[11, 1, "@integer(0, 10)"],
|
||||
[12, 1, "@integer(0, 10)"],
|
||||
[13, 1, "@integer(0, 10)"],
|
||||
[14, 1, "@integer(0, 10)"],
|
||||
[15, 1, "@integer(0, 10)"],
|
||||
[16, 1, "@integer(0, 10)"],
|
||||
[17, 1, "@integer(0, 10)"],
|
||||
[18, 1, "@integer(0, 10)"],
|
||||
[19, 1, "@integer(0, 10)"],
|
||||
[20, 1, "@integer(0, 10)"],
|
||||
[21, 1, "@integer(0, 10)"],
|
||||
[22, 1, "@integer(0, 10)"],
|
||||
[23, 1, "@integer(0, 10)"],
|
||||
[0, 2, 1],
|
||||
[1, 2, 1],
|
||||
[2, 2, "-"],
|
||||
[3, 2, "-"],
|
||||
[4, 2, "-"],
|
||||
[5, 2, "-"],
|
||||
[6, 2, "-"],
|
||||
[7, 2, "-"],
|
||||
[8, 2, "-"],
|
||||
[9, 2, "-"],
|
||||
[10, 2, "@integer(0, 10)"],
|
||||
[11, 2, "@integer(0, 10)"],
|
||||
[12, 2, "@integer(0, 10)"],
|
||||
[13, 2, "@integer(0, 10)"],
|
||||
[14, 2, "@integer(0, 10)"],
|
||||
[15, 2, "@integer(0, 10)"],
|
||||
[16, 2, "@integer(0, 10)"],
|
||||
[17, 2, "@integer(0, 10)"],
|
||||
[18, 2, "@integer(0, 10)"],
|
||||
[19, 2, "@integer(0, 10)"],
|
||||
[20, 2, "@integer(0, 10)"],
|
||||
[21, 2, "@integer(0, 10)"],
|
||||
[22, 2, "@integer(0, 10)"],
|
||||
[23, 2, "@integer(0, 10)"],
|
||||
[0, 3, 7],
|
||||
[1, 3, 3],
|
||||
[2, 3, "-"],
|
||||
[3, 3, "-"],
|
||||
[4, 3, "-"],
|
||||
[5, 3, "-"],
|
||||
[6, 3, "-"],
|
||||
[7, 3, "-"],
|
||||
[8, 3, 1],
|
||||
[9, 3, "-"],
|
||||
[10, 3, "@integer(0, 10)"],
|
||||
[11, 3, "@integer(0, 10)"],
|
||||
[12, 3, "@integer(0, 10)"],
|
||||
[13, 3, "@integer(0, 10)"],
|
||||
[14, 3, "@integer(0, 10)"],
|
||||
[15, 3, "@integer(0, 10)"],
|
||||
[16, 3, "@integer(0, 10)"],
|
||||
[17, 3, "@integer(0, 10)"],
|
||||
[18, 3, "@integer(0, 10)"],
|
||||
[19, 3, "@integer(0, 10)"],
|
||||
[20, 3, "@integer(0, 10)"],
|
||||
[21, 3, "@integer(0, 10)"],
|
||||
[22, 3, "@integer(0, 10)"],
|
||||
[23, 3, "@integer(0, 10)"],
|
||||
[0, 4, "@integer(0, 10)"],
|
||||
[1, 4, "@integer(0, 10)"],
|
||||
[2, 4, "-"],
|
||||
[3, 4, "-"],
|
||||
[4, 4, "-"],
|
||||
[5, 4, "@integer(0, 10)"],
|
||||
[6, 4, "-"],
|
||||
[7, 4, "-"],
|
||||
[8, 4, "-"],
|
||||
[9, 4, "@integer(0, 10)"],
|
||||
[10, 4, "@integer(0, 10)"],
|
||||
[11, 4, "@integer(0, 10)"],
|
||||
[12, 4, "@integer(0, 10)"],
|
||||
[13, 4, "@integer(0, 10)"],
|
||||
[14, 4, "@integer(0, 10)"],
|
||||
[15, 4, "@integer(0, 10)"],
|
||||
[16, 4, "@integer(0, 10)"],
|
||||
[17, 4, "@integer(0, 10)"],
|
||||
[18, 4, "@integer(0, 10)"],
|
||||
[19, 4, "@integer(0, 10)"],
|
||||
[20, 4, "@integer(0, 10)"],
|
||||
[21, 4, "@integer(0, 10)"],
|
||||
[22, 4, "@integer(0, 10)"],
|
||||
[23, 4, "-"],
|
||||
[0, 5, "@integer(0, 10)"],
|
||||
[1, 5, "@integer(0, 10)"],
|
||||
[2, 5, "-"],
|
||||
[3, 5, "@integer(0, 10)"],
|
||||
[4, 5, "-"],
|
||||
[5, 5, "-"],
|
||||
[6, 5, "-"],
|
||||
[7, 5, "-"],
|
||||
[8, 5, "@integer(0, 10)"],
|
||||
[9, 5, "-"],
|
||||
[10, 5, "@integer(0, 10)"],
|
||||
[11, 5, "@integer(0, 10)"],
|
||||
[12, 5, "@integer(0, 10)"],
|
||||
[13, 5, "@integer(0, 10)"],
|
||||
[14, 5, "@integer(0, 10)"],
|
||||
[15, 5, "@integer(0, 10)"],
|
||||
[16, 5, "@integer(0, 10)"],
|
||||
[17, 5, "@integer(0, 10)"],
|
||||
[18, 5, "-"],
|
||||
[19, 5, "@integer(0, 10)"],
|
||||
[20, 5, "@integer(0, 10)"],
|
||||
[21, 5, "@integer(0, 10)"],
|
||||
[22, 5, "@integer(0, 10)"],
|
||||
[23, 5, "-"],
|
||||
[0, 6, "@integer(0, 10)"],
|
||||
[1, 6, "-"],
|
||||
[2, 6, "-"],
|
||||
[3, 6, "-"],
|
||||
[4, 6, "-"],
|
||||
[5, 6, "-"],
|
||||
[6, 6, "-"],
|
||||
[7, 6, "-"],
|
||||
[8, 6, "-"],
|
||||
[9, 6, "-"],
|
||||
[10, 6, "@integer(0, 10)"],
|
||||
[11, 6, "-"],
|
||||
[12, 6, "@integer(0, 10)"],
|
||||
[13, 6, "@integer(0, 10)"],
|
||||
[14, 6, "@integer(0, 10)"],
|
||||
[15, 6, "@integer(0, 10)"],
|
||||
[16, 6, "-"],
|
||||
[17, 6, "-"],
|
||||
[18, 6, "-"],
|
||||
[19, 6, "-"],
|
||||
[20, 6, "@integer(0, 10)"],
|
||||
[21, 6, "@integer(0, 10)"],
|
||||
[22, 6, "@integer(0, 10)"],
|
||||
[23, 6, "@integer(0, 10)"]
|
||||
]
|
||||
}
|
||||
@ -12,6 +12,7 @@ export const imageUrl = '/mock/image'
|
||||
export const rankListUrl = '/mock/rankList'
|
||||
export const scrollBoardUrl = '/mock/scrollBoard'
|
||||
export const radarUrl = '/mock/radarData'
|
||||
export const heatMapUrl = '/mock/heatMapData'
|
||||
|
||||
const mockObject: MockMethod[] = [
|
||||
{
|
||||
@ -61,6 +62,11 @@ const mockObject: MockMethod[] = [
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchRadar
|
||||
},
|
||||
{
|
||||
url: heatMapUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchHeatmap
|
||||
}
|
||||
]
|
||||
|
||||
export default mockObject
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import heatmapJson from './heatMapData.json'
|
||||
|
||||
export default {
|
||||
// 单图表
|
||||
fetchMockSingleData: {
|
||||
@ -181,5 +183,12 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 热力图
|
||||
fetchHeatmap: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: heatmapJson
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { ref, watch, computed, PropType } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { HeatmapChart } from 'echarts/charts'
|
||||
@ -14,7 +15,13 @@ import { useChartDataFetch } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
VisualMapComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -31,12 +38,51 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, HeatmapChart, GridComponent, TooltipComponent, LegendComponent, VisualMapComponent])
|
||||
use([
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
HeatmapChart,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
VisualMapComponent
|
||||
])
|
||||
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
|
||||
</script>
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
const { seriesData, xAxis, yAxis } = dataset
|
||||
if (xAxis) {
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.xAxis.data = xAxis
|
||||
}
|
||||
if (yAxis) {
|
||||
// @ts-ignore
|
||||
props.chartConfig.option.yAxis.data = yAxis
|
||||
}
|
||||
if (seriesData) {
|
||||
props.chartConfig.option.series[0].data = seriesData
|
||||
}
|
||||
if (vChartRef.value && isPreview()) {
|
||||
vChartRef.value.setOption(props.chartConfig.option)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, PropType, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import dataJson from './data.json'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { RadarChart } from 'echarts/charts'
|
||||
@ -39,7 +40,7 @@ const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataSetHandle = (dataset: any) => {
|
||||
const dataSetHandle = (dataset: typeof dataJson) => {
|
||||
if (dataset.seriesData) {
|
||||
props.chartConfig.option.series[0].data = dataset.seriesData
|
||||
// @ts-ignore
|
||||
@ -63,7 +64,7 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -71,7 +71,8 @@ import {
|
||||
numberIntUrl,
|
||||
textUrl,
|
||||
imageUrl,
|
||||
radarUrl
|
||||
radarUrl,
|
||||
heatMapUrl
|
||||
} from '@/api/mock'
|
||||
|
||||
const { HelpOutlineIcon } = icon.ionicons5
|
||||
@ -106,6 +107,9 @@ const apiList = [
|
||||
},
|
||||
{
|
||||
value: `【雷达】${radarUrl}`
|
||||
},
|
||||
{
|
||||
value: `【热力图】${heatMapUrl}`
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user