Echarts — 可视化练习（pie02 — 南丁格尔玫瑰图<raidus\area>）
从生命的开始，我们便和这个世界有了相遇的情分，同时又和这个世界彼此诱惑着、彼此探索着、彼此交融着、又彼此利用着……
人生的旅途上，每个人都是以独立的形象而存在的。所以，人与人之间，除了特殊的感情以外，总是无法站在同一个高度上，对除自己以外的人和事保持一致的知性。
“ 恨铁不成钢 ” “ 望子成龙 ” “ 望女成凤 ” 永远都是父母心中期盼儿女有所作为的主题。童年，很多不是很“ 优秀 ” 的，特别是那些学习成绩不好又调皮的孩子，谁没有听过父母的抱怨，谁没有挨过老师的批评，谁没有看到过同学不屑的眼神。
其实，本能的说：谁人不是在特定的环境和条件下，努力的超越着现状。只是，有比较就有鉴别，有鉴别就有等级。如果超越不了别人，我们就很难成为优秀的孩子。
走上社会，我们开始拼命的想改变一切，想出类拔萃、想光宗耀祖、想过上好日子。可是你太努力，便合不了群，容易被人孤立。如果你表现消极，别人又瞧不起，容易边缘化。所以，协调不好上下级关系，周旋不了人与人之间的微妙心性，我们就很难成为别人心中满意的人。
Python\Flask:
# -*- coding: utf-8
# @Time : 2020/11/13 10:11
# @Author : ZYX
# @File : pie02_nightingales_rose_diagram_areas.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__ = "pie02"
id = db.Column(db.Integer,autoincrement=True,primary_key=True)
hobby = db.Column(db.String(64),unique=True)
area = db.Column(db.String(64),unique=True)
number = db.Column(db.Integer)
@app.route('/')
def index():
sheets_list = sheets.query.all()
return render_template("pie02.html",sheets = sheets_list)
if __name__ == '__main__':
db.drop_all()
db.create_all()
l1 = sheets(hobby='骑马',area='内蒙古自治区',number=17)
l2 = sheets(hobby='游泳', area='海南', number=20)
l3 = sheets(hobby='名族舞', area='云南', number=9)
l4 = sheets(hobby='攀登', area='山西', number=4)
l5 = sheets(hobby='乒乓球', area='江苏', number=25)
l6 = sheets(hobby='高尔夫', area='北京', number=14)
l7 = sheets(hobby='购物', area='上海', number=11)
l = [l1,l2,l3,l4,l5,l6,l7]
db.session.add_all(l)
db.session.commit()
app.run(debug=True)
HTML:
<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:">
<div style="height: 100%;width:50%;background-color:pink ;float:" id="container1"></div>
<div style="height: 100%;width:50%;background-color:lightskyblue;float:" id="container2"></div>
<script type="text/javascript" src="../static/echarts%20(1).js"></script>
<script type="text/javascript">var bom1 = document.getElementById("container1");
var myecharts1 = echarts.init(bom1);
var bom2 = document.getElementById("container2");
var myecharts2 = echarts.init(bom2);
data1 = [{% for item in sheets %}'{{ item.hobby }}',{% endfor %}];
data2 = [{% for item in sheets %}'{{ item.area }}',{% endfor %}];
data3 = [{% for item in sheets %}{{ item.number}},{% endfor %}];
var option1 = null;
option1 = {
title:{
show:true,
top:'5%',
right: '40%',
text:'爱好数据统计图',
textStyle:{
fontWeight:'bold',
fontSize: 25
}
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)'
},
grid:{
top:'15%',
left:'4%',
right:'4%',
bottom:'5%',
containLabel:true
},
legend:{
show:true,
bottom:'3%'
},
series:[
{
name:'爱好数据统计图',
type:'pie',
roseType:'radius',
radius:[30,150],
center:['50%','50%'],
{# //position:'inside' // 显示在饼图块中间#}
avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
center:['50%','50%'],
show: true,
fontSize: '12',
fontWeight: 'bold'
}
},
data:[
{value:data3[0],name:data1[0]},
{value:data3[1],name:data1[1]},
{value:data3[2],name:data1[2]},
{value:data3[3],name:data1[3]},
{value:data3[4],name:data1[4]},
{value:data3[5],name:data1[5]},
{value:data3[6],name:data1[6]},
]
}
]
};
if (option1 && typeof option1 == 'object'){
myecharts1.setOption(option1);
}
var option2 = null;
option2 = {
title:{
show:true,
top:'5%',
right: '40%',
text:'爱好统计地区图',
textStyle:{
fontWeight:'bold',
fontSize: 25
}
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)'
},
grid:{
top:'15%',
left:'4%',
right:'4%',
bottom:'5%',
containLabel:true
},
legend:{
show:true,
bottom:'3%'
},
series:[
{
name:'爱好区域统计图',
type:'pie',
roseType:'area',
radius:[30,150],
center:['50%','50%'],
data:[
{value:data3[0],name:data2[0]},
{value:data3[1],name:data2[1]},
{value:data3[2],name:data2[2]},
{value:data3[3],name:data2[3]},
{value:data3[4],name:data2[4]},
{value:data3[5],name:data2[5]},
{value:data3[6],name:data2[6]},
]
}
]
};
if (option2 && typeof option2 == 'object'){
myecharts2.setOption(option2);
}</script>
</body>
</html>
效果展示：
