How to use Vue to implement a multi-language statistical chart interface

How to use Vue to implement a multi-language statistical chart interface

In today's global era, multi-language support has become a very important feature. Whether targeting the domestic market or the international market, an application will be more competitive if it can provide multi-language support. In this article, we will explore how to use the Vue framework to implement a multi-language statistical chart interface.

1. Project preparation

Before we start, we need to prepare a Vue project. If you have not created a Vue project, you can use the following command to create a new Vue project:

vue create stats-chart

After the creation is completed, enter the project folder and run the following command to install the corresponding dependencies:

cd stats-chart
npm install vue-i18n
npm install echarts vue-echarts

2. Multi-language settings

1. Configuration language file

Create a new folder in the root directory of the projectlang, Then create a new file zh-CN.js in the lang folder. In this file, we define multi-language key-value pairs, for example:

export default {
  title: '统计图表',
  xAxis: '横轴',
  yAxis: '纵轴',
  data: '数据',
};

Similarly, create a new file en-US.js in the lang folder , and define the corresponding English translation:

export default {
  title: 'Stats Chart',
  xAxis: 'X-Axis',
  yAxis: 'Y-Axis',
  data: 'Data',
};

2. Configure vue-i18n

Create a new file in the root directory of the projecti18n. js, and configure vue-i18n in it:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhCN from './lang/zh-CN';
import enUS from './lang/en-US';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  },
});

export default i18n;

In this configuration file, we will zh-CN.js and en -US.js Import, and set the default value of locale to zh-CN. You can set the default language according to your needs.

3. Use multiple languages

In main.js under the src folder, import and use i18n Configuration:

import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n';

new Vue({
  i18n,
  render: (h) => h(App),
}).$mount('#app');

Now, we have completed the multi-language settings.

3. Create a statistical chart component

1. Create a Chart component

components# under the src folder ## Create a new component file Chart.vue in the folder and write the following code in it:

<template>
  <div>
    <h1>{{ $t('title') }}</h1>
    <div id="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({
      title: {
        text: this.$t('title'),
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
      }],
    });
  },
};
</script>

The component uses multiple languages

App.vue file, import the Chart.vue component and use multi-language:

<template>
  <div id="app">
    <Chart />
  </div>
</template>

<script>
import Chart from './components/Chart.vue';

export default {
  components: {
    Chart,
  },
};
</script>

The above is the detailed content of How to use Vue to implement a multi-language statistical chart interface. For more information, please follow other related articles on the PHP Chinese website!