Python全系列 教程
3567个小节阅读:5929.4k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
【示例】pyecharts整合Flask
xxxxxxxxxx
'''
1.Flask 应用
2.图表的数据
'''
from flask import Flask,render_template,Markup
app = Flask(__name__)
def create_chart01():
from pyecharts.charts import Bar,Line
from pyecharts import options as opts
x = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
bar =Bar()
bar.add_xaxis(x)
bar.add_yaxis('蒸发量',
[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
label_opts=opts.LabelOpts(is_show=False))
bar.add_yaxis('降水量',
[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
label_opts=opts.LabelOpts(is_show=False))
bar.set_global_opts(
title_opts=opts.TitleOpts('混合图'),
tooltip_opts=opts.TooltipOpts(is_show=True,trigger='axis',axis_pointer_type='cross'),
xaxis_opts= opts.AxisOpts(type_='category',axispointer_opts=opts.AxisPointerOpts(is_show=True,type_='shadow'))
)
bar.extend_axis(yaxis=opts.AxisOpts(
name='温度',min_=0,max_= 25,
interval = 5,
axislabel_opts = opts.LabelOpts(formatter='{value} °C')
))
line = Line()
line.add_xaxis(x)
line.add_yaxis('平均温度',
[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
yaxis_index=1,
label_opts=opts.LabelOpts(is_show=False)
)
bar.overlap(line) # 合并图
bar.render('./templates/chart01.html')
#1. 返回跳转文件
@app.route('/show_bar01')
def show_bar01():
# create_chart01()
return render_template('chart01.html')
#2. 返回一个模板
def create_chart02():
from pyecharts.charts import Bar,Line
from pyecharts import options as opts
x = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
bar =Bar()
bar.add_xaxis(x)
bar.add_yaxis('蒸发量',
[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
label_opts=opts.LabelOpts(is_show=False))
bar.add_yaxis('降水量',
[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
label_opts=opts.LabelOpts(is_show=False))
bar.set_global_opts(
title_opts=opts.TitleOpts('混合图'),
tooltip_opts=opts.TooltipOpts(is_show=True,trigger='axis',axis_pointer_type='cross'),
xaxis_opts= opts.AxisOpts(type_='category',axispointer_opts=opts.AxisPointerOpts(is_show=True,type_='shadow'))
)
bar.extend_axis(yaxis=opts.AxisOpts(
name='温度',min_=0,max_= 25,
interval = 5,
axislabel_opts = opts.LabelOpts(formatter='{value} °C')
))
line = Line()
line.add_xaxis(x)
line.add_yaxis('平均温度',
[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
yaxis_index=1,
label_opts=opts.LabelOpts(is_show=False)
)
bar.overlap(line) # 合并图
return bar
@app.route('/show_bar02')
def show_bar02():
bar = create_chart02()
return Markup(bar.render_embed())
@app.route('/get_data')
def get_opts():
bar = create_chart02()
return bar.dump_options_with_quotes()
#3. 前后分类
@app.route('/show_bar03')
def show_bar03():
return render_template('chart02.html')
if __name__ == '__main__':
# create_chart01()
# create_chart02()
app.run(debug=True)
【示例】前后端分离
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$(function(){
show_chart()
})
function show_chart(){
$.ajax({
type:'GET',
url:'http://127.0.0.1:5000/get_data',
dataType:'json',
success:function(rs){
// console.log(rs)
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(rs);
}
})
}
</script>
</body>
</html>