概述
Echarts — 可视化练习（scatter02 — 安斯库姆四重奏）
安斯库姆四重奏（Anscombe’s quartet）是四组基本的统计特性一致的数据，但由它们绘制出的图表则截然不同。每一组数据都包括了11个(x,y)点。这四组数据由统计学家弗朗西斯·安斯库姆（Francis Anscombe）于1973年构造，他的目的是用来说明在分析数据前先绘制图表的重要性，以及离群值对统计的影响之大。
这四组数据的共同统计特性如下：
- 在四幅图中，由第一组数据绘制的图表（左上图）是看起来最“正常”的，可以看出两个随机变量之间的相关性。
- 从第二组数据的图表（右上图）则可以明显地看出两个随机变量间的关系是非线性的。
- 第三组中（左下图），虽然存在着线性关系，但由于一个离群值的存在，改变了线性回归线，也使得相关系数从1降至0.81。
- 最后，在第四个例子中（右下图），尽管两个随机变量间没有线性关系，但仅仅由于一个离群值的存在就使得相关系数变得很高。
Falsk：
# -*- coding: utf-8
# @Time : 2020/12/15 17:40
# @Author : ZYX
# @File : scatter02_Anscombs_quartet.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__ = "scatter02"
id = db.Column(db.Integer, autoincrement=True, primary_key=True)
x = db.Column(db.Float, unique=True)
y1 = db.Column(db.Float)
y2 = db.Column(db.Float)
y3 = db.Column(db.Float)
y4 = db.Column(db.Float)
@app.route('/')
def index():
sheets_list = sheets.query.all()
return render_template("scatter02.html", sheets=sheets_list)
if __name__ == '__main__':
db.drop_all()
db.create_all()
l1 = sheets(x=10.0, y1=8.04, y2=9.14, y3=7.46, y4=6.58)
l2 = sheets(x=8.0, y1=6.95, y2=8.14, y3=6.77, y4=5.76)
l3 = sheets(x=13.0, y1=7.58, y2=8.74, y3=12.74, y4=7.71)
l4 = sheets(x=9.0, y1=8.81, y2=8.77, y3=7.11, y4=8.84)
l5 = sheets(x=11.0, y1=8.33, y2=9.26, y3=7.81, y4=8.47)
l6 = sheets(x=14.0, y1=9.96, y2=8.10, y3=8.84, y4=7.04)
l7 = sheets(x=6.0, y1=7.24, y2=6.13, y3=6.08, y4=5.25)
l8 = sheets(x=4.0, y1=4.26, y2=3.10, y3=5.39, y4=12.50)
l9 = sheets(x=12.0, y1=10.84, y2=9.13, y3=8.15, y4=5.56)
l10 = sheets(x=7.0, y1=4.82, y2=7.26, y3=6.42, y4=7.91)
l11 = sheets(x=5.0, y1=5.68, y2=4.74, y3=5.73, y4=6.89)
l = [l1, l2, l3, l4, l5, l6, l7, l8, l9, l10, l11]
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: 100%">
<div style="height: 100%" id="container"></div>
<script type="text/javascript" src="../static/echarts_5.0.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myecharts = echarts.init(dom);
// 获取后端数据
var data = [{% for item in sheets %}{{ item.x }}, {% endfor %}];
var data1 = [{% for item in sheets %}{{ item.y1 }}, {% endfor %}];
var data2 = [{% for item in sheets %}{{ item.y2 }}, {% endfor %}];
var data3 = [{% for item in sheets %}{{ item.y3 }}, {% endfor %}];
var data4 = [{% for item in sheets %}{{ item.y4 }}, {% endfor %}];
// 绘制参考线
var markLineOpt = {
animation: false,
label: {
formatter: 'y = 0.5 * x + 3',
align: 'right'
},
lineStyle: {
type: 'solid'
},
tooltip: {
formatter: 'y = 0.5 * x + 3'
},
data: [[{
coord: [0, 3],
symbol: 'none'
}, {
coord: [20, 13],
symbol: 'none'
}]]
};
var option = null;
option = {
title: {
text: 'Anscombe's quartet',
left: 'center',
top: 0
},
grid: [
{left: '7%', top: '7%', width: '38%', height: '38%'},
{right: '7%', top: '7%', width: '38%', height: '38%'},
{left: '7%', bottom: '7%', width: '38%', height: '38%'},
{right: '7%', bottom: '7%', width: '38%', height: '38%'}
],
legend:{
show:true,
right:'10%'
},
tooltip: {
trigger:'axis',
formatter: 'Group {a}:({c})',
axisPointer: {
type:'cross'
}
},
xAxis: [
{gridIndex: 0, min: 0, max: 20},
{gridIndex: 1, min: 0, max: 20},
{gridIndex: 2, min: 0, max: 20},
{gridIndex: 3, min: 0, max: 20}
],
yAxis: [
{gridIndex: 0, min: 0, max: 20},
{gridIndex: 1, min: 0, max: 20},
{gridIndex: 2, min: 0, max: 20},
{gridIndex: 3, min: 0, max: 20}
],
series: [
{
name: 'I',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: (function () { // 遍历获取数据
var date = [];
for (var i = 0; i < 11; i++) {
date.push([data[i], data1[i]]);
}
return date;
})(),
markLine: markLineOpt
},
{
name: 'II',
type: 'scatter',
xAxisIndex: 1,
yAxisIndex: 1,
data: (function () { // 遍历获取数据
var date = [];
for (var i = 0; i < 11; i++) {
date.push([data[i], data2[i]]);
}
return date;
})(),
markLine: markLineOpt
},
{
name: 'III',
type: 'scatter',
xAxisIndex: 2,
yAxisIndex: 2,
data: (function () { // 遍历获取数据
var date = [];
for (var i = 0; i < 11; i++) {
date.push([data[i], data3[i]]);
}
return date;
})(),
markLine: markLineOpt
},
{
name: 'IV',
type: 'scatter',
xAxisIndex: 3,
yAxisIndex: 3,
data: (function () { // 遍历获取数据
var date = [];
for (var i = 0; i < 11; i++) {
date.push([data[i], data4[i]]);
}
return date;
})(),
markLine: markLineOpt
}
]
}
;
if (option && typeof option == 'object') {
myecharts.setOption(option);
}
</script>
</body>
</html>
效果展示：
安斯库姆四重奏
知识点小归纳：
var markLineOpt = {
animation: true, // 是否开启动画
label: { // 标签
formatter: 'y = 0.5 * x + 3', // 格式化标签
align: 'right' // 标签位置
},
lineStyle: { // 线条样式
type: 'solid'
},
tooltip: {
formatter: 'y = 0.5 * x + 3'
},
data: [[{
coord: [0, 3], // 设置起点
symbol: 'none' // 设置起点样式
}, {
coord: [20, 13], // 设置终点
symbol: 'none'
}]]
};
grid: [ // 通过设置多组边界限制实现多图绘制
{left: '7%', top: '7%', width: '38%', height: '38%'},
{right: '7%', top: '7%', width: '38%', height: '38%'},
{left: '7%', bottom: '7%', width: '38%', height: '38%'},
{right: '7%', bottom: '7%', width: '38%', height: '38%'}
],
通过设置多组边界限制实现多图绘制，在设置x、y轴的时候，添加上grid索引，series指定绘制的x、y轴数据的时候根据 xAxisIndex: n,yAxisIndex: n 对号入座。
xAxis: [
{gridIndex: 0, min: 0, max: 20}, // x 轴所在的 grid 的索引，默认位于第一个 grid。 // 并且设置x轴的取值范围
{gridIndex: 1, min: 0, max: 20},
{gridIndex: 2, min: 0, max: 20},
{gridIndex: 3, min: 0, max: 20}
],
yAxis: [
{gridIndex: 0, min: 0, max: 20},
{gridIndex: 1, min: 0, max: 20},
{gridIndex: 2, min: 0, max: 20},
{gridIndex: 3, min: 0, max: 20}
],
{
name: 'I',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: (function () { // 遍历获取数据
var date = [];
for (var i = 0; i < 11; i++) {
date.push([data[i], data1[i]]);
}
return date;
})(),
markLine: markLineOpt
},
最后
以上就是寒冷狗为你收集整理的Echarts — 可视化练习（scatter02 — 安斯库姆四重奏）的全部内容，希望文章能够帮你解决Echarts — 可视化练习（scatter02 — 安斯库姆四重奏）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复