vue echart i18n 国际化处理

项目：数据大屏，采用vue2+echart+i18n

版本：

• node :14.18.1
• vue: 2.5.2
• i18n：7.3.4
• echarts: 4.9.0

1.安装依赖

npm install i18n

2.配置

main.js

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh-CN',    // 语言标识
  messages: {
    'zh-CN': require('./../lang/zh.js'),   // 中文语言包
    'en-US': require('./../lang/en.js')    // 英文语言包
  }
})
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  components: { App },
  template: '<App/>'
})

lang\zh.js

export const common = {
    chinese: '中文',
    english: '英文',
}

lang\en.js

export const common = {
	chinese: 'Chinese',//中文
    english: 'English',//英文
}

index.vue

<template>
	<div>
	  <el-select
        @change="changeLangEvent"
        v-model="localLan">
        <el-option
          v-for="item in lanOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value" >
        </el-option>
      </el-select>
      <div class="color-label">
          {{ $t("common.totalnumberusers") }}
      </div>
	</div>
</template>

 data() {
    return {
 		localLan: localStorage.getItem("lang") || "zh-CN",
 	}
 },
computed: {
    lanOptions() { //下拉选项的文字是会随着语言变动的，所以要放在computed里面
      return [
        {
          value: "zh-CN",
          label: this.$t("common.chinese"),
        },
        {
          value: "en-US",
    	  label: this.$t("common.english"),
        },
      ];
},
methods: {
    //切换语言
    changeLangEvent(val) {
      localStorage.setItem("lang", val);
      this.localLan = val;
      this.$i18n.locale = val;
    },
}

chart.vue

props: {
   chartData: {
     type: Object,
     default: () => {},
   },
 },
 mounted() {
   this.initChart();
 },
 watch: {
   "$i18n.locale"() { //监听语言的变化，每次变动都要重新渲染图表
     this.initChart(); 
},
computed: { //图表的数据需要使用计算属性，不然切换语言不会更新视图
   legendData() { 
     return [
       this.$t("common.numberenterprises"),
       this.$t("common.numberusers"),
     ];
   }
 },
methods: {
  initChart() {
     this.chart = echarts.init(document.getElementById("bd-chart-b"));
     this.setOptions();
   },
   setOptions() {
     const { themeColor, list } = this;
     const colorList = [themeColor, "255,255,255"];
     this.chart.setOption({})
   }
}