Commit f81e04deca0e7a0d849fc20b1f72fd3d25c7a688
1 parent
7dd26293
perf(src/packages/external/Informations): 优化自定义echarts,可通过动态接口设置值
Showing
1 changed file
with
23 additions
and
5 deletions
... | ... | @@ -25,6 +25,7 @@ import { useChartDataFetch } from '@/hooks' |
25 | 25 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
26 | 26 | import { isPreview } from '@/utils' |
27 | 27 | import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' |
28 | +import { isObject, isString } from '@/utils/external/is' | |
28 | 29 | |
29 | 30 | const props = defineProps({ |
30 | 31 | themeSetting: { |
... | ... | @@ -41,17 +42,35 @@ const props = defineProps({ |
41 | 42 | } |
42 | 43 | }) |
43 | 44 | |
44 | -const initOptions = useCanvasInitOptions(eval('(' + props.chartConfig.option.dataset + ')'), props.themeSetting) | |
45 | +//判断数据格式是否是字符串 | |
46 | +const datasetIsString = () => { | |
47 | + return isString(props.chartConfig.option.dataset) | |
48 | + ? eval('(' + props.chartConfig.option.dataset + ')') | |
49 | + : props.chartConfig.option.dataset | |
50 | +} | |
51 | + | |
52 | +const initOptions = useCanvasInitOptions(datasetIsString, props.themeSetting) | |
45 | 53 | |
46 | 54 | use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent]) |
47 | 55 | |
48 | 56 | const replaceMergeArr = ref<string[]>() |
49 | 57 | |
50 | 58 | const option = computed(() => { |
51 | - return mergeTheme(eval('(' + props.chartConfig.option.dataset + ')'), props.themeSetting, []) | |
59 | + return mergeTheme(datasetIsString, props.themeSetting, []) | |
60 | +}) | |
61 | + | |
62 | +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => { | |
63 | + chartDataset(newData) | |
52 | 64 | }) |
53 | 65 | |
54 | -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) | |
66 | +const chartDataset = (newValue: Recordable | string) => { | |
67 | + if (isObject(newValue)) { | |
68 | + updateVChart(newValue) | |
69 | + } else if (isString(newValue)) { | |
70 | + //嵌套字符串使用JSON.parse会报错,这里使用eval函数 | |
71 | + updateVChart(eval('(' + newValue + ')')) | |
72 | + } | |
73 | +} | |
55 | 74 | |
56 | 75 | const updateVChart = (dataset: object) => { |
57 | 76 | new Promise(resolve => { |
... | ... | @@ -74,8 +93,7 @@ watch( |
74 | 93 | () => props.chartConfig.option.dataset, |
75 | 94 | newValue => { |
76 | 95 | try { |
77 | - //嵌套字符串使用JSON.parse会报错,这里使用eval函数 | |
78 | - updateVChart(eval('(' + newValue + ')')) | |
96 | + chartDataset(newValue) | |
79 | 97 | } catch (e) { |
80 | 98 | console.error( |
81 | 99 | `文件位置:src\\packages\\components\\external\\InformationsMores\\CustomEcharts\\index.vue`, | ... | ... |