vue3使用i18n和echarts 切换语言不更换问题
在vue3中使用i18n 中在 script setup中直接赋值
例如:
<ul>
<li class="tag" v-for="(v, id, index) in message " :ket='v.id' @click="jump(v.id)">{{ v.name }}</li>
</ul>
const message =reactive([
0: { name: t('Home.Home'), id: 0 },
1: { name: t('Home.APP'), id: 1 },
2: { name: t('Home.Game'), id: 4 },
3: { name: t('Home.RoadMap'), id: 5 },
])
如果按照这种情况,在更换语言时是不会进行切换的,必须通过 computed 来进行计算
const message = computed(() => { return reactive([
0: { name: t('Home.Home'), id: 0 },
1: { name: t('Home.APP'), id: 1 },
2: { name: t('Home.Game'), id: 4 },
3: { name: t('Home.RoadMap'), id: 5 },
])
}
在echarts 中使用i18n
在切换语言的时候,如果直接不做处理的切换,也不会进行更新语言
如果按照上面的方式 直接使用 computed 会报错
Maximum call stack size exceeded
在测试中发现了以下可行的方法
let MarkingText= [{ name: "30% " + t('stats。study') + "", value: 30 },
{ name: "33.75% " + t('stats.rest') + "", value: 33.75 },
{ name: "20% " + t("stats.Game") + "", value: 30 },
{ name: "11.25% " + t("stats.SOCIAL") + "", value: 11.25 },
{ name: "5% " + t("stats.Eating") + "", value: 5 },]
let options = {
tooltip: {
trigger: "item",
},
legend: {
top: "bottom",
textStyle: {
// color: "#fff", // 改变标示文字的颜色
fontSize: 12,
},
// itemHeight:20
},
series: [
{
label: {
textStyle: {
// color: "#fff", // 改变标示文字的颜色
},
},
type: "pie",
radius: ["35%", "70%"],
height: "90%",
left: "left",
data: datas.value,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
}
let myChart
watch(
currentLanguage,
(newVal){
let data = computed(()=> {return MarkingText} )
options.series[0].data = data.value;
myChart.setOption(options);
}
)
onMounted(() => {
let dom = document.getElementById("Charts")
myChart = echarts.init(dom);
myChart.setOption(options);
})
只贴出了部分关键代码具体根据实际情况