Echarts — 可视化练习（pie01）
不乱于心，不困于情，吾随波逐流，困囿于万世红尘深海中，一路奔波，一路烟花交错。只见一只飞蛾孤身万灯丛中迷失了身影，臃肿身躯拖累了幼稚的翅膀，苦命挣扎失落茫茫人海，寻不见森林花香处。凡情已了，不恋红尘，不念过往，只待业火焚身，燃尽罪孽，净身澄心，方见我佛。
背负着残缺不堪的肉身，何时能横渡苦海，登临彼岸。彼岸花开时，允我许一个愿望：我见你时一见钟情，你见我时一见倾心，彼此相逢一见如故，就是天意，于你我最美的缘分！
# -*- coding: utf-8
# @Time : 2020/11/11 14:28
# @Author : ZYX
# @File : pie01.py
# @software: PyCharm
from flask import Flask,render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
class Config(object):
SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123456@127.0.0.1:3306/visiable"
SQLALCHEMY_TRACK_MODIFICATIONS = True
app.config.from_object(Config)
db = SQLAlchemy(app)
class sheets(db.Model):
__tablename__ = "pie01"
id = db.Column(db.Integer,primary_key=True,autoincrement=True)
name = db.Column(db.String(64),unique=True)
number = db.Column(db.Integer)
@app.route('/')
def index():
sheets_list = sheets.query.all()
return render_template("pie01.html",sheets=sheets_list)
if __name__ == "__main__":
db.drop_all()
db.create_all()
l1 = sheets(name = "江苏",number=15)
l2 = sheets(name = "山东",number=20)
l3 = sheets(name = "四川",number=16)
l4 = sheets(name = "安徽",number=18)
l5 = sheets(name = "浙江",number=24)
l6 = sheets(name = "广东",number=8)
db.session.add_all([l1,l2,l3,l4,l5,l6])
db.session.commit()
app.run(debug=True)
<!DOCTYPE html>
<html lang="en"style="height:">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:">
<div id="container" style="height:"></div>
<script type="text/javascript" src="../static/echarts%20(1).js"></script>
<script type="text/javascript">var pom = document.getElementById("container");
var myecharts = echarts.init(pom);
var data1 = [{% for item in sheets %}'{{ item.name }}',{% endfor %}];
var data2 = [{% for item in sheets %}{{ item.number }},{% endfor %}];
var option = null;
option = {
title:{
text:"六大省份某产品销售量/万元",
top:'4%',
right: '40%',
textStyle:{
color:"#065aab",
fontStyle:'oblique', // 字体风格
fontSize:25,
fontWeight:'bold', // 加粗
fontfamily:'monospace'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' //
},
legend:{
show:true,
bottom:'5%'
},
grid:{
top:'10%',
left:'4%',
right:'4%',
bottom:'3%',
containLabel:true
},
series:[{
name:"六大省份某产品销售量/万元",
type:'pie',
roseType:"radius",
radius:[50,250], // 内外两圆的半径
center:['50%','50%'], // 距离页面左上角的占比
data:[
{value:data2[0],name:data1[0]},
{value:data2[1],name:data1[1]},
{value:data2[2],name:data1[2]},
{value:data2[3],name:data1[3]},
{value:data2[4],name:data1[4]},
{value:data2[5],name:data1[5]}
]
}]
};
if(option && typeof option=='object'){
myecharts.setOption(option);
}</script>
</body>
</html>
