python:pandas+echarts+flask框架数据可视化
文章目录
- 前言
- 步骤
- 1.需要使用的库
- 2.完整代码
前言
数据可视化，做成动态图
echarts官网：这里面有很多做好了动态图模板
具体实施：用flask框架，用pandas库读取准备好的表格数据，将这个数据传入到动态图中，就可以了。
成品如下图：
步骤
1.需要使用的库
from flask import Flask,render_template
import pandas as pd
安装pandas：pip install pandas
安装flask：pip install flask
2.完整代码
这里选的是模板：
数据：
代码如下（示例）：
from flask import Flask,render_template
import pandas as pdapp = Flask(__name__)@app.route('/')
def hello():df = pd.read_csv("城市经济.csv", sep=',')#读取表格da = df.to_dict('list')形成字典keys = ','.join(da.keys())#变成列表p = keys.split(',')p0 = da["area"]p1 = da["GDP"]p2 = da["人均GDP"]p3 = da["工业增加值"]p4 = da["第三产业增加值"]p5 = da["固定资产投资"]p6 = da["基本建设投资"]p7 = da["社会消费品零售总额"]p8 = da["海关出口总额"]p9 = da["地方财政收入"]return render_template('login.html',data1=p[1:-1],data2=p0,data3=p1,data4=p2,data5=p3,data6=p4,data7=p5,data8=p6,data9=p7,data10=p8,data11=p9,name1=p[1],name2=p[2],name3=p[3],name4=p[4],name5=p[5],name6=p[6],name7=p[7],name8=p[8],name9=p[9])#传入login网页{{}}对应的值if __name__ == "__main__":app.run(port=5001)
templates文件下HTML：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1-rc1/echarts-en.js"></script>
</head>
<body><div id="main" style="width: 800px;height: 600px;background: pink"></div><script>var main = echarts.init(document.getElementById("main"))var option = {tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: {{data1|tojson}}},grid: {left: '3%',right: '-4%',bottom: '3%',containLabel: true},xAxis: {type: 'value'},yAxis: {type: 'category',data: {{data2|tojson}}},series: [{name: {{name1|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data3|tojson}}},{name: {{name2|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data4|tojson}}},{name: {{name3|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data5|tojson}}},{name: {{name4|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data6|tojson}}},{name: {{name5|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data7|tojson}}},{name: {{name6|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data8|tojson}}},{name: {{name7|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data9|tojson}}},{name: {{name8|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data10|tojson}}},{name: {{name9|tojson}},type: 'bar',stack: '总量',label: {show: true,position: 'insideRight'},data: {{data11|tojson}}}]};main.setOption(option)</script></body>
</html>
可能有些麻烦，但是效果出来了
笔者也是看示例代码：示例代码网址
还有中src是在https://www.bootcdn.cn/echarts/找到的
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！