Vue结合Python实现数据可视化

目录

效果展示

代码实现

●Python

这里使用的是Flask框架

在该路由返回分析的数据（具体的分析数据的处理逻辑就不贴代码了）

这里主要涉及一个跨域问题，需要安装flask-cors库来解决

pip install flask-cors 

然后进行如下配置即可

CORS(app, resources=r'/*')
if __name__ == '__main__':
    app.run()

这里我返回的数据是这样的

[
    {
        "name":"A\u80a1 \u94dc\u9675\u6709\u8272",
        "total_asset_turnover":141.52,
        "accounts_receivable_turnover":5.31,
        "inventory_turnover_days":42.6
    },
    {
        "name":"A\u80a1 \u6cf0\u5c71\u77f3\u6cb9",
        "total_asset_turnover":192.58,
        "accounts_receivable_turnover":0.22,
        "inventory_turnover_days":41.08
    },
    {
        "name":"A\u80a1 \u5b8f\u8fbe\u80a1\u4efd",
        "total_asset_turnover":284.09,
        "accounts_receivable_turnover":4.05,
        "inventory_turnover_days":59.37
    },
    {
        "name":"A\u80a1 \u4e9a\u5b9d\u836f\u4e1a",
        "total_asset_turnover":526.93,
        "accounts_receivable_turnover":59.97,
        "inventory_turnover_days":172.66
    },
    {
        "name":"A\u80a1 \u4e2d\u901a\u5ba2\u8f66",
        "total_asset_turnover":799.11,
        "accounts_receivable_turnover":273.62,
        "inventory_turnover_days":46.68
    }
]

●Vue

Vue代码就比较简单了，这里我使用的是element-ui非常方便，具体如下：

<template>
  <div>
    <template>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed
          prop="name"
          label="名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="total_asset_turnover"
          label="总资产周转天数"
          :formatter="formatData"
          width="150">
        </el-table-column>
        <el-table-column
          prop="accounts_receivable_turnover"
          :formatter="formatData"
          label="应收账款周转天数"
          width="150">
        </el-table-column>
        <el-table-column
          prop="inventory_turnover_days"
          :formatter="formatData"
          label="存货周转天数"
          width="150">
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
          tableData: [],
          loading:true
        }
    },
    methods:{
        initData(){
            this.$axios({
              url:`http://127.0.0.1:5000/getStock`
            }).then(res=>{
                console.log(res)
                this.tableData = res.data
                this.loading = false
            })
        },
        formatData(row, column, cellValue, index){
            return cellValue + "天"
        }
    },
    mounted() {
        this.initData()
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'

Vue.prototype.$axios = axios

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')