Flask+VUE+plotly实现数据可视化

前期准备：

前期需先实现Flask+plotly输出图表，可以先查看我的上一篇博客
Flask+plotly实现数据可视化（点击查看）

安装VUE：
准备采用 npm（Nodejs下的包管理器）的方式安装vue,所以第一步安装 node , 官网下载安装即可
安装完成之后在 command prompt 运行 node -v , 便可查看到安装的nodejs 的版本，说明安装成功；

npm 是集成在node中的，也可以运行： npm -v 查看安装的npm 版本：

安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli 脚手架构建工具：
命令行运行npm install -g vue-cli然后等待安装完成
安装成功之后 运行 vue -V 可查看版本，版本出来的话说明安装成功；

创建VUE项目：

首先通过cd进入项目目录，创建一个vue项目，如下所示

vue init webpack client

? Project name client
? Project description A Vue.js project
? Author hubo <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

主要写代码的位置：/flask-vue-crud/client/src/，目录结构如下所示：

运行该程序：

npm run dev

访问http://localhost:8080 能看到前端页面

正式开始：

通过axios发送AJAX请求，安装axios，vue-plotly：

cnpm install axios --save
npm install vue-plotly

添加一个新组件
创建client/src/components/Bar.vue:
通过axios从http://192.168.10.163:5000/获取图表的数据，此步中是从已经部署完毕的Flask项目中获取数据，在上一篇文章中有讲解，如果有不懂的可以看看 点击查看，现在的ip换成了ipv4地址，方便内网的同事查看

<template>
<div style="padding: 1em 5em;">
    <div style="margin: 10px auto; width: 70%; height: ;" id="mytable">
      <div id="app">
        <select v-model="aaa" name="fruit">
          <option value="">请选择</option>
          <option value="http://192.168.10.163:5000/scatter">折线图</option>
          <option value="http://192.168.10.163:5000/bar">柱形图</option>
          <option value="http://192.168.10.163:5000/line">线形图</option>
          <option value="http://192.168.10.163:5000/pie">饼图</option>
          <option value="http://192.168.10.163:5000/bubble">泡泡图</option>
          <option value="http://192.168.10.163:5000/dot">点图</option>
          <option value="http://192.168.10.163:5000/filled">区域图</option>
          <option value="http://192.168.10.163:5000/sankey">桑基图</option>
          <option value="http://192.168.10.163:5000/table">表图</option>
          <option value="http://192.168.10.163:5000/sun">太阳图</option>
        </select>
      </div>
        <!--展现可视化图标部分-->
        <Plotly :data="msg" :display-mode-bar="false"></Plotly>
    </div>
</div>
</template>
<script>
import axios from 'axios';
import {
    Plotly } from 'vue-plotly';

export default {
   
  components: {
   
    Plotly,
  },
  name: 'Bar',
  data() {
   
    return {
   
      msg: '',
      aaa: '',
      scatter: 'http://192.168.10.163:5000/scatter',
      bar: 'http://192.168.10.163:5000/bar',
    };
  },
  watch: {
   
    aaa: {
   
      handler: function refresh() {
   
        const path = this.aaa;
        axios.get(path)
          .then((res) => {
   
            this.msg = res.data;
          })
          .catch((error) => {