echarts+flask+mysql数据可视化多图超实用!!!
最近在学习echarts,写一篇文吧,第一篇~~~~
servers.py
from flask import Flask, render_template
import pymysql
app = Flask(__name__)
@app.route("/")
def my_echart():
# 连接数据库
conn = pymysql.connect(host='127.0.0.1', user='root', password='123456', db='mysql')
cur = conn.cursor()
sqlmale = ' SELECT count(num) FROM people_flow where sex=1 ' # 男
sqlfemale = ' SELECT count(num) FROM people_flow where sex=0' # 女
sqls = ' SELECT num FROM people_flow '#随意的数据int
cur.execute(sqlmale)
maleresult = cur.fetchall()
cur.execute(sqlfemale)
femaleresult = cur.fetchall()
cur.execute(sqls)
results = cur.fetchall()
male_num = maleresult[0][0]
female_num = femaleresult[0][0]
num1=[]
for result in results:
num1.append(result[0])
cur.close()
conn.close()
#print(male_num)
#print(female_num)
#print(num1)测试一下
return render_template('servers.html', male_num=male_num,
female_num=female_num,num1=num1)
if __name__ == '__main__':
app.run(debug=True)
servers.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bar</title>
<!-- 引入 echarts.js -->
<script src="{
{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
<div align="center">
<button onclick="makePie()">饼图</button>
<button onclick="makeBar()">柱状图</button>
<button onclick="makeLine()">线形图</button>
<button onclick="makeRadar()">雷达图</button>
<br><br>
<hr>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div align="center">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 获取变量
var mannum = "{
{male_num }}";
var womennum = "{
{ female_num }}";
// 饼图配置文件
option_pie = {
title: {
text: '人流量统计',
subtext: '2019',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['男', '女']
},
series: [
{
name: '性别',
type: 'pie',
radius: '55%',
center: ['40%', '60%'],
data: [
{
value: [mannum], name: '男'},
{
value: [womennum], name: '女'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: ['rgb(131,175,155)', 'rgb(252,157,154)', 'rgb(249,205,173)', 'rgb(200,200,169)',]
};
// 柱状图配置文件
option_bar = {
title: {
text: '人流量统计',
subtext: '2019',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [{
% for m in num1 %}'{
{ m }}',{
% endfor %}]
}],
color: ['rgb(131,175,155)', 'rgb(252,157,154)', 'rgb(249,205,173)', 'rgb(200,200,169)',]
};
//折线图配置文件
option_line = {
title: {
text: '人流量统计',
subtext: '2019',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: [{
% for m in num1 %}'{
{ m }}',{
% endfor %}]
}],
color: ['rgb(131,175,155)', 'rgb(252,157,154)', 'rgb(249,205,173)', 'rgb(200,200,169)',]
};
//雷达图配置文件
option_radar={
title: {
text:'水果',
x:'center'},
tooltip:{
},
legend: {
data: ['水果'],
left:'left'
},
radar: {
indicator: [
{
name: '苹果', max: 10},
{
name: '香蕉', max: 10},
{
name: '葡萄', max: 10},
{
name: '李子', max: 10},
{
name: '芒果', max: 10},
{
name: '梨', max: 10}
],
},
series:[{
name:'水果',
type:'radar',
data: [{
name:'水果',
value:[1,2,3,4,5,6]
}],
}]
}
function makePie() {
myChart.clear();
myChart.setOption(option_pie);//setOption方法生成一个简单的饼状图
}
// 画柱状图函数，就是setoption(pie的配置文件)
function makeBar() {
myChart.clear();
myChart.setOption(option_bar);//setOption方法生成一个简单的饼状图
}
function makeLine() {
myChart.clear();
myChart.setOption(option_line);//setOption方法生成一个简单的饼状图
}
function makeRadar() {
myChart.clear();
myChart.setOption(option_radar);//setOption方法生成一个简单的雷达图
}
// 初始化选择画饼图
makePie()
</script>
</body>
</html>
运行结果如下图:
