Echarts --- 可视化练习（scatter01 --- 基础散点图）

63 阅读 0 评论 42 点赞

我是靠谱客的博主舒服保温杯，最近开发中收集的这篇文章主要介绍Echarts --- 可视化练习（scatter01 --- 基础散点图），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Echarts — 可视化练习（scatter01 — 基础散点图）

在这里插入图片描述

如果有来生，

要做一棵树，

站成永恒，

没有悲欢的姿势。

一半在土里安详，

一半在风里飞扬，

一半洒落阴凉，

一半沐浴阳光，

非常沉默非常骄傲，

从不依靠，从不寻找。

Flask:

# -*- coding: utf-8
#  @Time    : 2020/12/15 15:32
#  @Author  : ZYX
#  @File    : scatter01_basic.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__ = "scatter01"
    id = db.Column(db.Integer,autoincrement=True,primary_key=True)
    x = db.Column(db.Float,unique=True)
    y = db.Column(db.Float)

@app.route('/')
def index():
    sheets_list = sheets.query.all()
    return render_template("scatter01.html",sheets = sheets_list)

if __name__ == '__main__':
    db.drop_all()
    db.create_all()

    l1 = sheets(x=10.0,y=8.04)
    l2 = sheets(x=8.0, y=6.95)
    l3 = sheets(x=13.0, y=7.58)
    l4 = sheets(x=9.0, y=8.81)
    l5 = sheets(x=11.0,y=8.33)
    l6 = sheets(x=14.0, y=9.96)
    l7 = sheets(x=6.0, y=7.24)
    l8 = sheets(x=4.0, y=4.26)
    l9 = sheets(x=12.0, y=10.84)
    l10 = sheets(x=7.0, y=4.82)
    l11 = sheets(x=5.0, y=5.68)
    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 id="container" style="height: 100%"></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 data1 = [{% for item in sheets %}{{ item.x }}, {% endfor %}];
    var data2 = [{% for item in sheets %}{{ item.y }}, {% endfor %}];

    var option = null;
    option = {
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'cross'
            }
        },
        xAxis: {},
        yAxis: {},
        series: [{
            type: 'scatter',
            symbolSize: 20,
            data: [
                [data1[0],data2[0]],
                [data1[1],data2[1]],
                [data1[2],data2[2]],
                [data1[3],data2[3]],
                [data1[4],data2[4]],
                [data1[5],data2[5]],
                [data1[6],data2[6]],
                [data1[7],data2[7]],
                [data1[8],data2[8]],
                [data1[9],data2[9]],
                [data1[10],data2[10]],
            ]
        }]
    };
    if (option && typeof option == 'object') {
        myecharts.setOption(option);
    }
</script>
</body>
</html>

效果展示：

基础散点图

知识点小归纳：

 series: [{
            type: 'scatter',          // 声明绘制图形的类型
            symbolSize: 20,           // 设置散点大小
            data: [                   // 给出数据坐标
                [data1[0],data2[0]],
                [data1[1],data2[1]],
                [data1[2],data2[2]],
                [data1[3],data2[3]],
                [data1[4],data2[4]],
                [data1[5],data2[5]],
                [data1[6],data2[6]],
                [data1[7],data2[7]],
                [data1[8],data2[8]],
                [data1[9],data2[9]],
                [data1[10],data2[10]],
            ]
        }]