赞
踩
目录
本例演示了 页面元素支持 拖放 自定义布局, 并 自动永久保存 修改后的布局。(目前保存布局有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;
此页面由 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>
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());
- }
- // ajax 保存当前 div 布局到服务端
- function save_layout(layout) {
- $.post(
- "/save_layout/" + JSON.stringify(layout),
- function (rsp) {
- result = JSON.parse(rsp)
- console.log(rsp)
- }
- )
- }
-
- 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)
[{"name": "头条", "value": 602}, {"name": "百度", "value": 1409}, {"name": "搜狗", "value": 5215}, {"name": "app分享", "value": 1207}, {"name": "google", "value": 168}]
- $.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),
- },
- ],
- });
- });
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。