关于flask入门教程-ajax+echarts简单实现一

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

本文通过echarts官网上的一个标准样例开始flask+ajax+echarts的第一步。

第一步：下面是从echarts官网上下载的一个样例，具体参见：https://echarts.apache.org/handbook/zh/get-started，在flask中进行路由定义即可。

@app.route('/echart1')
def bigscreen():
return render_template('echartexample.html')

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><!--script src="..\static\js\echarts.min.js"></script--><script src="/static/js/echarts.min.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>

第二步：在flask中增加ajax逻辑接口，通过jsonfiy进行数据组装和返回。

@app.route('/getjson2', methods=['GET'])
def getjson2():reporttitle = '销量测试'goodstype = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']salenum = [5, 20, 36, 10, 10, 20]data = {'reporttitle': reporttitle, 'goodstype': goodstype, 'salenum': salenum, }return jsonify({'reporttitle': reporttitle, 'goodstype': goodstype, 'salenum': salenum, })@app.route('/echartdemo2')
def echartdemo2():return render_template('echartdemo2.html')

在html中增加ajax代码实现。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><!--script src="..\static\js\echarts.min.js"></script--><script src="/static/js/echarts.min.js"></script><script src="/static/js/jquery.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]};alert('waiting....');// 使用刚指定的配置项和数据显示图表。myChart.showLoading();$.ajax({url:'/getjson2',result:{},type:'GET',dataType:'json',success:function(result){myChart.hideLoading();// 填入数据myChart.setOption({title: {text: '异步数据加载'},xAxis:{data:result.goodstype},yAxis: {},series:[{name:'销量',type: 'bar',data:result.salenum}]})},error:function (msg) {console.log(msg);alert('系统发生错误');}})</script></body></html>

第三步：通过数据库返回结果集再生成json，封装成路由，由前台调用

关于数据库返回json可参考前文

@app.route('/getjson3', methods=['GET'])
def getjson3():sql = 'select goodstype,salenum from saledata'result = db.session.execute(sql)# jsonify data1result = result.mappings().all()goodstype = [x['goodstype'] for x in result]salenum = [x['salenum'] for x in result]data = jsonify({'goodstype': goodstype, 'salename': salenum})# b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],# "salename":[5,20,36,10,10,20]}\n'# jsonify data2data = jsonify(goodstype=goodstype, salename=salenum)# b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],# "salename":[5,20,36,10,10,20]}\n'# jsonify data3data = jsonify(goodstype=[x['goodstype'] for x in result],salenum=[x['salenum'] for x in result])# b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],# "salenum":[5,20,36,10,10,20]}\n'# jsonify data4result = db.session.execute(sql).fetchall()data = jsonify(goodstype=[x[0] for x in result],salenum=[x[1] for x in result])# b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],# "salenum":[5,20,36,10,10,20]}\n'return data@app.route('/echartdemo3')
def echartdemo3():return render_template('echartdemo3.html')

第三步的HTML文件和第二步完全相同

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><!--script src="..\static\js\echarts.min.js"></script--><script src="/static/js/echarts.min.js"></script><script src="/static/js/jquery.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]};// 使用刚指定的配置项和数据显示图表。myChart.showLoading();$.ajax({url:'/getjson3',result:{},type:'GET',dataType:'json',success:function(result){myChart.hideLoading();// 填入数据myChart.setOption({title: {text: '异步数据加载'},xAxis:{data:result.goodstype},yAxis: {},series:[{name:'销量',type: 'bar',data:result.salenum}]})},error:function (msg) {console.log(msg);alert('系统发生错误');}})</script></body></html>

关于flask入门教程-ajax+echarts简单实现一相关推荐

关于flask入门教程-ajax+echarts实现大屏展示
陆陆续续写了一个系列的flask入门教程了,最后以一个半成品大屏做个了结,也算是一段时间的成果吧,毕竟不是专业码农,只是爱好而已,还有很多其他的事情等待探索. 大屏用到的技术主要包括标准的HTML.C ...
关于flask入门教程-ajax+echarts实现关系图
关系图,从字面上可以看出,为关系的图形,既然为关系,那么就需要有点以及关系,用来表示点与点之间的联系.所以我们可以得出:关系图需要两个必要的元素,节点,关系,其中关系需要包含有联系的节点以及节点联系说 ...
关于flask入门教程-ajax+echarts实现地图GDP展示
地图可视化就是将地理数据转换成可视化形态,通过将具有地域特征的数据或者数据分析结果形象地表现在地图上,使得用户可以更加容易理解数据规律和趋势.通俗地讲,地图可视化可以将地理数据更清晰直白地展现出来. ...
关于flask入门教程-ajax+echarts实现矩形树图
矩形树图将层次结构的数据显示为一组嵌套矩形.树的每个分支都有一个矩形,然后用代表子分支的较小矩形平铺. 叶子节点的矩形面积与数据占比成比例.通常,叶节点会用不同的颜色来显示数据的关联维度. 矩形图要比 ...
关于flask入门教程-ajax+echarts实现热力图
热力图 (Heatmap) 通过色彩变化来显示数据,热力图适合用来交叉检查多变量的数据.显示是否有彼此相似的变量:以及检测彼此之间是否存在任何相关性.也可以展现随着时间的变化指标的发展. 热力图依赖颜 ...
关于flask入门教程-ajax+echarts实现地图热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 以上是传统的热力图定义,现今热力图在网页分析.业务数据分析等其他领域也有较为广泛的应用. 1.热力 ...
关于flask入门教程-ajax+百度地图实现热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 前文也讲了关于max.pointsize.blursize这几个值一直也没找到最合适的处理办法.所 ...
ROS2入门教程—创建一个简单的订阅者和发布者（C++版）
ROS2入门教程-创建一个简单的订阅者和发布者(C++版) 1 创建功能包 2 创建发布者节点 3 设置发布者节点依赖项 4 设置发布者节点编译规则 5 创建订阅者 6 编译并运行节点是通过RO ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...

关于flask入门教程-ajax+echarts简单实现一

关于flask入门教程-ajax+echarts简单实现一相关推荐

最新文章

热门文章