E3【数据可视化】【组件】基于Python+Flask+Echarts+HTML5拖放(DragDr

目录

​​一. 效果展示​​

​​二. 实现思路​​

​​所需知识点 ​​

​​三. 系统架构​​

​​四. 关键代码​​

​​1. 页面div布局​​

​​2. 布局拖放 drag drop 处理​​

​​3. 布局保存​​

​​4. Python Flask web服务器​​

​​5. 饼图 - JSON 数据格式​​

​​6. 饼图 - AJAX动态刷新数据​​

​​五. 源码下载​​

一. 效果展示

本例演示了 页面元素支持 拖放 自定义布局， 并 自动永久保存 修改后的布局。（目前保存布局有2种方式：1种是使用前端cookie，这里采用了服务端保存的方式，满足实际使用场景的需求）。

二. 实现思路

本文使用Echarts PIE 演示 HTML5 拖放效果，实际场景中可以替换为 Echarts 任意图表 以及其他 HTML 元素。

所需知识点 

HTML5 拖拽 ​​https://www.w3school.com.cn/html/html5_draganddrop.asp​​

jQuery 处理DOM节点 ​​https://www.w3school.com.cn/jquery/jquery_dom_get.asp​​

Python Flask​​ https://github.com/pallets/flask​​

Echarts ​​Examples - Apache ECharts​​

三. 系统架构

1. 前后端分离：前端 Echarts JavaScript BootStrap; 后端Python Flask；

2. 数据动态更新：服务端触发数据源的变化，前端AJAX自动获取最新数据并渲染到Echarts图表上；

3. 数据格式：JSON；

四. 关键代码

1. 页面div布局

此页面由 4个并列的div，及一个可 draggable的 container div 组成，container用于渲染Echarts 饼图。

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div draggable="true" ondragstart="drag(event)" id="container" style="height: 100%; width: 100%;"></div>
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

2. 布局拖放 drag drop 处理

drag 使用 dataTransfer 传递 div id。

function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }

drop 接收drag 传递过来的div id。

function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        save_layout(gen_layout());
    }

3. 布局保存

// ajax 保存当前 div 布局到服务端
    function save_layout(layout) {
        $.post(
            "/save_layout/" + JSON.stringify(layout),
            function (rsp) {
                result = JSON.parse(rsp)
                console.log(rsp)
            }
        )
    }

4. Python Flask web服务器

app = Flask(__name__, static_folder="static", template_folder="template")


@app.route('/')
def hello_world():
    return 'Hello World!'


# 主程序在这里
if __name__ == "__main__":
    # 开启线程，触发动态数据
    a = threading.Thread(target=asyncJson.loop)
    a.start()

    # 开启 flask 服务
    app.run(host='0.0.0.0', port=88, debug=True)

5. 饼图 - JSON 数据格式

[{"name": "头条", "value": 602}, {"name": "百度", "value": 1409}, {"name": "搜狗", "value": 5215}, {"name": "app分享", "value": 1207}, {"name": "google", "value": 168}]

6. 饼图 - AJAX动态刷新数据

$.getJSON(filename).done(function (data) {
    var myChart = echarts.init(document.getElementById(container));
    myChart.setOption({
      series: [
        { data: data },
        {
          data: data
            .sort(function (a, b) {
              return b.value[2] - a.value[2];
            })
            .slice(0, 5),
        },
      ],
    });
  });
}

五. 源码下载