在vue中使用plotly.js-with-locales的例子

当在Vue中使用Plotly.js-with-locales时，你需要先安装依赖项并导入所需的模块。下面是一个简单的示例：

1. 首先，使用 npm 或者 yarn 安装 `plotly.js` 和 `plotly.js-with-locales`：

npm install plotly.js plotly.js-with-locales --save

2. 在 Vue 组件中，你可以导入 `plotly.js-basic-dist` 和 `plotly.js-with-locales-dist`:

import Plotly from 'plotly.js-basic-dist';
import 'plotly.js-with-locales-dist';

3. 创建一个 Vue 组件，例如 `PlotlyChart`：

<template>
  <div>
    <div id="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'PlotlyChart',
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 使用 Plotly 创建图表
      Plotly.newPlot('chart', [{
        x: [1, 2, 3],
        y: [2, 4, 6],
        type: 'scatter'
      }]);

      // 设置本地化语言
      Plotly.setPlotConfig({
        locale: 'zh-CN'
      });
    }
  }
};
</script>

4. 在需要使用图表的组件中引入 `PlotlyChart` 组件：

<template>
  <div>
    <h1>Plotly.js with Locales Example</h1>
    <PlotlyChart />
  </div>
</template>

<script>
import PlotlyChart from './PlotlyChart.vue';

export default {
  name: 'App',
  components: {
    PlotlyChart
  }
};
</script>

这个例子创建了一个简单的散点图，并设置了本地化语言为中文（zh-CN）。你可以根据需要修改数据和图表类型。记得在实际项目中，你可能需要进一步优化和自定义图表。