Vue-31-通过flask接口提供的数据使用plotly.js绘图(三)
文章目录
- 1 创建项目
-
- 1.1 新建工程
- 1.2 App.vue
- 1.3 Show.vue
- 1.4 设置字体颜色
-
- 1.4.1 设置标题字体颜色
- 1.4.2 设置悬停标签字体颜色
- 1.5 去除图表背景色
- 1.6 切换页面背景色
- 2 应用示例
-
- 2.1 切换页面背景色
- 2.2 去除图表背景色
- 2.3 文本元素适应主题颜色
- 2.4 切换背景色时自动更新图表
绘图时，切换页面的背景色，自动更新图表，正常渲染显示。
1 创建项目
1.1 新建工程
方式一:使用vue/cli脚手架
CMD>vue create 项目名称方式二:使用vite创建Vue3项目
注意node.js的版本要是最新的
CMD>npm create vue@latest采用方式二
CMD>d:
CMD>cd CODEVue
CMD>npm create vue@latest
项目名:vue33_demo
什么都不选，直接回车，创建一个完全为空的项目。
CMD>cd vue33_demo
CMD>npm install
(1)安装npm install plotly.js-dist-min。
推荐使用plotly.js-dist-min包体积更小，适合生产环境。
(2)运行npm run dev。
(3)在src下新建文件夹components，在文件夹下新建Show.vue文件。
1.2 App.vue
<script setup>import Show from './components/Show.vue';
</script><template><Show />
</template><style scoped></style>