Echarts — 可视化练习（radar01）
落画素描，入景山水。平仄韵达的诗意，畅悠了季节的孤漠，拾起淡漠唐风的音符，装在七弦琴上，拨弹着日月，校音着声律。花落流水春风绿，一捧桃花醉月光。一笺长长的心卷，任凭风吹过往，一夜风流记否几页故事，长鸣萧声书时光。昏沉的灯光，朦胧了善良的心灵，沉沦了一段暗黑的歌舞。迷离中，风干了人性，吹瘦了人心。
# -*- coding: utf-8
# @Time : 2020/11/11 16:43
# @Author : ZYX
# @File : radar01.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__ = "radar01"
id = db.Column(db.Integer,autoincrement=True,primary_key=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("radar01.html",sheets = sheets_list)
if __name__ == '__main__':
db.drop_all()
db.create_all()
l1 = sheets(name='血量',number=40 )
l2 = sheets(name='物攻',number=80 )
l3 = sheets(name='物抗',number=20 )
l4 = sheets(name='法攻',number=30 )
l5 = sheets(name='法抗',number=35 )
db.session.add_all([l1,l2,l3,l4,l5])
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 style="height:">
<div id="container" style="height:"></div>
</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);
data1 = [{% for item in sheets %}'{{ item.name }}',{% endfor %}];
data2 = [{% for item in sheets %} {{ item.number }},{% endfor %}];
var option = null;
option = {
title: {
text: '英雄属性图',
top:'3%',
right:'47%'
},
tooltip: {},
legend: {
data: ['百里守约']
},
radar: { // 雷达图坐标系组件
shape: 'polygon', // 雷达图背景形状 --- 默认形状等边棱形
name: { // 雷达图每个指示器名称的配置项
textStyle: {
color: '#FEF5EF',
backgroundColor: '#FF3300',
borderRadius: 4,
padding: [5, 5]
}
},
indicator: [ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
{name: data1[0], max: 100},
{name: data1[1], max: 100},
{name: data1[2], max: 100},
{name: data1[3], max: 100},
{name: data1[4], max: 100}
]
},
series: [{
name: '英雄属性图',
type: 'radar',
areaStyle: {normal: {}}, // 显示填充
data: [{
name: '五种属性',
value: [ data2[0], data2[1], data2[2], data2[3], data2[4] ]
}]
}]
};
if (option && typeof option == 'object') {
myecharts.setOption(option);
}</script>
</body>
</html>
radar: { // 雷达图坐标系组件
shape: 'polygon', // 雷达图背景形状 --- 默认形状等边棱形
name: { // 雷达图每个指示器名称的配置项
textStyle: {
color: '#FEF5EF',
backgroundColor: '#FF3300',
borderRadius: 4,
padding: [5, 5]
}
},
indicator: [ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
{name: data1[0], max: 100},
{name: data1[1], max: 100},
{name: data1[2], max: 100},
{name: data1[3], max: 100},
{name: data1[4], max: 100}
],
radius:['20%','75%'], // 增加内、外半径占比
},
