legend的数据需要与 series的数据中的 name保持一一对应的关系,可以将这两处都传入国际化对应的 key,在 legend.formatter和 series.label.formatter使用回调函数的形式返回国际化处理后的显示值
Tips:在语言切换时,需要点击一个图例才会触发legend和 series的切换,需要通过 watch监听,手动触发一下 setOption(),不需要重新设置配置项
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) {
// 不需要重新设置配置项,只需要手动触发一下setOption()
this.myChart.setOption(this.option)
}
}
}
网友评论