Commit f81e04deca0e7a0d849fc20b1f72fd3d25c7a688

Authored by fengwotao
1 parent 7dd26293

perf(src/packages/external/Informations): 优化自定义echarts,可通过动态接口设置值

... ... @@ -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`,
... ...