問題介紹

使用Echarts在Vue3+Vite項目中繪制堆疊折線圖的的時候，tooltip總是不顯示，經過很長時間的排查和修改，最后發現是在使用上有錯誤導致的。

錯誤圖片展示

問題原因

由于Vue3底層使用proxy代理創建示例，使用其創建出來的實例與Echarts真正使用的的實例存在兼容性問題，所以Echarts無法從中獲取內部變量，所以在使用Echarts實例的時候，不要使用ref或reactive等響應式方法創建Echarts對象，應該使用shallowReactive、shallowRef或者普通變量。

導致問題代碼

const chartInstance3 = ref(null); //定義店鋪入駐明細圖表實例化
const chartContainer3 = ref();

shallowReactive、shallowRef與reactive、ref的區別

API	介紹
reactive	reactive用于將一個對象變成響應式的。它會深度遍歷對象的屬性，使其內部的所有屬性也變為響應式的。因此，當你修改任何層級的屬性時，都會觸發依賴這些屬性的組件的更新。 它適用于那些結構復雜并且需要整個對象及其所有屬性都是響應式的情況。
shallowReactive	shallowReactive同樣用于將對象變成響應式的，但是它只會使對象的頂層屬性響應式，而不會深入到對象的嵌套屬性中。這意味著如果你有一個嵌套的對象，其內部的屬性更改將不會觸發響應性更新。 這個API對于處理大型數據結構特別有用，因為它避免了深度遍歷帶來的性能開銷。
ref	ref用于創建一個響應式的引用類型，它包裝了一個基本類型值或一個復雜的類型。ref的值可以通過.value屬性訪問和修改。 ref可以用于任何數據類型，但是當它包裝復雜類型（如對象或數組）時，整個ref對象本身仍然是響應式的，內部的復雜類型也會被轉化為響應式類型（通過reactive）。 ref主要用于狀態管理，尤其是那些需要在組件之間共享的狀態。
shallowRef	shallowRef與ref相似，但它不會將內部的復雜類型轉化為響應式類型。這意味著如果shallowRef的值是一個對象，那么這個對象的內部屬性更改將不會觸發響應性更新。 這種行為在處理大型數據結構或外部庫提供的對象時非常有用，因為它們可能不希望被Vue的響應系統所影響。

總結：

• reactive和ref都提供深度響應性，但ref還提供了一層額外的封裝。
• shallowReactive和shallowRef僅提供一層響應性，這對于性能敏感的應用或不需要深度響應性的數據結構很有用。

修改后的實現效果

修改后的代碼

const chartInstance3 = shallowRef(null); //定義店鋪入駐明細圖表實例化
const chartContainer3 = shallowRef();

附完整代碼

<template><divref="chartContainer3"style="width: 100%; height: 400px; margin-top: 20px"></div>
</template><script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref, shallowRef } from "vue";
import request from "@/utils/request";
import api from "@/api";
import formatTime from "@/utils/formatTime";
const chartInstance3 = shallowRef(null); //定義店鋪入駐明細圖表實例化
const chartContainer3 = shallowRef();const ServiceCategoryList = ref([]); //店鋪類別列表
// 獲取所有店鋪類別
const getShopCategory = async () => {const res = await request.get(api.getShopCategory);res.data.forEach((item) => {ServiceCategoryList.value.push({name: item.name,type: "line", //圖標的類型，line：折線圖// stack: "total",shopType: item.type,smooth: "true",data: [],});});
};
const shopList = ref([]); //入駐店鋪列表
const startTime = ref(""); //入住店鋪最早的創建時間
const endTime = new Date(); //當前時間
const dateArray = ref([]); //日期數組
// 創建時間列表
const createTimeList = (start, end) => {while (start <= end) {dateArray.value.push(start.toISOString().substring(0, 10)); // 只保留YYYY-MM-DD格式start.setDate(start.getDate() + 1); // 增加一天}
};
// 獲取入駐平臺的所有店鋪
const getShopList = async () => {await request.get(api.shopList).then((res) => {res.data.forEach((item) => {item.createTime = formatTime(item.createTime).nohour;item.createTimeObj = new Date(item.createTime);shopList.value.push({shopName: item.shopName,createTime: item.createTime,shopType: item.shopType,});});// 使用sort方法對shopList按創建時間排序，并找出最早入駐的時間res.data.sort((a, b) => a.createTimeObj - b.createTimeObj);startTime.value = new Date(res.data[0].createTime);createTimeList(startTime.value, endTime); //生成時間列表// 將所有的店鋪按照店鋪類別進行分組const shopsGroupedByTypeAndTime = res.data.reduce((groups, shop) => {const shopType = shop.shopType;const shopTime = shop.createTime;// 如果還沒有對應店鋪類型的分組，則創建它if (!groups[shopType]) {groups[shopType] = {};}// 如果還沒有對應時間的分組，則創建它if (!groups[shopType][shopTime]) {groups[shopType][shopTime] = 0;}// 將對應時間和類型的計數增加1groups[shopType][shopTime]++;return groups;}, {});ServiceCategoryList.value.forEach((item) => {if (shopsGroupedByTypeAndTime[item.shopType]) {item.data = shopsGroupedByTypeAndTime[item.shopType];}dateArray.value.forEach((date) => {if (!item.data[date]) {item.data[date] = 0;}});item.data = Object.entries(item.data).sort(([keyA], [keyB]) => new Date(keyA) - new Date(keyB)).map(([key, value]) => value);});});
};
const setOptions3 = () => {chartInstance3.value.setOption({title: {text: "商家入駐數據明細",},tooltip: {trigger: "axis",axisPointer: {type: "cross",},},legend: {data: ServiceCategoryList.value.map((item) => item.name),},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: {type: "category",boundaryGap: false,data: dateArray.value,},yAxis: {type: "value",},series: [...ServiceCategoryList.value],});
};
onMounted(async () => {await getShopCategory();await getShopList();chartInstance3.value = echarts.init(chartContainer3.value);setOptions3();
});
onUnmounted(() => {// 組件卸載時銷毀圖表實例chartInstance3.value.dispose();
});
</script>