- 首先,使用 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>
在Vue中使用Plotly.js-with-locales
最新推荐文章于 2023-08-08 15:24:54 发布