diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 0138d1b7..ed82edf5 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' +import { setOption } from '@/packages/public/chart' // 获取类型 type ChartEditStoreType = typeof useChartEditStore @@ -34,7 +35,7 @@ export const useChartDataFetch = ( const echartsUpdateHandle = (dataset: any) => { if (chartFrame === ChartFrameEnum.ECHARTS) { if (vChartRef.value) { - vChartRef.value.setOption({ dataset: dataset }) + setOption(vChartRef.value, { dataset: dataset }) } } } diff --git a/src/main.ts b/src/main.ts index cf9b86df..d85d46cb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,7 @@ import App from './App.vue' import router, { setupRouter } from '@/router' import i18n from '@/i18n/index' import { setupStore } from '@/store' -import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins' +import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins' import { GoAppProvider } from '@/components/GoAppProvider/index' import { setHtmlTheme } from '@/utils' @@ -53,4 +53,6 @@ async function appInit() { window['$vue'] = app } -void appInit() +await appInit() + +await initFunction() diff --git a/src/packages/components/Charts/Bars/CapsuleChart/index.vue b/src/packages/components/Charts/Bars/CapsuleChart/index.vue index 804ae0dc..73a6ae0d 100644 --- a/src/packages/components/Charts/Bars/CapsuleChart/index.vue +++ b/src/packages/components/Charts/Bars/CapsuleChart/index.vue @@ -122,23 +122,28 @@ const calcData = (data: any, type?: string) => { // 数据解析 const calcCapsuleLengthAndLabelData = (dataset: any) => { - const { source } = dataset - if (!source.length) return + try { + const { source } = dataset + if (!source || !source.length) return - state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight) - const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]]) + state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight) + const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]]) - const maxValue = Math.max(...capsuleValue) + const maxValue = Math.max(...capsuleValue) - state.capsuleValue = capsuleValue + state.capsuleValue = capsuleValue - state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0)) + state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0)) - const oneFifth = maxValue / 5 + const oneFifth = maxValue / 5 - const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))) + const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))) - state.labelData = labelData + state.labelData = labelData + + } catch (error) { + console.warn(error); + } } const numberSizeHandle = (val: string | number) => { diff --git a/src/packages/components/Charts/Maps/MapBase/index.vue b/src/packages/components/Charts/Maps/MapBase/index.vue index f927e64a..7a66753d 100644 --- a/src/packages/components/Charts/Maps/MapBase/index.vue +++ b/src/packages/components/Charts/Maps/MapBase/index.vue @@ -11,7 +11,7 @@ import { use, registerMap } from 'echarts/core' import { EffectScatterChart, MapChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import { useChartDataFetch } from '@/hooks' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' @@ -76,7 +76,7 @@ registerMapInitAsync() // 手动触发渲染 const vEchartsSetOption = () => { option.value = props.chartConfig.option - vChartRef.value?.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } // 更新数据处理 diff --git a/src/packages/components/Charts/Mores/Heatmap/index.vue b/src/packages/components/Charts/Mores/Heatmap/index.vue index 45cb810c..3dcd91aa 100644 --- a/src/packages/components/Charts/Mores/Heatmap/index.vue +++ b/src/packages/components/Charts/Mores/Heatmap/index.vue @@ -10,7 +10,7 @@ import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { HeatmapChart } from 'echarts/charts' import { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -68,7 +68,7 @@ const dataSetHandle = (dataset: typeof dataJson) => { props.chartConfig.option.series[0].data = seriesData } if (vChartRef.value && isPreview()) { - vChartRef.value.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } } diff --git a/src/packages/components/Charts/Mores/Radar/index.vue b/src/packages/components/Charts/Mores/Radar/index.vue index 2e523267..8dad3571 100644 --- a/src/packages/components/Charts/Mores/Radar/index.vue +++ b/src/packages/components/Charts/Mores/Radar/index.vue @@ -10,7 +10,7 @@ import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { RadarChart } from 'echarts/charts' import { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -50,7 +50,7 @@ const dataSetHandle = (dataset: typeof dataJson) => { props.chartConfig.option.radar.indicator = dataset.radarIndicator } if (vChartRef.value && isPreview()) { - vChartRef.value.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } } diff --git a/src/packages/components/Charts/Mores/TreeMap/index.vue b/src/packages/components/Charts/Mores/TreeMap/index.vue index 7964f174..37eb4fb1 100644 --- a/src/packages/components/Charts/Mores/TreeMap/index.vue +++ b/src/packages/components/Charts/Mores/TreeMap/index.vue @@ -10,7 +10,7 @@ import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { TreemapChart } from 'echarts/charts' import { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -42,7 +42,7 @@ const option = computed(() => { const dataSetHandle = (dataset: typeof dataJson) => { if (dataset) { props.chartConfig.option.series[0].data = dataset - vChartRef.value?.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } } diff --git a/src/packages/components/Informations/Mores/Iframe/config.ts b/src/packages/components/Informations/Mores/Iframe/config.ts index 2e96c211..a9cf94c6 100644 --- a/src/packages/components/Informations/Mores/Iframe/config.ts +++ b/src/packages/components/Informations/Mores/Iframe/config.ts @@ -14,7 +14,7 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key = IframeConfig.key - public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 } + public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 } public chartConfig = cloneDeep(IframeConfig) public option = cloneDeep(option) } diff --git a/src/packages/components/Informations/Mores/WordCloud/index.vue b/src/packages/components/Informations/Mores/WordCloud/index.vue index 4c9626e3..a5c8a592 100644 --- a/src/packages/components/Informations/Mores/WordCloud/index.vue +++ b/src/packages/components/Informations/Mores/WordCloud/index.vue @@ -16,7 +16,7 @@ import 'echarts-wordcloud' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import config, { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' @@ -49,7 +49,7 @@ const option = computed(() => { const dataSetHandle = (dataset: typeof dataJson) => { try { dataset && (props.chartConfig.option.series[0].data = dataset) - vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option) + vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option) } catch (error) { console.log(error) } diff --git a/src/packages/components/Informations/Texts/TextBarrage/config.ts b/src/packages/components/Informations/Texts/TextBarrage/config.ts index eb04f096..aefc4331 100644 --- a/src/packages/components/Informations/Texts/TextBarrage/config.ts +++ b/src/packages/components/Informations/Texts/TextBarrage/config.ts @@ -15,7 +15,6 @@ export const FontWeightObject = { } export const option = { - dataset: '让数字化看得见', fontSize: 32, fontColor: '#ffffff', @@ -39,4 +38,5 @@ export default class Config extends PublicConfigClass implements CreateComponent public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 } public chartConfig = cloneDeep(TextBarrageConfig) public option = cloneDeep(option) + public preview = { overFlowHidden: true } } diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue index 834cfb5b..1aec6363 100644 --- a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue +++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue @@ -40,6 +40,15 @@ + + + diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index e1f626b3..d8ef0bdd 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -114,6 +114,10 @@ export interface PublicConfigType { // 动画 animations: string[] } + preview?: { + // 预览超出隐藏 + overFlowHidden?: boolean + } filter?: string status: StatusType events: { diff --git a/src/packages/public/chart.ts b/src/packages/public/chart.ts index d36a850e..5ed7785e 100644 --- a/src/packages/public/chart.ts +++ b/src/packages/public/chart.ts @@ -2,6 +2,7 @@ import merge from 'lodash/merge' import pick from 'lodash/pick' import { EchartsDataType } from '../index.d' import { globalThemeJson } from '@/settings/chartThemes/index' +import type VChart from 'vue-echarts' /** * * 合并 color 和全局配置项 @@ -33,3 +34,15 @@ export const setData = (option: any, data: EchartsDataType) => { option.dataset = data return option } + +/** + * * 配置公共 setOption 方法 + * @param instance + * @param data + */ +export const setOption = (instance: T, data: D) => { + if (!instance) return + const option = instance.getOption() + option.dataset = null + instance.setOption(data) +} diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index c4288638..10b3a10b 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -78,6 +78,10 @@ export class PublicConfigClass implements PublicConfigType { // 动画 animations: [] } + // 预览 + public preview = { + overFlowHidden: false + } // 状态 public status = { lock: false, diff --git a/src/plugins/index.ts b/src/plugins/index.ts index c500f63a..d1ac07ba 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -2,3 +2,4 @@ export { setupNaive } from '@/plugins/naive' export { setupDirectives } from '@/plugins/directives' export { setupCustomComponents } from '@/plugins/customComponents' export { icon } from '@/plugins/icon' +export { initFunction } from '@/plugins/initFunction' diff --git a/src/plugins/initFunction.ts b/src/plugins/initFunction.ts new file mode 100644 index 00000000..1df1db45 --- /dev/null +++ b/src/plugins/initFunction.ts @@ -0,0 +1,9 @@ +/** + * * 页面初始化就执行的函数 + */ +export const initFunction = async () => { + // 捕获全局错误 + window.addEventListener("unhandledrejection", event => { + console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); + }); +} \ No newline at end of file diff --git a/src/utils/storage.ts b/src/utils/storage.ts index 1827dfa2..e72c3f4a 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -44,7 +44,7 @@ export const clearLocalStorage = (name: string) => { */ export const setSessionStorage = (k: string, v: T) => { try { - window.sessionStorage.setItem(k, JSON.stringify(v)) + window.sessionStorage.setItem(k, JSONStringify(v)) } catch (error) { return false } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue index a0078f15..205f3328 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -150,7 +150,7 @@ const filterRes = computed(() => { } catch (error) { // eslint-disable-next-line vue/no-side-effects-in-computed-properties errorFlag.value = true - return '过滤函数错误' + return `过滤函数错误，日志：${error}` } }) diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue index 89c60d95..856ddea2 100644 --- a/src/views/chart/index.vue +++ b/src/views/chart/index.vue @@ -14,8 +14,10 @@ - - +
+ + +
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue index e6e22d92..354fa29c 100644 --- a/src/views/preview/components/PreviewRenderGroup/index.vue +++ b/src/views/preview/components/PreviewRenderGroup/index.vue @@ -9,6 +9,7 @@ ...getFilterStyle(item.styles), ...getTransformStyle(item.styles), ...getStatusStyle(item.status), + ...getPreviewConfigStyle(item.preview), ...getBlendModeStyle(item.styles) as any }" > @@ -28,7 +29,7 @@ import { PropType } from 'vue' import { CreateComponentGroupType } from '@/packages/index.d' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' -import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' +import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' import { useLifeHandler } from '@/hooks' const props = defineProps({ @@ -54,6 +55,5 @@ const props = defineProps({ diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index ee5ea39c..eca587aa 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -2,13 +2,14 @@
@@ -43,7 +44,7 @@ import { PreviewRenderGroup } from '../PreviewRenderGroup/index' import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' -import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' +import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' import { useLifeHandler } from '@/hooks' // 初始化数据池 @@ -78,8 +79,5 @@ onMounted(() => { diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts index 6cd25cba..945aa8c0 100644 --- a/src/views/preview/utils/style.ts +++ b/src/views/preview/utils/style.ts @@ -3,6 +3,7 @@ import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditSt type AttrType = PickCreateComponentType<'attr'> type StatusType = PickCreateComponentType<'status'> +type PreviewConfig = PickCreateComponentType<'preview'> // 设置位置 export const getComponentAttrStyle = (attr: AttrType, index: number) => { @@ -29,6 +30,17 @@ export const getStatusStyle = (attr: StatusType) => { } } +// 设置预览配置样式 +export const getPreviewConfigStyle = (previewConfig: PreviewConfig) => { + const previewStyle: Partial = {} + if (previewConfig) { + if (previewConfig.overFlowHidden) { + previewStyle.overflow = 'hidden' + } + } + return previewStyle +} + // 全局样式 export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => { // 背景