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

fix: 柱状图 折线图 饼图等通用组件增加总配置 配置所有系列 修复tooltip超出页面

Browse Source
This commit is contained in:
huanghao1412 2024-01-31 15:44:52 +08:00
parent f7aff43723
commit 9e2499e271
23 changed files with 590 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Pages/ChartItemSetting/SettingItemBox.vue
View File

@ -38,7 +38,7 @@ defineProps({
</script>
<style lang="scss" scoped>
$leftWidth: 90px;
$leftWidth: 60px;
@include go('config-item-box') {
position: relative;
display: flex;

77
src/packages/components/Charts/Bars/BarCommon/config.vue
View File

@ -1,6 +1,50 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="总配置" :expanded="true">
<SettingItemBox name="" :alone="true">
<n-text>修改此配置将覆盖全部系列配置</n-text>
</SettingItemBox>
<SettingItemBox name="图形">
<SettingItem name="宽度">
<n-input-number
v-model:value="allSeriesConfig.barWidth"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="圆角">
<n-input-number v-model:value="allSeriesConfig.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.label.show" size="small" />
<n-text>展示标签</n-text>
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number v-model:value="allSeriesConfig.label.fontSize" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="allSeriesConfig.label.color"></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="allSeriesConfig.label.position"
:options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="宽度">
@ -45,9 +89,12 @@
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { PropType, computed, ref, watch } from 'vue'
import type { Ref } from 'vue'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { seriesItem } from "./config";
import { cloneDeep } from "lodash";
const props = defineProps({
optionData: {
@ -59,4 +106,32 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
watch(() => allSeriesConfig.value, (v) => {
seriesList.value.forEach((item: typeof seriesItem) => {
Object.assign(item, cloneDeep(v))
})
}, {
deep: true,
immediate: true
})
watch(() => seriesList.value, (v) => {
const isSame = v.every((_: typeof seriesItem) => {
let flag = true
let k: keyof typeof seriesItem
for(k in _) {
if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
}
return flag
})
if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
}
}, {
deep: true,
immediate: true
})
</script>

4
src/packages/components/Charts/Bars/BarCommon/index.vue
View File

@ -17,7 +17,7 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartDataFetch, useChartCommonData } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {isPreview, setTooltipPosition} from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
import cloneDeep from 'lodash/cloneDeep'
@ -37,6 +37,8 @@ const props = defineProps({
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])

89
src/packages/components/Charts/Bars/BarCrossrange/config.vue
View File

@ -1,6 +1,62 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="总配置" :expanded="true">
<SettingItemBox name="" :alone="true">
<n-text>修改此配置将覆盖全部系列配置</n-text>
</SettingItemBox>
<SettingItemBox name="图形">
<SettingItem name="宽度">
<n-input-number
v-model:value="allSeriesConfig.barWidth"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="圆角">
<n-input-number
v-model:value="allSeriesConfig.itemStyle.borderRadius"
:min="0"
size="small"
></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.label.show" size="small" />
<n-text>展示标签</n-text>
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number
v-model:value="allSeriesConfig.label.fontSize"
size="small"
:min="1"
></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="allSeriesConfig.label.color"
></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="allSeriesConfig.label.position"
:options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="宽度">
@ -57,10 +113,13 @@
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { PropType, computed, ref, watch } from 'vue'
import type { Ref } from 'vue'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { seriesItem } from "./config"
import { cloneDeep } from "lodash"
const props = defineProps({
optionData: {
@ -72,4 +131,32 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
watch(() => allSeriesConfig.value, (v) => {
seriesList.value.forEach((item: typeof seriesItem) => {
Object.assign(item, cloneDeep(v))
})
}, {
deep: true,
immediate: true
})
watch(() => seriesList.value, (v) => {
const isSame = v.every((_: typeof seriesItem) => {
let flag = true
let k: keyof typeof seriesItem
for(k in _) {
if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
}
return flag
})
if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
}
}, {
deep: true,
immediate: true
})
</script>

4
src/packages/components/Charts/Bars/BarCrossrange/index.vue
View File

@ -23,7 +23,7 @@ import { mergeTheme } from '@/packages/public/chart'
import config, { includes, seriesItem } from './config'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {isPreview, setTooltipPosition} from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
import cloneDeep from 'lodash/cloneDeep'
@ -43,6 +43,8 @@ const props = defineProps({
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])

3
src/packages/components/Charts/Lines/LineCommon/config.ts
View File

@ -13,7 +13,8 @@ export const seriesItem = {
color: '#fff',
fontSize: 12
},
symbolSize: 5, //设定实心点的大小
symbolSize: 0, //设定实心点的大小
smooth: true,
itemStyle: {
color: null,
borderRadius: 0

102
src/packages/components/Charts/Lines/LineCommon/config.vue
View File

@ -1,8 +1,75 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="总配置" :expanded="true">
<SettingItemBox name="" :alone="true">
<n-text>修改此配置将覆盖全部折线配置</n-text>
</SettingItemBox>
<SettingItemBox name="线条">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.smooth" size="small" />
<n-text>平滑曲线</n-text>
</n-space>
</setting-item>
<SettingItem name="宽度">
<n-input-number
v-model:value="allSeriesConfig.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select v-model:value="allSeriesConfig.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="实心点">
<SettingItem name="大小">
<n-input-number
v-model:value="allSeriesConfig.symbolSize"
:min="0"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.label.show" size="small" />
<n-text>展示标签</n-text>
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number v-model:value="allSeriesConfig.label.fontSize" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="allSeriesConfig.label.color"></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="allSeriesConfig.label.position"
:options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
<SettingItemBox name="线条">
<setting-item>
<n-space>
<n-switch v-model:value="item.smooth" size="small" />
<n-text>平滑曲线</n-text>
</n-space>
</setting-item>
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
@ -20,7 +87,7 @@
<SettingItem name="大小">
<n-input-number
v-model:value="item.symbolSize"
:min="1"
:min="0"
:max="100"
size="small"
placeholder="自动计算"
@ -56,10 +123,13 @@
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { PropType, computed, ref, watch } from 'vue'
import type { Ref } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { seriesItem } from './config'
import { cloneDeep } from 'lodash'
const props = defineProps({
optionData: {
@ -71,4 +141,32 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
watch(() => allSeriesConfig.value, (v) => {
seriesList.value.forEach((item: typeof seriesItem) => {
Object.assign(item, cloneDeep(v))
})
}, {
deep: true,
immediate: true
})
watch(() => seriesList.value, (v) => {
const isSame = v.every((_: typeof seriesItem) => {
let flag = true
let k: keyof typeof seriesItem
for(k in _) {
if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
}
return flag
})
if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
}
}, {
deep: true,
immediate: true
})
</script>

4
src/packages/components/Charts/Lines/LineCommon/index.vue
View File

@ -24,7 +24,7 @@ import config, { includes, seriesItem } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { isPreview } from '@/utils'
import { isPreview, setTooltipPosition } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
@ -43,6 +43,8 @@ const props = defineProps({
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

60
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
View File

@ -8,6 +8,35 @@ import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'line',
smooth: true,
symbolSize: 0, //设定实心点的大小
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
},
lineStyle: {
type: 'solid',
width: 3
},
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColorsSearch[defaultTheme][3]
},
{
offset: 1,
color: 'rgba(0,0,0,0)'
}
])
}
}
const options = {
tooltip: {
show: true,
@ -25,36 +54,7 @@ const options = {
type: 'value'
},
dataset: { ...dataJson },
series: [
{
type: 'line',
smooth: false,
symbolSize: 5, //设定实心点的大小
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 12
},
lineStyle: {
type: 'solid',
width: 3
},
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColorsSearch[defaultTheme][3]
},
{
offset: 1,
color: 'rgba(0,0,0,0)'
}
])
}
}
]
series: [seriesItem]
}
export default class Config extends PublicConfigClass implements CreateComponentType {

102
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
View File

@ -1,8 +1,75 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="总配置" :expanded="true">
<SettingItemBox name="" :alone="true">
<n-text>修改此配置将覆盖全部折线配置</n-text>
</SettingItemBox>
<SettingItemBox name="线条">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.smooth" size="small" />
<n-text>平滑曲线</n-text>
</n-space>
</setting-item>
<SettingItem name="宽度">
<n-input-number
v-model:value="allSeriesConfig.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select v-model:value="allSeriesConfig.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="实心点">
<SettingItem name="大小">
<n-input-number
v-model:value="allSeriesConfig.symbolSize"
:min="0"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.label.show" size="small" />
<n-text>展示标签</n-text>
</n-space>
</setting-item>
<setting-item name="大小">
<n-input-number v-model:value="allSeriesConfig.label.fontSize" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="allSeriesConfig.label.color"></n-color-picker>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="allSeriesConfig.label.position"
:options="[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线面积图-${index + 1}`" :expanded="true">
<SettingItemBox name="线条">
<setting-item>
<n-space>
<n-switch v-model:value="item.smooth" size="small" />
<n-text>平滑曲线</n-text>
</n-space>
</setting-item>
<SettingItem name="宽度">
<n-input-number
v-model:value="item.lineStyle.width"
@ -20,7 +87,7 @@
<SettingItem name="大小">
<n-input-number
v-model:value="item.symbolSize"
:min="1"
:min="0"
:max="100"
size="small"
placeholder="自动计算"
@ -56,10 +123,13 @@
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { PropType, computed, ref, watch } from 'vue'
import type { Ref } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { seriesItem } from "./config";
import { cloneDeep } from "lodash";
const props = defineProps({
optionData: {
@ -71,4 +141,32 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
watch(() => allSeriesConfig.value, (v) => {
seriesList.value.forEach((item: typeof seriesItem) => {
Object.assign(item, cloneDeep(v))
})
}, {
deep: true,
immediate: true
})
watch(() => seriesList.value, (v) => {
const isSame = v.every((_: typeof seriesItem) => {
let flag = true
let k: keyof typeof seriesItem
for(k in _) {
if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
}
return flag
})
if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
}
}, {
deep: true,
immediate: true
})
</script>

4
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
View File

@ -16,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { isPreview, colorGradientCustomMerge} from '@/utils'
import {isPreview, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
const props = defineProps({
themeSetting: {
@ -33,6 +33,8 @@ const props = defineProps({
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

63
src/packages/components/Charts/Lines/LineLinearSingle/config.ts
View File

@ -7,6 +7,37 @@ import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'line',
symbolSize: 0, //设定实心点的大小
smooth: true,
lineStyle: {
type: 'solid',
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
},
{
offset: 1,
color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: chartColorsSearch[defaultTheme][2],
shadowBlur: 10,
shadowOffsetY: 20
}
}
export const option = {
tooltip: {
show: true,
@ -24,37 +55,7 @@ export const option = {
type: 'value'
},
dataset: { ...dataJson },
series: [
{
type: 'line',
symbolSize: 5, //设定实心点的大小
lineStyle: {
type: 'solid',
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
},
{
offset: 1,
color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: chartColorsSearch[defaultTheme][2],
shadowBlur: 10,
shadowOffsetY: 20
}
}
]
series: [seriesItem]
}
export default class Config extends PublicConfigClass implements CreateComponentType {

115
src/packages/components/Charts/Lines/LineLinearSingle/config.vue
View File

@ -1,6 +1,80 @@
<template>
<!-- Echarts 全局设置 -->
<global-setting :optionData="optionData"></global-setting>
<CollapseItem name="总配置" :expanded="true">
<SettingItemBox name="" :alone="true">
<n-text>修改此配置将覆盖全部折线配置</n-text>
</SettingItemBox>
<SettingItemBox name="线条">
<setting-item>
<n-space>
<n-switch v-model:value="allSeriesConfig.smooth" size="small" />
<n-text>平滑曲线</n-text>
</n-space>
</setting-item>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="allSeriesConfig.lineStyle.color.colorStops[0].color"
></n-color-picker>
</SettingItem>
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="allSeriesConfig.lineStyle.color.colorStops[1].color"
></n-color-picker>
</SettingItem>
<SettingItem name="宽度">
<n-input-number
v-model:value="allSeriesConfig.lineStyle.width"
:min="1"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
<SettingItem name="类型">
<n-select
v-model:value="allSeriesConfig.lineStyle.type"
size="small"
:options="lineConf.lineStyle.type"
></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="实心点">
<SettingItem name="大小">
<n-input-number
v-model:value="allSeriesConfig.symbolSize"
:min="0"
:max="100"
size="small"
placeholder="自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="阴影" :alone="true">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="allSeriesConfig.lineStyle.shadowColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="设置">
<SettingItem name="阴影">
<n-button
size="small"
@click="allSeriesConfig.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
>
去除阴影
</n-button>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
@ -8,6 +82,12 @@
:expanded="true"
>
<SettingItemBox name="线条">
<setting-item>
<n-space>
<n-switch v-model:value="item.smooth" size="small" />
<n-text>平滑曲线</n-text>
</n-space>
</setting-item>
<SettingItem name="颜色">
<n-color-picker
size="small"
@ -43,7 +123,7 @@
<SettingItem name="大小">
<n-input-number
v-model:value="item.symbolSize"
:min="1"
:min="0"
:max="100"
size="small"
placeholder="自动计算"
@ -74,7 +154,8 @@
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { PropType, computed, ref, watch } from 'vue'
import type { Ref } from 'vue'
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import {
@ -83,6 +164,8 @@ import {
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
import { seriesItem } from "./config";
import { cloneDeep } from "lodash";
const props = defineProps({
optionData: {
@ -94,4 +177,32 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
watch(() => allSeriesConfig.value, (v) => {
seriesList.value.forEach((item: typeof seriesItem) => {
Object.assign(item, cloneDeep(v))
})
}, {
deep: true,
immediate: true
})
watch(() => seriesList.value, (v) => {
const isSame = v.every((_: typeof seriesItem) => {
let flag = true
let k: keyof typeof seriesItem
for(k in _) {
if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
}
return flag
})
if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
}
}, {
deep: true,
immediate: true
})
</script>

4
src/packages/components/Charts/Lines/LineLinearSingle/index.vue
View File

@ -16,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { isPreview, colorGradientCustomMerge } from '@/utils'
import {isPreview, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
const props = defineProps({
themeSetting: {
@ -33,6 +33,8 @@ const props = defineProps({
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

2
src/packages/components/Charts/Mores/WaterPolo/index.vue
View File

@ -11,7 +11,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
import { CanvasRenderer } from 'echarts/renderers'
import { GridComponent } from 'echarts/components'
import config from './config'
import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
import {isPreview, isString, isNumber, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartCommonData } from '@/hooks'

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

@ -15,6 +15,7 @@ import { useChartCommonData, useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
import {setTooltipPosition} from "@/utils";
const props = defineProps({
@ -32,6 +33,8 @@ const props = defineProps({
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])

5
src/packages/components/Charts/Pies/PieCommon/index.vue
View File

@ -22,7 +22,7 @@ import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {isPreview, setTooltipPosition} from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import dataJson from './data.json'
@ -40,6 +40,9 @@ const props = defineProps({
required: true
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
let seriesDataNum = -1
let seriesDataMaxLength = 0

5
src/packages/components/Charts/Pies/PieCommon1/index.vue
View File

@ -22,7 +22,7 @@ import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {isPreview, setTooltipPosition} from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import dataJson from './data.json'
@ -40,6 +40,9 @@ const props = defineProps({
required: true
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
let seriesDataNum = -1
let seriesDataMaxLength = 0

5
src/packages/components/Charts/Pies/PieCommon2/index.vue
View File

@ -22,7 +22,7 @@ import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import {useChartCommonData, useChartDataFetch} from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import {isPreview, setTooltipPosition} from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import dataJson from './data.json'
@ -40,6 +40,9 @@ const props = defineProps({
required: true
}
})
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
let seriesDataNum = -1
let seriesDataMaxLength = 0

7
src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue
View File

@ -21,7 +21,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { publicInterface } from '@/api/path/business.api'
import BorderBox from '../components/BorderBox.vue'
import VChart from 'vue-echarts'
import {isPreview} from '@/utils'
import {isPreview, setTooltipPosition} from '@/utils'
import {graphic} from "echarts";
import moment from "moment"
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
@ -40,7 +40,7 @@ const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
const getStyle = (radius: number) => {
return {
borderRadius: `${radius}px`,
overflow: 'hidden'
overflow: 'visible'
}
}
@ -136,7 +136,8 @@ const option = reactive({
},
tooltip: {
trigger: 'axis',
formatter: null as null | string
formatter: null as null | string,
position: setTooltipPosition(props.chartConfig.attr)
},
dataZoom: [
{

2
src/packages/components/CustomComponents/CustomComponents/components/BorderBox.vue
View File

@ -46,7 +46,7 @@ const { title } = toRefs(props)
.content{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
overflow: visible;
height: calc(100% - 40px);
box-sizing: border-box;
display: flex;

11
src/utils/echarts.ts Normal file
View File

@ -0,0 +1,11 @@
// 设置position 判断超出页面时进行补偿
// x,y 组件的相对画布的偏移量 也就是attr.x attr.y
export const setTooltipPosition = (attr: { x: number, y: number }) => {
const { x, y } = attr
return (point: number[], params:unknown, dom:unknown, rect:unknown, size: { contentSize: number[] }) => {
return [
x + point[0] - size.contentSize[0] > 0 ? point[0] - size.contentSize[0] : point[0],
y + point[1] - size.contentSize[1] > 0 ? point[1] - size.contentSize[1] : point[1]
]
}
}

1
src/utils/index.ts
View File

@ -9,3 +9,4 @@ export * from '@/utils/type'
export * from '@/utils/file'
export * from '@/utils/http'
export * from '@/utils/aboutHtml2Canvas'
export * from '@/utils/echarts'