legend的數(shù)據(jù)需要與 series的數(shù)據(jù)中的 name保持一一對應(yīng)的關(guān)系搭儒,可以將這兩處都傳入國際化對應(yīng)的 key沪悲,在 legend.formatter和 series.label.formatter使用回調(diào)函數(shù)的形式返回國際化處理后的顯示值
Tips:在語言切換時获洲,需要點擊一個圖例才會觸發(fā)legend和 series的切換,需要通過 watch監(jiān)聽可训,手動觸發(fā)一下 setOption()昌妹,不需要重新設(shè)置配置項
export defaut {
data() {
return {
myChart: null,
option: null,
}
},
mounted() {
let key = 'common.type.';
let legendData = [
`${key}type1`,
`${key}type2`,
`${key}type3`,
`${key}type4`,
];
let seriesData = [
{ value: 0, name: `${key}key1` },
{ value: 0, name: `${key}key2` },
{ value: 0, name: `${key}key3` },
{ value: 0, name: `${key}key4` }
];
this.option = {
legend: {
orient: 'vertical',
left: 'left',
data: legendData,
formatter: (params) => {
return this.$t(params);
}
},
series: [{
data: seriesData,
type:'pie',
radius: '60%',
center: ['60%', '60%'],
label: {
normal: {
formatter: (params) => {
return this.$t(params.name);
}
}
}
}]
}
this.myChart.setOption(this.option);
},
watch: {
'$i18n.locale'(newValue) {
// 不需要重新設(shè)置配置項,只需要手動觸發(fā)一下setOption()
this.myChart.setOption(this.option)
}
}
}