简柏林 / thingskit-front · Commits

Commit a332a22b3826a1138cf15f441d46acd8299a5700

Authored by loveumiko
1 parent e1840703

fix: 修复看板模块设备名称未生效

Inline Side-by-side
Showing 5 changed files with 137 additions and 127 deletions
@@ -8,7 +8,7 @@ @@ -8,7 +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 + import { SeriesOption } from 'echarts/types/dist/shared';
12 12
13 const props = defineProps<{ 13 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -22,47 +22,47 @@ @@ -22,47 +22,47 @@
22 22
23 const getDesign = computed(() => { 23 const getDesign = computed(() => {
24 const { option, persetOption } = props.config; 24 const { option, persetOption } = props.config;
25 - // const { dataSource = [] } = option || {};  
26 - // const {  
27 - // fontColor: persetFontColor,  
28 - // unit: persetUnit,  
29 - // showDeviceName: persetShowDeviceName,  
30 - // } = persetOption || {};  
31 - // return {  
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 - // }),  
44 - // };  
45 -  
46 - const { componentInfo, attribute, attributeRename } = option; 25 + const { dataSource = [] } = option || {};
47 const { 26 const {
48 - fontColor: presetFontColor,  
49 - unit: presetUnit,  
50 - pointerColor: presetPointerColor,  
51 - instrumentPanelColor: presetInstrumentPanelColor,  
52 - progressBarCircle: presetProgressBarCircle,  
53 - gradientInfo: presetGradientInfo, 27 + fontColor: persetFontColor,
  28 + unit: persetUnit,
  29 + showDeviceName: persetShowDeviceName,
54 } = persetOption || {}; 30 } = persetOption || {};
55 - const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =  
56 - componentInfo || {};  
57 return { 31 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, 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 + }),
65 }; 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 + // };
66 }); 66 });
67 67
68 const gaugeData = [ 68 const gaugeData = [
@@ -93,9 +93,8 @@ @@ -93,9 +93,8 @@
93 ]; 93 ];
94 94
95 const options = (): EChartsOption => { 95 const options = (): EChartsOption => {
96 - const { fontColor } = unref(getDesign);  
97 - // const { fontColor, unit } = unref(getDesign).dataSource[0] || [];  
98 - // console.log(fontColor, unit, 'unit', unref(getDesign)); 96 + // const { fontColor } = unref(getDesign);
  97 + const { fontColor } = unref(getDesign).dataSource[0] || [];
99 return { 98 return {
100 color: ['#377DFF', '#FD666D', '#00F0F0'], 99 color: ['#377DFF', '#FD666D', '#00F0F0'],
101 series: [ 100 series: [
@@ -135,12 +134,12 @@ @@ -135,12 +134,12 @@
135 }, 134 },
136 data: gaugeData, 135 data: gaugeData,
137 title: { 136 title: {
138 - fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14, 137 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
139 }, 138 },
140 detail: { 139 detail: {
141 width: 50, 140 width: 50,
142 height: 16, 141 height: 16,
143 - fontSize: unref(getRatio) ? 12 * unref(getRatio) : 12, 142 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
144 color: fontColor || 'inherit', 143 color: fontColor || 'inherit',
145 // formatter: `{value} ${unit ?? ''}`, 144 // formatter: `{value} ${unit ?? ''}`,
146 }, 145 },
@@ -171,76 +170,75 @@ @@ -171,76 +170,75 @@
171 // }, 3000); 170 // }, 3000);
172 // }; 171 // };
173 172
174 - const list = ref<any>([]); 173 + // const list = ref<any>([]);
175 const updateFn: MultipleDataFetchUpdateFn = (message) => { 174 const updateFn: MultipleDataFetchUpdateFn = (message) => {
176 const { data = {} } = message; 175 const { data = {} } = message;
177 176
178 - const { dataSource } = props.config.option;  
179 - // const dataList = Object.keys(data);  
180 - const dataList = dataSource?.map((item) => item.attribute);  
181 - list.value = dataList?.map((item, index) => {  
182 - return {  
183 - value: data[item][0][1],  
184 - name: item,  
185 - title: {  
186 - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',  
187 - offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],  
188 - },  
189 - detail: {  
190 - valueAnimation: true,  
191 - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',  
192 - offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],  
193 - },  
194 - };  
195 - });  
196 - dataSource?.forEach((item, index) => {  
197 - list.value.forEach((item1, index1) => {  
198 - console.log(item, 'item');  
199 - if (index == index1) {  
200 - // item1.value = item1.value + item.componentInfo.unit;  
201 - item1.name = item.componentInfo.showDeviceName  
202 - ? item.deviceRename  
203 - ? item.deviceRename  
204 - : item.deviceName  
205 - : '';  
206 - item1.title.color = item.componentInfo.fontColor;  
207 - item1.detail.color = item.componentInfo.fontColor;  
208 - item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;  
209 - }  
210 - });  
211 - });  
212 - // console.log(message, 'message', dataSource, 'dataSource', list, 'list');  
213 - unref(chartInstance)?.setOption({  
214 - series: [{ data: unref(list), pointer: { show: false } }],  
215 - color: unref(list).map((item) => item.title.color),  
216 - } as EChartsOption);  
217 -  
218 - // const { dataSource } = unref(getDesign);  
219 - // const series = dataSource.map((item, index) => {  
220 - // const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;  
221 - // const [latest] = data[attribute] || [];  
222 - // const [_timespan, value] = latest || []; 177 + // const { dataSource } = props.config.option;
  178 + // const dataList = dataSource?.map((item) => item.attribute);
  179 + // list.value = dataList?.map((item, index) => {
223 // return { 180 // return {
224 - // value,  
225 - // name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '', 181 + // value: data[item][0][1],
  182 + // name: item,
226 // title: { 183 // title: {
227 - // color: fontColor, 184 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
228 // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'], 185 // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
229 // }, 186 // },
230 // detail: { 187 // detail: {
231 - // color: fontColor,  
232 // valueAnimation: true, 188 // valueAnimation: true,
  189 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
233 // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'], 190 // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
234 - // formatter: `{value} ${unit ?? ''}`,  
235 // }, 191 // },
236 - // } as SeriesOption['data']; 192 + // };
237 // }); 193 // });
238 - // const xAxisData = dataSource.map((item: any) => item.fontColor as any);  
239 - // console.log(series, xAxisData, 'xAxisData');  
240 - // unref(chartInstance)?.setOption({  
241 - // series: [{ data: series, pointer: { show: false } }],  
242 - // color: xAxisData as any, 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 + // });
243 // }); 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 || [];
  221 + return {
  222 + value,
  223 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
  224 + title: {
  225 + color: fontColor,
  226 + offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
  227 + },
  228 + detail: {
  229 + color: fontColor,
  230 + valueAnimation: true,
  231 + offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  232 + formatter: `{value} ${unit ?? ''}`,
  233 + },
  234 + } as SeriesOption['data'];
  235 + });
  236 + // console.log(series, 'series');
  237 + const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
  238 + unref(chartInstance)?.setOption({
  239 + series: [{ data: series, pointer: { show: false } }],
  240 + color: xAxisData as any,
  241 + });
244 // updateChart(series, xAxisData); 242 // updateChart(series, xAxisData);
245 }; 243 };
246 244
@@ -267,10 +265,10 @@ @@ -267,10 +265,10 @@
267 series: [ 265 series: [
268 { 266 {
269 title: { 267 title: {
270 - fontSize: 14 * unref(getRatio), 268 + fontSize: 10 * unref(getRatio),
271 }, 269 },
272 detail: { 270 detail: {
273 - fontSize: 14 * unref(getRatio), 271 + fontSize: 10 * unref(getRatio),
274 }, 272 },
275 axisLine: { 273 axisLine: {
276 lineStyle: { 274 lineStyle: {
@@ -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);