目录
一. 效果展示
本例演示了 页面元素支持 拖放 自定义布局， 并 自动永久保存 修改后的布局。（目前保存布局有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),
},
],
});
});
}