简柏林 / thingskit-front · Commits

Commit 85df67c11c7b089b5156709a5762bba15a02bd33

Authored by xp.Huang
2 parents 0aeb47ee a332a22b

Merge branch 'fix/DEFECT-1373' into 'main_dev' 

Fix/defect 1373

See merge request yunteng/thingskit-front!657
Inline Side-by-side
Showing 5 changed files with 155 additions and 79 deletions
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 // import { useIntervalFn } from '@vueuse/core'; 8 // import { useIntervalFn } from '@vueuse/core';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
  11 + import { SeriesOption } from 'echarts/types/dist/shared';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -21,26 +22,47 @@ @@ -21,26 +22,47 @@
21 22
22 const getDesign = computed(() => { 23 const getDesign = computed(() => {
23 const { option, persetOption } = props.config; 24 const { option, persetOption } = props.config;
24 - const { componentInfo, attribute, attributeRename } = option; 25 + const { dataSource = [] } = option || {};
25 const { 26 const {
26 - fontColor: presetFontColor,  
27 - unit: presetUnit,  
28 - pointerColor: presetPointerColor,  
29 - instrumentPanelColor: presetInstrumentPanelColor,  
30 - progressBarCircle: presetProgressBarCircle,  
31 - gradientInfo: presetGradientInfo, 27 + fontColor: persetFontColor,
  28 + unit: persetUnit,
  29 + showDeviceName: persetShowDeviceName,
32 } = persetOption || {}; 30 } = persetOption || {};
33 - const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =  
34 - componentInfo || {};  
35 return { 31 return {
36 - unit: unit ?? presetUnit,  
37 - fontColor: fontColor ?? presetFontColor,  
38 - attribute: attributeRename || attribute,  
39 - pointerColor: pointerColor ?? presetPointerColor,  
40 - instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,  
41 - progressBarCircle: progressBarCircle ?? presetProgressBarCircle,  
42 - gradientInfo: gradientInfo ?? presetGradientInfo, 32 + dataSource: dataSource.map((item) => {
  33 + const { unit, fontColor, showDeviceName } = item.componentInfo || {};
  34 + const { deviceName, deviceRename, attribute } = item;
  35 + return {
  36 + unit: unit ?? persetUnit,
  37 + fontColor: fontColor ?? persetFontColor,
  38 + showDeviceName: showDeviceName ?? persetShowDeviceName,
  39 + attribute,
  40 + deviceName,
  41 + deviceRename,
  42 + };
  43 + }),
43 }; 44 };
  45 +
  46 + // const { componentInfo, attribute, attributeRename } = option;
  47 + // const {
  48 + // fontColor: presetFontColor,
  49 + // unit: presetUnit,
  50 + // pointerColor: presetPointerColor,
  51 + // instrumentPanelColor: presetInstrumentPanelColor,
  52 + // progressBarCircle: presetProgressBarCircle,
  53 + // gradientInfo: presetGradientInfo,
  54 + // } = persetOption || {};
  55 + // const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
  56 + // componentInfo || {};
  57 + // return {
  58 + // unit: unit ?? presetUnit,
  59 + // fontColor: fontColor ?? presetFontColor,
  60 + // attribute: attributeRename || attribute,
  61 + // pointerColor: pointerColor ?? presetPointerColor,
  62 + // instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
  63 + // progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
  64 + // gradientInfo: gradientInfo ?? presetGradientInfo,
  65 + // };
44 }); 66 });
45 67
46 const gaugeData = [ 68 const gaugeData = [
@@ -53,6 +75,7 @@ @@ -53,6 +75,7 @@
53 detail: { 75 detail: {
54 valueAnimation: true, 76 valueAnimation: true,
55 offsetCenter: ['0%', '-20%'], 77 offsetCenter: ['0%', '-20%'],
  78 + // formatter: `{value} ℃`,
56 }, 79 },
57 }, 80 },
58 { 81 {
@@ -64,14 +87,16 @@ @@ -64,14 +87,16 @@
64 detail: { 87 detail: {
65 valueAnimation: true, 88 valueAnimation: true,
66 offsetCenter: ['0%', '15%'], 89 offsetCenter: ['0%', '15%'],
  90 + // formatter: `{value} ℃`,
67 }, 91 },
68 }, 92 },
69 ]; 93 ];
70 94
71 const options = (): EChartsOption => { 95 const options = (): EChartsOption => {
72 - const { fontColor } = unref(getDesign); 96 + // const { fontColor } = unref(getDesign);
  97 + const { fontColor } = unref(getDesign).dataSource[0] || [];
73 return { 98 return {
74 - color: ['#ED6C0D', '#D3DB00', '#00F0F0'], 99 + color: ['#377DFF', '#FD666D', '#00F0F0'],
75 series: [ 100 series: [
76 { 101 {
77 type: 'gauge', 102 type: 'gauge',
@@ -83,11 +108,11 @@ @@ -83,11 +108,11 @@
83 progress: { 108 progress: {
84 show: true, 109 show: true,
85 overlap: false, 110 overlap: false,
86 - roundCap: true, 111 + // roundCap: true,
87 clip: false, 112 clip: false,
88 itemStyle: { 113 itemStyle: {
89 - // borderWidth: 1,  
90 - // borderColor: '#464646', 114 + borderWidth: 1,
  115 + borderColor: '#464646',
91 }, 116 },
92 }, 117 },
93 axisLine: { 118 axisLine: {
@@ -109,12 +134,12 @@ @@ -109,12 +134,12 @@
109 }, 134 },
110 data: gaugeData, 135 data: gaugeData,
111 title: { 136 title: {
112 - fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14, 137 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
113 }, 138 },
114 detail: { 139 detail: {
115 width: 50, 140 width: 50,
116 height: 16, 141 height: 16,
117 - fontSize: unref(getRatio) ? 12 * unref(getRatio) : 12, 142 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
118 color: fontColor || 'inherit', 143 color: fontColor || 'inherit',
119 // formatter: `{value} ${unit ?? ''}`, 144 // formatter: `{value} ${unit ?? ''}`,
120 }, 145 },
@@ -144,47 +169,86 @@ @@ -144,47 +169,86 @@
144 // }); 169 // });
145 // }, 3000); 170 // }, 3000);
146 // }; 171 // };
147 - const list = ref<any>([]); 172 +
  173 + // const list = ref<any>([]);
148 const updateFn: MultipleDataFetchUpdateFn = (message) => { 174 const updateFn: MultipleDataFetchUpdateFn = (message) => {
149 const { data = {} } = message; 175 const { data = {} } = message;
150 - const { dataSource } = props.config.option;  
151 - // const dataList = Object.keys(data);  
152 - const dataList = dataSource?.map((item) => item.attribute);  
153 - list.value = dataList?.map((item, index) => { 176 +
  177 + // const { dataSource } = props.config.option;
  178 + // const dataList = dataSource?.map((item) => item.attribute);
  179 + // list.value = dataList?.map((item, index) => {
  180 + // return {
  181 + // value: data[item][0][1],
  182 + // name: item,
  183 + // title: {
  184 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
  185 + // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
  186 + // },
  187 + // detail: {
  188 + // valueAnimation: true,
  189 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
  190 + // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  191 + // },
  192 + // };
  193 + // });
  194 + // dataSource?.forEach((item, index) => {
  195 + // list.value.forEach((item1, index1) => {
  196 + // console.log(item, 'item');
  197 + // if (index == index1) {
  198 + // // item1.value = item1.value + item.componentInfo.unit;
  199 + // item1.name = item.componentInfo.showDeviceName
  200 + // ? item.deviceRename
  201 + // ? item.deviceRename
  202 + // : item.deviceName
  203 + // : '';
  204 + // item1.title.color = item.componentInfo.fontColor;
  205 + // item1.detail.color = item.componentInfo.fontColor;
  206 + // item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;
  207 + // }
  208 + // });
  209 + // });
  210 + // // console.log(message, 'message', dataSource, 'dataSource', list, 'list');
  211 + // unref(chartInstance)?.setOption({
  212 + // series: [{ data: unref(list), pointer: { show: false } }],
  213 + // color: unref(list).map((item) => item.title.color),
  214 + // } as EChartsOption);
  215 +
  216 + const { dataSource } = unref(getDesign);
  217 + const series = dataSource.map((item, index) => {
  218 + const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;
  219 + const [latest] = data[attribute] || [];
  220 + const [_timespan, value] = latest || [];
154 return { 221 return {
155 - value: data[item][0][1],  
156 - name: item, 222 + value,
  223 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
157 title: { 224 title: {
158 - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0', 225 + color: fontColor,
159 offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'], 226 offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
160 }, 227 },
161 detail: { 228 detail: {
  229 + color: fontColor,
162 valueAnimation: true, 230 valueAnimation: true,
163 - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',  
164 offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'], 231 offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  232 + formatter: `{value} ${unit ?? ''}`,
165 }, 233 },
166 - };  
167 - });  
168 - dataSource?.forEach((item, index) => {  
169 - list.value.forEach((item1, index1) => {  
170 - if (index == index1) {  
171 - // item1.value = item1.value + item.componentInfo.unit;  
172 - item1.name = item.attributeRename;  
173 - item1.title.color = item.componentInfo.fontColor;  
174 - item1.detail.color = item.componentInfo.fontColor;  
175 - item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;  
176 - }  
177 - }); 234 + } as SeriesOption['data'];
178 }); 235 });
179 - // console.log(message, 'message', dataSource, 'dataSource', list, 'list'); 236 + // console.log(series, 'series');
  237 + const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
180 unref(chartInstance)?.setOption({ 238 unref(chartInstance)?.setOption({
181 - series: [{ data: unref(list), pointer: { show: false } }],  
182 - color: unref(list).map((item) => item.title.color),  
183 - } as EChartsOption);  
184 -  
185 - // updateChart(isNaN(value as unknown as number) ? 0 : Number(value)); 239 + series: [{ data: series, pointer: { show: false } }],
  240 + color: xAxisData as any,
  241 + });
  242 + // updateChart(series, xAxisData);
186 }; 243 };
187 244
  245 + // const updateChart = (data: SeriesOption['data'], xAxisData) => {
  246 + // unref(chartInstance)?.setOption({
  247 + // series: [{ data }],
  248 + // xAxis: { data: xAxisData },
  249 + // });
  250 + // };
  251 +
188 useMultipleDataFetch(props, updateFn); 252 useMultipleDataFetch(props, updateFn);
189 253
190 onMounted(() => { 254 onMounted(() => {
@@ -201,10 +265,10 @@ @@ -201,10 +265,10 @@
201 series: [ 265 series: [
202 { 266 {
203 title: { 267 title: {
204 - fontSize: 14 * unref(getRatio), 268 + fontSize: 10 * unref(getRatio),
205 }, 269 },
206 detail: { 270 detail: {
207 - fontSize: 14 * unref(getRatio), 271 + fontSize: 10 * unref(getRatio),
208 }, 272 },
209 axisLine: { 273 axisLine: {
210 lineStyle: { 274 lineStyle: {
@@ -229,9 +293,9 @@ @@ -229,9 +293,9 @@
229 <main class="w-full h-full flex flex-col justify-center items-center"> 293 <main class="w-full h-full flex flex-col justify-center items-center">
230 <DeviceName :config="config" /> 294 <DeviceName :config="config" />
231 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div> 295 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
232 - <div class="text-gray-500 text-xs text-center truncate">{{ 296 + <!-- <div class="text-gray-500 text-xs text-center truncate">{{
233 getDesign.attribute || '湿度' 297 getDesign.attribute || '湿度'
234 - }}</div> 298 + }}</div> -->
235 <UpdateTime :time="time" /> 299 <UpdateTime :time="time" />
236 </main> 300 </main>
237 </template> 301 </template>
@@ -21,16 +21,23 @@ @@ -21,16 +21,23 @@
21 const getDesign = computed(() => { 21 const getDesign = computed(() => {
22 const { persetOption, option } = props.config; 22 const { persetOption, option } = props.config;
23 const { dataSource = [] } = option || {}; 23 const { dataSource = [] } = option || {};
24 - const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {}; 24 + const {
  25 + unit: presetUnit,
  26 + fontColor: presetFontColor,
  27 + presetShowDeviceName,
  28 + } = persetOption || {};
25 return { 29 return {
26 dataSource: dataSource?.map((item) => { 30 dataSource: dataSource?.map((item) => {
27 - const { unit, fontColor } = item.componentInfo || {};  
28 - const { attribute, attributeRename } = item; 31 + const { unit, fontColor, showDeviceName } = item.componentInfo || {};
  32 + const { attribute, attributeRename, deviceName, deviceRename } = item;
29 return { 33 return {
30 unit: unit ?? presetUnit, 34 unit: unit ?? presetUnit,
31 fontColor: fontColor ?? presetFontColor, 35 fontColor: fontColor ?? presetFontColor,
32 attribute, 36 attribute,
33 attributeRename, 37 attributeRename,
  38 + deviceName,
  39 + deviceRename,
  40 + showDeviceName: showDeviceName ?? presetShowDeviceName,
34 }; 41 };
35 }), 42 }),
36 }; 43 };
@@ -103,13 +110,13 @@ @@ -103,13 +110,13 @@
103 const { data = {} } = message; 110 const { data = {} } = message;
104 const { dataSource } = unref(getDesign); 111 const { dataSource } = unref(getDesign);
105 const series = dataSource.map((item) => { 112 const series = dataSource.map((item) => {
106 - const { attribute, attributeRename, fontColor, unit } = item; 113 + const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
107 const [latest] = data[attribute] || []; 114 const [latest] = data[attribute] || [];
108 const [_timespan, value] = latest || []; 115 const [_timespan, value] = latest || [];
109 116
110 return { 117 return {
111 value, 118 value,
112 - name: attributeRename ?? attribute, 119 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
113 itemStyle: { color: fontColor }, 120 itemStyle: { color: fontColor },
114 tooltip: { 121 tooltip: {
115 valueFormatter(value) { 122 valueFormatter(value) {
@@ -21,16 +21,23 @@ @@ -21,16 +21,23 @@
21 const getDesign = computed(() => { 21 const getDesign = computed(() => {
22 const { persetOption, option } = props.config; 22 const { persetOption, option } = props.config;
23 const { dataSource = [] } = option || {}; 23 const { dataSource = [] } = option || {};
24 - const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {}; 24 + const {
  25 + unit: presetUnit,
  26 + fontColor: presetFontColor,
  27 + showDeviceName: presetShowDeviceName,
  28 + } = persetOption || {};
25 return { 29 return {
26 dataSource: dataSource?.map((item) => { 30 dataSource: dataSource?.map((item) => {
27 - const { unit, fontColor } = item.componentInfo || {};  
28 - const { attribute, attributeRename } = item; 31 + const { unit, fontColor, showDeviceName } = item.componentInfo || {};
  32 + const { attribute, attributeRename, deviceName, deviceRename } = item;
29 return { 33 return {
30 unit: unit ?? presetUnit, 34 unit: unit ?? presetUnit,
31 fontColor: fontColor ?? presetFontColor, 35 fontColor: fontColor ?? presetFontColor,
32 attribute, 36 attribute,
33 attributeRename, 37 attributeRename,
  38 + deviceName,
  39 + deviceRename,
  40 + showDeviceName: showDeviceName ?? presetShowDeviceName,
34 }; 41 };
35 }), 42 }),
36 }; 43 };
@@ -111,13 +118,13 @@ @@ -111,13 +118,13 @@
111 const { data = {} } = message; 118 const { data = {} } = message;
112 const { dataSource } = unref(getDesign); 119 const { dataSource } = unref(getDesign);
113 const series = dataSource.map((item) => { 120 const series = dataSource.map((item) => {
114 - const { attribute, attributeRename, fontColor, unit } = item; 121 + const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
115 const [latest] = data[attribute] || []; 122 const [latest] = data[attribute] || [];
116 const [_timespan, value] = latest || []; 123 const [_timespan, value] = latest || [];
117 124
118 return { 125 return {
119 value, 126 value,
120 - name: attributeRename ?? attribute, 127 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
121 itemStyle: { color: fontColor }, 128 itemStyle: { color: fontColor },
122 tooltip: { 129 tooltip: {
123 valueFormatter(value) { 130 valueFormatter(value) {
@@ -139,8 +146,6 @@ @@ -139,8 +146,6 @@
139 show: false, 146 show: false,
140 }, 147 },
141 }); 148 });
142 - // }  
143 - // console.log(message, 'message', series, 'series', sum);  
144 updateChart(series); 149 updateChart(series);
145 }; 150 };
146 151
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3 - import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 + import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 import { useMultipleDataFetch } from '../../../hook/useSocket'; 4 import { useMultipleDataFetch } from '../../../hook/useSocket';
5 import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 5 import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
6 import { option } from './config'; 6 import { option } from './config';
@@ -58,9 +58,9 @@ @@ -58,9 +58,9 @@
58 axisTick: { 58 axisTick: {
59 alignWithLabel: true, 59 alignWithLabel: true,
60 }, 60 },
61 - axisPointer: {  
62 - type: 'line',  
63 - }, 61 + // axisPointer: {
  62 + // type: 'line',
  63 + // },
64 }, 64 },
65 grid: { 65 grid: {
66 top: '15%', 66 top: '15%',
@@ -83,7 +83,7 @@ @@ -83,7 +83,7 @@
83 83
84 const initial = () => { 84 const initial = () => {
85 chartInstance.value = init(unref(chartRefEl)! as HTMLElement); 85 chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
86 - chartInstance.value.setOption(options()); 86 + toRaw(chartInstance.value).setOption(options());
87 }; 87 };
88 88
89 // const randomFn = () => { 89 // const randomFn = () => {
@@ -96,7 +96,7 @@ @@ -96,7 +96,7 @@
96 // }; 96 // };
97 97
98 const updateChart = (data: SeriesOption['data'], xAxisData) => { 98 const updateChart = (data: SeriesOption['data'], xAxisData) => {
99 - unref(chartInstance)?.setOption({ 99 + toRaw(unref(chartInstance))?.setOption({
100 series: [{ data }], 100 series: [{ data }],
101 xAxis: { data: xAxisData }, 101 xAxis: { data: xAxisData },
102 // color: unref(list).map((item) => item.title.color), 102 // color: unref(list).map((item) => item.title.color),
@@ -143,14 +143,14 @@ @@ -143,14 +143,14 @@
143 await nextTick(); 143 await nextTick();
144 144
145 // 修改echarts大小 145 // 修改echarts大小
146 - unref(chartInstance)?.setOption({ 146 + toRaw(unref(chartInstance))?.setOption({
147 legend: { 147 legend: {
148 textStyle: { 148 textStyle: {
149 fontSize: 14 * unref(getRatio), 149 fontSize: 14 * unref(getRatio),
150 }, 150 },
151 }, 151 },
152 } as EChartsOption); 152 } as EChartsOption);
153 - unref(chartInstance)?.resize(); 153 + toRaw(unref(chartInstance))?.resize();
154 }; 154 };
155 155
156 const { getRatio } = useComponentScale(props, resize); 156 const { getRatio } = useComponentScale(props, resize);
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3 - import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 + import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 import { useMultipleDataFetch } from '../../../hook/useSocket'; 4 import { useMultipleDataFetch } from '../../../hook/useSocket';
5 import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 5 import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
6 import { option } from './config'; 6 import { option } from './config';
@@ -83,7 +83,7 @@ @@ -83,7 +83,7 @@
83 83
84 const initial = () => { 84 const initial = () => {
85 chartInstance.value = init(unref(chartRefEl)! as HTMLElement); 85 chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
86 - chartInstance.value.setOption(options()); 86 + toRaw(chartInstance.value).setOption(options());
87 }; 87 };
88 88
89 // const randomFn = () => { 89 // const randomFn = () => {
@@ -96,7 +96,7 @@ @@ -96,7 +96,7 @@
96 // }; 96 // };
97 97
98 const updateChart = (data: SeriesOption['data'], yAxisData) => { 98 const updateChart = (data: SeriesOption['data'], yAxisData) => {
99 - unref(chartInstance)?.setOption({ 99 + toRaw(unref(chartInstance))?.setOption({
100 series: [{ data }], 100 series: [{ data }],
101 yAxis: { data: yAxisData }, 101 yAxis: { data: yAxisData },
102 // color: unref(list).map((item) => item.title.color), 102 // color: unref(list).map((item) => item.title.color),
@@ -143,14 +143,14 @@ @@ -143,14 +143,14 @@
143 await nextTick(); 143 await nextTick();
144 144
145 // 修改echarts大小 145 // 修改echarts大小
146 - unref(chartInstance)?.setOption({ 146 + toRaw(unref(chartInstance))?.setOption({
147 legend: { 147 legend: {
148 textStyle: { 148 textStyle: {
149 fontSize: 14 * unref(getRatio), 149 fontSize: 14 * unref(getRatio),
150 }, 150 },
151 }, 151 },
152 } as EChartsOption); 152 } as EChartsOption);
153 - unref(chartInstance)?.resize(); 153 + toRaw(unref(chartInstance))?.resize();
154 }; 154 };
155 155
156 const { getRatio } = useComponentScale(props, resize); 156 const { getRatio } = useComponentScale(props, resize);