- 首先,使用 npm 或者 yarn 安装
plotly.js
和plotly.js-with-locales
:npm install plotly.js plotly.js-with-locales --save
- 在 Vue 组件中,你可以导入
plotly.js-basic-dist
和plotly.js-with-locales-dist
import Plotly from 'plotly.js-basic-dist'; import 'plotly.js-with-locales-dist';
- 创建一个 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>
- 在需要使用图表的组件中引入
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>