mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
Merge branch 'dev' into master-fetch-dev
This commit is contained in:
commit
1c43272719
@ -4,9 +4,30 @@
|
|||||||
<CollapseItem
|
<CollapseItem
|
||||||
v-for="(item, index) in seriesList"
|
v-for="(item, index) in seriesList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
|
:name="`系列${index + 1}`"
|
||||||
:expanded="true"
|
:expanded="true"
|
||||||
>
|
>
|
||||||
|
<template #header>
|
||||||
|
<n-text class="go-fs-13" depth="3">
|
||||||
|
{{ item.type == 'bar' ? '「柱状图」' : '「折线图」' }}
|
||||||
|
</n-text>
|
||||||
|
</template>
|
||||||
|
<SettingItemBox name="类型">
|
||||||
|
<SettingItem name="宽度">
|
||||||
|
<n-select
|
||||||
|
:value="item.type"
|
||||||
|
size="small"
|
||||||
|
:options="[
|
||||||
|
{ label: '柱状图', value: 'bar' },
|
||||||
|
{ label: '折线图', value: 'line' }
|
||||||
|
]"
|
||||||
|
@update:value="(value: any) => {
|
||||||
|
updateHandle(item, value)
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</SettingItem>
|
||||||
|
|
||||||
|
</SettingItemBox>
|
||||||
<SettingItemBox name="图形" v-if="item.type == 'bar'">
|
<SettingItemBox name="图形" v-if="item.type == 'bar'">
|
||||||
<SettingItem name="宽度">
|
<SettingItem name="宽度">
|
||||||
<n-input-number
|
<n-input-number
|
||||||
@ -34,6 +55,12 @@
|
|||||||
<SettingItem name="类型">
|
<SettingItem name="类型">
|
||||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="item.smooth" size="small" />
|
||||||
|
<n-text>曲线</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
||||||
<SettingItem name="大小">
|
<SettingItem name="大小">
|
||||||
@ -63,10 +90,10 @@
|
|||||||
<n-select
|
<n-select
|
||||||
v-model:value="item.label.position"
|
v-model:value="item.label.position"
|
||||||
:options="[
|
:options="[
|
||||||
{ label: 'top', value: 'top' },
|
{ label: '顶部', value: 'top' },
|
||||||
{ label: 'left', value: 'left' },
|
{ label: '左侧', value: 'left' },
|
||||||
{ label: 'right', value: 'right' },
|
{ label: '右侧', value: 'right' },
|
||||||
{ label: 'bottom', value: 'bottom' }
|
{ label: '底部', value: 'bottom' }
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
@ -75,10 +102,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, computed } from 'vue'
|
import { PropType, computed, toRaw } from 'vue'
|
||||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
import { merge, cloneDeep } from 'lodash';
|
||||||
|
|
||||||
|
import GlobalSetting from '@/components/Pages/ChartItemSetting/GlobalSetting.vue'
|
||||||
|
import CollapseItem from '@/components/Pages/ChartItemSetting/CollapseItem.vue'
|
||||||
|
import SettingItemBox from '@/components/Pages/ChartItemSetting/SettingItemBox.vue'
|
||||||
|
import SettingItem from '@/components/Pages/ChartItemSetting/SettingItem.vue'
|
||||||
|
|
||||||
import { lineConf } from '@/packages/chartConfiguration/echarts'
|
import { lineConf } from '@/packages/chartConfiguration/echarts'
|
||||||
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
import { GlobalThemeJsonType } from '@/settings/chartThemes'
|
||||||
|
import { barSeriesItem, lineSeriesItem } from './config'
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
optionData: {
|
optionData: {
|
||||||
@ -90,4 +125,14 @@ const props = defineProps({
|
|||||||
const seriesList = computed(() => {
|
const seriesList = computed(() => {
|
||||||
return props.optionData.series
|
return props.optionData.series
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const updateHandle = (item:any, value:string) => {
|
||||||
|
const _label = cloneDeep(toRaw(item.label))
|
||||||
|
lineSeriesItem.label = _label
|
||||||
|
if (value === 'line') {
|
||||||
|
merge(item, lineSeriesItem)
|
||||||
|
} else {
|
||||||
|
merge(item, barSeriesItem)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -12,6 +12,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
||||||
import VChart from 'vue-echarts'
|
import VChart from 'vue-echarts'
|
||||||
|
import { isObject, cloneDeep } from 'lodash'
|
||||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||||
import { use } from 'echarts/core'
|
import { use } from 'echarts/core'
|
||||||
import { CanvasRenderer } from 'echarts/renderers'
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
@ -51,18 +52,36 @@ const option = computed(() => {
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.chartConfig.option.dataset,
|
() => props.chartConfig.option.dataset,
|
||||||
(newData, oldData) => {
|
(newData: any, oldData) => {
|
||||||
if (newData.dimensions.length !== oldData.dimensions.length) {
|
try {
|
||||||
const seriesArr = []
|
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
if (Array.isArray((newData as any)?.dimensions)) {
|
||||||
seriesArr.push(barSeriesItem, lineSeriesItem)
|
const seriesArr: typeof barSeriesItem[] = []
|
||||||
|
// 对oldData进行判断,防止传入错误数据之后对旧维度判断产生干扰
|
||||||
|
// 此处计算的是dimensions的Y轴维度,若是dimensions.length为0或1,则默认为1,排除X轴维度干扰
|
||||||
|
const oldDimensions =
|
||||||
|
Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
|
||||||
|
const newDimensions = (newData as any).dimensions.length >= 1 ? (newData as any).dimensions.length : 1
|
||||||
|
const dimensionsGap = newDimensions - oldDimensions
|
||||||
|
if (dimensionsGap < 0) {
|
||||||
|
props.chartConfig.option.series.splice(newDimensions - 1)
|
||||||
|
} else if (dimensionsGap > 0) {
|
||||||
|
if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
|
||||||
|
props.chartConfig.option.series = []
|
||||||
|
}
|
||||||
|
for (let i = 0; i < dimensionsGap; i++) {
|
||||||
|
seriesArr.push(cloneDeep(barSeriesItem))
|
||||||
|
}
|
||||||
|
props.chartConfig.option.series.push(...seriesArr)
|
||||||
}
|
}
|
||||||
replaceMergeArr.value = ['series']
|
replaceMergeArr.value = ['series']
|
||||||
props.chartConfig.option.series = seriesArr
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
replaceMergeArr.value = []
|
replaceMergeArr.value = []
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
deep: false
|
deep: false
|
||||||
|
@ -47,10 +47,9 @@ export const option = {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
showDelay: 0,
|
showDelay: 0,
|
||||||
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
||||||
// console.log(params)
|
|
||||||
return params.value.length > 1
|
return params.value.length > 1
|
||||||
? `${params.seriesName}:<br />${params.value[0]} ${params.value[1]}`
|
? `${params.seriesName}:<br />${params.value[0]} ${params.value[1]}`
|
||||||
: `${params.seriesName}:<br />${params.name} ${params.value}`
|
: `${params.name} ${params.value}`
|
||||||
},
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
show: true,
|
show: true,
|
||||||
|
@ -24,8 +24,8 @@ export function isArray(p: any): p is [] {
|
|||||||
return Array.isArray(p)
|
return Array.isArray(p)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const toNumber = (number: number | string, toFixedNumber = 2) => {
|
export const toNumber = (number: number | string, toFixedNumber: number = 2) => {
|
||||||
return isString(number) ? parseFloat(parseFloat(number).toFixed(2)) : number
|
return isString(number) ? parseFloat(parseFloat(number).toFixed(toFixedNumber)) : number
|
||||||
}
|
}
|
||||||
|
|
||||||
export const toString = (str: any) => {
|
export const toString = (str: any) => {
|
||||||
|
@ -302,7 +302,11 @@ export const useMouseHandle = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
chartEditStore.moveComponentList(prevComponentInstance)
|
|
||||||
|
const moveComponentInstance = prevComponentInstance.filter(
|
||||||
|
item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
|
||||||
|
)
|
||||||
|
moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
|
||||||
}
|
}
|
||||||
document.removeEventListener('mousemove', mousemove)
|
document.removeEventListener('mousemove', mousemove)
|
||||||
document.removeEventListener('mouseup', mouseup)
|
document.removeEventListener('mouseup', mouseup)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user