index.html
{% extends "base.html" %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>数据分析</h1>
</div>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px; auto"></div>
<div id="main2" style="height:600px; auto; background-color: #333">
<div id="s1" style="height:600px; auto">
</div>
</div>
<!-- ECharts单文件引入 -->
<script src="../static/echarts.js"></script>
<!-- 主题文件引入 -->
<script src="../static/dark.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '得分次数图',
subtext: '数据来源:www.stat-nba.com'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['次数']
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
formatter: '{value}分',
rotate: 45,
},
data: {{ a }}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} 次数'
}
}
],
series: [
{
name: '次数',
type: 'bar',
data:{{ b }},
markPoint: {
data: [
{type: 'max', name: '最大次数'},
{type: 'min', name: '最小次数'}
]
}
},
]
}
// 为echarts对象加载数据
myChart.setOption(option);
</script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart1 = echarts.init(document.getElementById('s1'),'dark');
option = {
legend: {
data: ['03-04赛季', '04-05赛季', '05-06赛季', '06-07赛季', '07-08赛季'
, '08-09赛季', '09-10赛季', '10-11赛季', '11-12赛季', '12-13赛季', '13-14赛季'
, '14-15赛季', '15-16赛季'],
textStyle:{
fontSize:8,
}
},
radar: [
//03-04赛季
{
indicator: [
{name: '得分', max: 28.0},
{name: '助攻', max: 9.2},
{name: '篮板', max: 13.9},
{name: '抢断', max: 2.4},
{name: '盖帽', max: 3.6}
],
center: ['10%', '25%'],
radius: 80,
name:{
textStyle: {
color:'#67d15d',
fontSize: 6
}
}
},
//04-05赛季
{
indicator: [
{name: '得分', max: 30.7},
{name: '助攻', max: 11.5},
{name: '篮板', max: 13.5},
{name: '抢断', max: 2.9},
{name: '盖帽', max: 3.0}
],
center: ['30%', '25%'],
radius: 80,
name:{
textStyle: {
color:'#d1c373',
fontSize: 6
}
}
},
//05-06赛季
{
indicator: [
{name: '得分', max: 35.4},
{name: '助攻', max: 10.5},
{name: '篮板', max: 12.7},
{name: '抢断', max: 2.3},
{name: '盖帽', max: 3.2}
],
center: ['50%', '25%'],
radius: 80,
name:{
textStyle: {
color:'#d16a62',
fontSize: 6
}
}
},
//06-07赛季
{
indicator: [
{name: '得分', max: 31.6},
{name: '助攻', max: 11.6},
{name: '篮板', max: 12.8},
{name: '抢断', max: 2.1},
{name: '盖帽', max: 3.3}
],
center: ['70%', '25%'],
radius: 80,
name:{
textStyle: {
color:'#d170b6',
fontSize: 6
}
}
},
//07-08赛季
{
indicator: [
{name: '得分', max: 30.0},
{name: '助攻', max: 11.6},
{name: '篮板', max: 14.2},
{name: '抢断', max: 2.7},
{name: '盖帽', max: 3.6}
],
center: ['90%', '25%'],
radius: 80,
name:{
textStyle: {
color:'#8f45d1',
fontSize: 6
}
}
},
//08-09赛季
{
indicator: [
{name: '得分', max: 30.2},
{name: '助攻', max: 11.0},
{name: '篮板', max: 13.8},
{name: '抢断', max: 2.8},
{name: '盖帽', max: 2.9}
],
center: ['10%', '55%'],
radius: 80,
name:{
textStyle: {
color:'#4048d1',
fontSize: 6
}
}
},
//09-10赛季
{
indicator: [
{name: '得分', max: 30.1},
{name: '助攻', max: 11.0},
{name: '篮板', max: 13.2},
{name: '抢断', max: 2.3},
{name: '盖帽', max: 2.8}
],
center: ['30%', '55%'],
radius: 80,
name:{
textStyle: {
color:'#d11872',
fontSize: 6
}
}
},
//10-11赛季
{
indicator: [
{name: '得分', max: 27.7},
{name: '助攻', max: 11.4},
{name: '篮板', max: 15.2},
{name: '抢断', max: 2.4},
{name: '盖帽', max: 2.6}
],
center: ['50%', '55%'],
radius: 80,
name:{
textStyle: {
color:'#d1c80e',
fontSize: 6
}
}
},
//11-12赛季
{
indicator: [
{name: '得分', max: 28.0},
{name: '助攻', max: 11.7},
{name: '篮板', max: 14.5},
{name: '抢断', max: 2.5},
{name: '盖帽', max: 3.7}
],
center: ['70%', '55%'],
radius: 80,
name:{
textStyle: {
color:'#09e8ac',
fontSize: 6
}
}
},
//12-13赛季
{
indicator: [
{name: '得分', max: 28.7},
{name: '助攻', max: 9.7},
{name: '篮板', max: 12.4},
{name: '抢断', max: 2.4},
{name: '盖帽', max: 3.0}
],
center: ['90%', '55%'],
radius: 80,
name:{
textStyle: {
color:'#9c8eca',
fontSize: 6
}
}
},
//13-14赛季
{
indicator: [
{name: '得分', max: 32.0},
{name: '助攻', max: 10.7},
{name: '篮板', max: 13.7},
{name: '抢断', max: 2.5},
{name: '盖帽', max: 2.8}
],
center: ['10%', '85%'],
radius: 80,
name:{
textStyle: {
color:'#a6fdaa',
fontSize: 6
}
}
},
//14-15赛季
{
indicator: [
{name: '得分', max: 28.1},
{name: '助攻', max: 10.2},
{name: '篮板', max: 15.0},
{name: '抢断', max: 2.3},
{name: '盖帽', max: 2.9}
],
center: ['30%', '85%'],
radius: 80,
name:{
textStyle: {
color:'#faa60d',
fontSize: 6
}
}
},
//15-16赛季
{
indicator: [
{name: '得分', max: 30.1},
{name: '助攻', max: 11.7},
{name: '篮板', max: 14.8},
{name: '抢断', max: 2.1},
{name: '盖帽', max: 3.7}
],
center: ['50%', '85%'],
radius: 80,
name:{
textStyle: {
color:'#72ACD1',
fontSize: 6
}
}
}
],
series: [
//03-04赛季
{
name: '03-04赛季',
type: 'radar',
radarIndex: 0,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c1 }},
name : '03-04赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//04-05
{
name: '04-05赛季',
type: 'radar',
radarIndex: 1,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c2 }},
name : '04-05赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//05-06
{
name: '05-06赛季',
type: 'radar',
radarIndex: 2,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c3 }},
name : '05-06赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//06-07
{
name: '06-07赛季',
type: 'radar',
radarIndex: 3,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c4 }},
name : '06-07赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//07-08
{
name: '07-08赛季',
type: 'radar',
radarIndex: 4,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c5 }},
name : '07-08赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//08-09
{
name: '08-09赛季',
type: 'radar',
radarIndex: 5,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c6 }},
name : '08-09赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//09-10
{
name: '09-10赛季',
type: 'radar',
radarIndex: 6,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c7 }},
name : '09-10赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//10-11
{
name: '10-11赛季',
type: 'radar',
radarIndex: 7,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c8 }},
name : '10-11赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//11-12
{
name: '11-12赛季',
type: 'radar',
radarIndex: 8,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c9 }},
name : '11-12赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//12-13
{
name: '12-13赛季',
type: 'radar',
radarIndex: 9,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c10 }},
name : '12-13赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//13-14
{
name: '13-14赛季',
type: 'radar',
radarIndex: 10,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c11 }},
name : '13-14赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//14-15
{
name: '14-15赛季',
type: 'radar',
radarIndex: 11,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c12 }},
name : '14-15赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
//15-16
{
name: '15-16赛季',
type: 'radar',
radarIndex: 12,
textStyle:{
color:'#fff'
},
data : [
{
value : {{ c13 }},
name : '15-16赛季',
label: {
normal: {
show: true,
textStyle:{
color:"#fff",
fontSize:8
}
}
},
areaStyle: {
normal: {
color: 'rgba(100, 100, 255, 0.5)',
}
},
}
]
},
]
};
// 为echarts对象加载数据
myChart1.setOption(option);
</script>