前期准备：

前期需先实现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 <xxxxxxxx@qq.com>
? 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) => {console.error(error);});},},},methods: {getMessage() {const path = 'http://192.168.10.163:5000/scatter';axios.get(path).then((res) => {this.msg = res.data;}).catch((error) => {console.error(error);});},},created() {this.getMessage();},
};
</script>

上面Bar.vue中添加了watch监听option的变化，从而从后端获取对应的图形数据。

再添加一个新组件，并把Bar导入，模拟Bar为功能组件，此时新建的Test.vue组件为前端组件。

<template><div id="vue_det"><bar></bar><router-view/></div>
</template><script>
import Bar from '@/components/Bar';export default{components: {Bar,},data() {return {// 这里不要忘记return// 这里可以定义初始的变量};},created() {// 当我们的组件加载完成时，需要执行的内容.created是vuejs中的钩子函数之一this.getData(); // 函数的调用},methods: {// 定义函数的地方getData() {// console.log(r);}, // 可以定义多个函数},
};
</script><style>
</style>

更新client/src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Bar from '@/components/Bar';
import Test from '@/components/Test';Vue.use(Router);export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld,},{path: '/bar',name: 'Bar',component: Bar,},{path: '/test',name: 'Test',component: Test,},],mode: 'history',
});

上面的mode: 'history’是为了让 URL 变成http://localhost:8080/Test的形式。如果，不加该设置，默认的 URL 为http://localhost:8080/#/Test的形式。

访问http://localhost:8080/Test能看到图表

补充：

相对上一篇的Flask中代码有些许变动，整体上是做了模块化，增加了生成图形数据的函数，具体直接上代码
app.py

from flask import Flask
from flask_cors import CORS
from flask import Flask, render_template
from models import create_bar
app = Flask(__name__)
CORS(app)@app.route('/scatter', methods=['GET'])
def scatter():data = create_bar.create_scatter()return data@app.route('/line')
def line():data = create_bar.create_line()return data@app.route('/bar')
def bar():data = create_bar.create_bar()return data@app.route('/pie')
def pie():data = create_bar.create_pie()return data@app.route('/bubble')
def bubble():data = create_bar.create_bubble()return data@app.route('/dot')
def dot():data = create_bar.create_dot()return data@app.route('/filled')
def filled():data = create_bar.create_filled()return data@app.route('/sankey')
def sankey():data = create_bar.create_sankey()return data@app.route('/table')
def table():data = create_bar.create_table()return data@app.route('/sun')
def sun():data = create_bar.create_sun()return dataif __name__ == '__main__':app.run(host='0.0.0.0',port='5000',debug=True)

create_bar.py

import plotly as py
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
import numpy as np
import jsondef create_line():df = px.data.gapminder().query("continent=='Oceania'")fig = px.line(df, x="year", y="lifeExp", color='country')jsfig=fig.to_json()return jsfigdef create_scatter():data1 = {'x':[1,2,3,4],'y':[16,5,11,9],'type':'scatter'}data2 = {'x':[1,2,3,4],'y':[10,15,13,17],'type':'scatter'}data =[data1,data2]layout = go.Layout(title='折线图可视化作图',)fig = go.Figure(data=data, layout=layout)jsfig=fig.to_json()return jsfigdef create_bar():animals=['giraffes', 'orangutans', 'monkeys']fig = go.Figure(data=[go.Bar(name='SF Zoo', x=animals, y=[20, 14, 23]),go.Bar(name='LA Zoo', x=animals, y=[12, 18, 29])],layout=go.Layout(title='柱形图可视化作图',))# Change the bar modefig.update_layout(barmode='group')jsfig=fig.to_json()return jsfigdef create_pie():df = px.data.gapminder().query("year == 2007").query("continent == 'Europe'")df.loc[df['pop'] < 2.e6, 'country'] = 'Other countries' # Represent only large countriesfig = px.pie(df, values='pop', names='country', title='欧洲各国人口占比')jsfig=fig.to_json()return jsfigdef create_bubble():df = px.data.gapminder()fig = px.scatter(df.query("year==2007"), x="gdpPercap", y="lifeExp",size="pop", color="continent",hover_name="country", log_x=True, size_max=60)jsfig=fig.to_json()return jsfigdef create_dot():schools = ["Brown", "NYU", "Notre Dame", "Cornell", "Tufts", "Yale","Dartmouth", "Chicago", "Columbia", "Duke", "Georgetown","Princeton", "U.Penn", "Stanford", "MIT", "Harvard"]n_schools = len(schools)men_salary = [72, 67, 73, 80, 76, 79, 84, 78, 86, 93, 94, 90, 92, 96, 94, 112]women_salary = [92, 94, 100, 107, 112, 114, 114, 118, 119, 124, 131, 137, 141, 151, 152, 165]df = pd.DataFrame(dict(school=schools*2, salary=men_salary + women_salary,gender=["Men"]*n_schools + ["Women"]*n_schools))# Use column names of df for the different parameters x, y, color, ...fig = px.scatter(df, x="salary", y="school", color="gender",title="性别收入差距",labels={"salary":"Annual Salary (in thousands)"} # customize axis label)jsfig=fig.to_json()return jsfigdef create_filled():df = px.data.gapminder()fig = px.area(df, x="year", y="pop", color="continent",line_group="country")jsfig=fig.to_json()return jsfigdef create_sankey():fig = go.Figure(go.Sankey(arrangement = "snap",node = {"label": ["A", "B", "C", "D", "E", "F"],"x": [0.2, 0.1, 0.5, 0.7, 0.3, 0.5],"y": [0.7, 0.5, 0.2, 0.4, 0.2, 0.3],'pad':10},  # 10 Pixelslink = {"source": [0, 0, 1, 2, 5, 4, 3, 5],"target": [5, 3, 4, 3, 0, 2, 2, 3],"value": [1, 2, 1, 1, 1, 1, 1, 2]}))jsfig=fig.to_json()return jsfigdef create_table():fig = go.Figure(data=[go.Table(header=dict(values=['A Scores', 'B Scores'],line_color='darkslategray',fill_color='lightskyblue',align='left'),cells=dict(values=[[100, 90, 80, 90], # 1st column[95, 85, 75, 95]], # 2nd columnline_color='darkslategray',fill_color='lightcyan',align='left'))])jsfig=fig.to_json()return jsfigdef create_sun():data = dict(character=["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],parent=["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],value=[10, 14, 12, 10, 2, 6, 6, 4, 4])fig =px.sunburst(data,names='character',parents='parent',values='value',)jsfig=fig.to_json()return jsfig

Flask+VUE+plotly实现数据可视化相关推荐

通过plotly.express库和Flask框架部署企鹅数据可视化的网页
这里不废话,直接入主题. 1.企鹅数据表下载网址说明:阿里云天池提供大量免费的数据表,学习数据可视化的朋友可以自己去下载. 南极洲企鹅数据表下载地址 2.Flask框架的项目的文件目录如图这里主要 ...
用flask+echarts打造一个数据可视化大屏幕
文章目录 1. big_screen项目说明 2. big_screen项目文件布局 3. 四大模块核心代码分析 3.1 数据准备模块 3.2 flask网页服务模块 3.3 网页视图模块 a. 网页 ...
基于plotly数据可视化_如何使用Plotly进行数据可视化
基于plotly数据可视化 The amount of data in the world is growing every second. From sending a text to clicki ...
基于 SpringBoot+Vue 的开源数据可视化分析工具
简介 DataEase 是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化.DataEase 支持丰富的数据源连接,能够通过拖拉拽方式快速制作图表,并可以方便的与 ...
Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
vue中使用数据可视化
1.多坐标系就是一个图表实现展现多个坐标系,一个坐标系就是一个grid 这里主要用到关键几个属性:grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndex g ...
（毕设1）爬虫+mysql+flask+echarts实现网站数据可视化(附源码)
目录 1. 项目要求与内容 ?2.数据爬取 2.1分析url,网页源码 2.2编写代码 2.3 数据清洗 3.数据存储 3.1?mysql中需要建立的6张表 3.2 建表语句 3.3将2中清洗后的数据 ...
vue + echarts实现数据可视化统计页面
1.该项目自行下载element-ui.moment.echarts等vue的相关依赖包: 2.该项目里面的echarts样式主题"walden.js"是个人自己配置的样式,可到官 ...
echarts+vue 实现大数据可视化（全屏）
大数据可视化(全屏) 实现效果 (在浏览器上按f11全屏预览) 预览地址: https://2468901709.github.io/echarts–bigdata/ 完整vue项目地址: https ...

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

前期准备：

创建VUE项目：

正式开始：

补充：

Flask+VUE+plotly实现数据可视化相关推荐

最新文章

热门文章