replace echartsInstance ref with a direct variable assignment

This commit is contained in:
pa
2025-11-13 00:09:34 +09:00
committed by Natsumi
parent 84e724f628
commit 747204171a
2 changed files with 39 additions and 39 deletions

View File

@@ -174,7 +174,7 @@
getActivityData
} = useInstanceActivityData();
const echartsInstance = ref(null);
let echartsInstance = null;
const resizeObserver = ref(null);
const { handleIntersectionObserver } = useIntersectionObserver();
const isLoading = ref(true);
@@ -204,9 +204,9 @@
watch(
() => isDarkMode.value,
() => {
if (echartsInstance.value) {
echartsInstance.value.dispose();
echartsInstance.value = null;
if (echartsInstance) {
echartsInstance.dispose();
echartsInstance = null;
initEcharts();
}
}
@@ -215,7 +215,7 @@
watch(
() => dtHour12.value,
() => {
if (echartsInstance.value) {
if (echartsInstance) {
initEcharts();
}
}
@@ -223,7 +223,7 @@
// onActivated(() => {
// // first time also call activated
// if (echartsInstance.value) {
// if (echartsInstance) {
// reloadData();
// }
// });
@@ -276,17 +276,17 @@
await nextTick();
if (echartsInstance.value && activityData.value.length) {
if (echartsInstance && activityData.value.length) {
const chartsHeight = activityData.value.length * (barWidth.value + 10) + 200;
echartsInstance.value.resize({
echartsInstance.resize({
height: chartsHeight,
animation: {
duration: 300
}
});
echartsInstance.value.setOption(getNewOption(), { notMerge: true });
} else if (echartsInstance.value) {
echartsInstance.value.clear();
echartsInstance.setOption(getNewOption(), { notMerge: true });
} else if (echartsInstance) {
echartsInstance.clear();
}
} catch (error) {
console.error('Error in reloadData:', error);
@@ -349,12 +349,12 @@
const chartDom = activityChartRef.value;
const afterInit = () => {
if (!echartsInstance.value) {
if (!echartsInstance) {
console.error('ECharts instance not initialized');
return;
}
echartsInstance.value.resize({
echartsInstance.resize({
height: chartsHeight,
animation: {
duration: 300
@@ -363,26 +363,26 @@
const handleClickYAxisLabel = handleYAxisLabelClick;
echartsInstance.value.off('click');
echartsInstance.off('click');
if (activityData.value.length && worldNameArray.value.length) {
const options = getNewOption();
echartsInstance.value.clear();
echartsInstance.value.setOption(options, { notMerge: true });
echartsInstance.value.on('click', 'yAxis', handleClickYAxisLabel);
echartsInstance.clear();
echartsInstance.setOption(options, { notMerge: true });
echartsInstance.on('click', 'yAxis', handleClickYAxisLabel);
} else {
echartsInstance.value.clear();
echartsInstance.clear();
}
isLoading.value = false;
};
const initEchartsInstance = () => {
echartsInstance.value = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
echartsInstance = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
height: chartsHeight
});
// resizeObserver.value = new ResizeObserver((entries) => {
// for (const entry of entries) {
// echartsInstance.value.resize({
// echartsInstance.resize({
// width: entry.contentRect.width,
// animation: {
// duration: 300
@@ -393,7 +393,7 @@
// resizeObserver.value.observe(chartDom);
};
if (!echartsInstance.value) {
if (!echartsInstance) {
initEchartsInstance();
}
afterInit();
@@ -541,9 +541,9 @@
function handleSettingsChange() {
handleChangeSettings(activityDetailChartRef);
if (echartsInstance.value) {
if (echartsInstance) {
const newOptions = getNewOption();
echartsInstance.value.setOption({
echartsInstance.setOption({
yAxis: newOptions.yAxis
});
}

View File

@@ -44,7 +44,7 @@
const activityDetailChartRef = ref(null);
const isLoading = ref(true);
const echartsInstance = ref(null);
let echartsInstance = null;
const usersFirstActivity = ref(null);
const resizeObserver = ref(null);
@@ -59,9 +59,9 @@
watch(
() => isDarkMode.value,
() => {
if (echartsInstance.value) {
echartsInstance.value.dispose();
echartsInstance.value = null;
if (echartsInstance) {
echartsInstance.dispose();
echartsInstance = null;
initEcharts();
}
}
@@ -70,7 +70,7 @@
watch(
() => dtHour12.value,
() => {
if (echartsInstance.value) {
if (echartsInstance) {
initEcharts();
}
}
@@ -103,12 +103,12 @@
function initResizeObserver() {
resizeObserver.value = new ResizeObserver((entries) => {
if (!echartsInstance.value) {
if (!echartsInstance) {
return;
}
for (const entry of entries) {
try {
echartsInstance.value.resize({
echartsInstance.resize({
width: entry.contentRect.width,
animation: {
duration: 300
@@ -131,29 +131,29 @@
const chartDom = activityDetailChartRef.value;
const afterInit = () => {
if (!echartsInstance.value) {
if (!echartsInstance) {
console.error('ECharts instance not initialized');
isLoading.value = false;
return;
}
try {
echartsInstance.value.resize({
echartsInstance.resize({
height: chartsHeight,
animation: {
duration: 300
}
});
echartsInstance.value.off('click');
echartsInstance.off('click');
const options = getNewOption();
if (options && options.series && options.series.length > 0) {
echartsInstance.value.clear();
echartsInstance.value.setOption(options, { notMerge: true });
echartsInstance.value.on('click', 'yAxis', handleClickYAxisLabel);
echartsInstance.clear();
echartsInstance.setOption(options, { notMerge: true });
echartsInstance.on('click', 'yAxis', handleClickYAxisLabel);
} else {
echartsInstance.value.clear();
echartsInstance.clear();
}
} catch (error) {
console.error('Error in afterInit:', error);
@@ -163,8 +163,8 @@
};
const initEchartsInstance = () => {
if (!echartsInstance.value) {
echartsInstance.value = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
if (!echartsInstance) {
echartsInstance = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
height: chartsHeight,
useDirtyRect: props.activityDetailData.length > 80
});