MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace echartsInstance ref with a direct variable assignment

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/Charts/components/InstanceActivity.vue
View File

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

32
src/views/Charts/components/InstanceActivityDetail.vue
View File

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