Echarts 图例、坐标轴数据(i18n)国际化

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)
        }
    }
}

来自 iView & vue-i18n & echarts遇到的问题和解决方法

你可能感兴趣的:(Echarts 图例、坐标轴数据(i18n)国际化)