vue-echarts国际化

最新推荐文章于 2025-04-03 08:40:11 发布

Zhibang Yue

最新推荐文章于 2025-04-03 08:40:11 发布

阅读量1.2k

点赞数 6

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/Repre/article/details/142720830

版权

vue-echarts国际化

一、任务需求

实现echarts图表的国际化（i18n），要去随着语言的切换，echarts图表的表头、横纵轴、图例等部分也能随之进行切换。

二、开发环境

    "vue": "^3.4.29",
    "vue-echarts": "^7.0.0",
    "vue-i18n": "^9.13.1",

三、基本思路

1. 基本思路

监听locale的变化，修改option和init-options的配置，并重新渲染图表。

2. 文档参考

2.1 图表基本信息

Echarts文档

可见图表语言的配置（locale）是在初始化时进行的。下面是参数详解：

内置的两种语言是中文和英文，其他语言需要额外注册。

2.2 图表特殊信息

标题这种自定义文本是特殊信息，需要据实际情况维护。

Echarts文档

可以看到，标题title是在option中被定义的。

所以为使得标题能够变化，应当在重新渲染图表前修改option中title的值。

四、代码展示

1. 国际化的配置

以下是组件中的代码片段：

<script lang="ts" setup>
import {useI18n} from "vue-i18n";
// 国际化t函数，用于获取国际化文本
// 例如：t('charts.heatmap') 获取charts.heatmap对应的国际化文本
// locale.value是国际化的值
const {t, locale} = useI18n();
</script>

上面这一部分是导入相关函数。

// 初始化配置
const init_options = ref({
  locale: locale.value == "zhCn" ? ' ZH' : "EN",
})

上面这一部分用于设定初始化配置，根据locale的不同而选择语言，而locale可能的取值是自己在i18n做的全局设置，如下所示。

import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import zhCn from './locales/zh-cn.json';

const messages = {
  en,
  zhCn
};

const i18n = createI18n({
  legacy: false, // you must specify 'legacy: false' option
  locale: 'zhCn', // 设置默认语言
  fallbackLocale: 'en',
  messages,
});

export default i18n;

我这里预设了en和zhCn两个值，所以在init_options里做了这样的逻辑判断。

2. 初始化图表

除了指定上面的init_options，还需要option来设置标题、数据等。

先声明option，可以参考Echarts文档。

我这里是一个热力图，option如下所示：

// 热力图标题
const title = t('charts.heatmap')
// echarts配置
const option = ref({
  title: {
    top: 0,
    left: 'center',
    text: title,
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params: object) {
      const color = params.color; // 获取当前数据点的颜色
      return `
        <div style="display: flex; align-items: center;">
          <span style="display: inline-block; width: 10px; height: 10px; background-color: ${color}; border-radius: 50%; margin-right: 5px;"></span>
          ${params.value[0]}聊天${params.value[1]}条
        </div>
      `;
    }
  },
  visualMap: {
    // 颜色映射
    min: 0,
    max: 10000,
    inRange: {
      color: ['#fbe88d', '#d94e5d'] // 从浅黄到深红的颜色渐变
    },
    // 数量映射
    pieces: [
      {min: 0, max: 100, label: '< 100'},
      {min: 100, max: 200, label: '100 - 200'},
      {min: 200, max: 300, label: '200 - 300'},
      {min: 300, max: 400, label: '300 - 400'},
      {min: 400, max: 500, label: '400 - 500'},
      {min: 500, max: 10000, label: '> 500'},
    ],
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65
  },
  calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: ['auto', 13],
    range: '2024',
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: {show: true}
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: data.value,
  }
});

然后在template 标签中使用v-chart即可。

具体配置可以参看Vue-echarts的文档，这里不再赘述。

  <v-chart class="chart" :option="option" :init-options="init_options" ref="vchart"/>

3. 监听locale变化

// 监听国际化语言变化
// 如果语言变化，重新设置echarts的locale，导致图表基础信息语言变化（图例、横纵轴）
watch(
    () => locale.value,
    () => {
      // 更改初始化配置，语言是在初始化时配置的
      init_options.value.locale = locale.value === 'zhCn' ? 'ZH' : 'EN';
      option.value.title.text = t('charts.heatmap');
      // 重新渲染图表
      (vchart.value as any)?.setOption(option.value);
    }
);

监听locale.value的变化即可，它是一个全局变量，它的变化是由其他组件引起的。

在变化时对应修改init_options和option的某项即可，然后使用setOption方法，重新渲染图表。

这样就可以实现我们需要的效果了。