1200字范文 > 使用Echarts绘制折线图异步加载数据实现动态更新

使用Echarts绘制折线图异步加载数据实现动态更新

时间：2021-01-24 07:21:11

文章目录

前言一、官方文档二、最终效果展示三、使用本地数据加载折线图1.代码2.执行效果和代码说明3.常用组件的属性介绍1.X轴/Y轴/线（xAxis/xAxis/series）2.其余组件（title/legend/grid）四、异步数据加载折线图（ajax请求）1.前端js代码2.后端代码（python实现，flask框架）总结

前言

因为比赛需要将数据可视化，在前端以折线图的形式展现，而Echart就是一个基于 JavaScript 的开源可视化图表库。成功实现后写一篇博客记录一下过程~~

一、官方文档

先直接上链接/zh/index.html官方链接

官方文档有各种的图示例，也可以直接在页面上编辑代码运行代码

二、最终效果展示

横坐标是都是时间，第一个图的纵坐标是检测值的分数，取值范围为[0-1]，不带面积的折线图；

第二图的纵坐标是检测情况，取值为[0/1]，是标准的就为1，不标准的就为0，带面积的折线图。

三、使用本地数据加载折线图

1.代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echarts</title><link rel="stylesheet" href="index.css" /></head><body><div class="container"><div id="showchart"><div id="pschart" class="chart"></div><div id="schart" class="chart"></div></div></div><script src="/jquery/3.2.1/jquery.min.js"></script>><script src="/ajax/libs/echarts/4.3.0/echarts.min.js"></script><script src="index.js" type="text/javascript" charset="utf-8"></script></body></html>

#showchart{background-color: #4F4F4F;}.chart{height: 300px;width: 500px;}

2.执行效果和代码说明

html的文件很简单，定义两个有宽高的div，然后命名id，引入echarts的js文件。在js文件中，先用id初始化图，再定义图的option，最后用option去载入图，即pschart.setOption(ps_option)。

3.常用组件的属性介绍

1.X轴/Y轴/线（xAxis/xAxis/series）

x轴和y轴的属性类似，就介绍一种即可

series代表一种图，它的type也有很多，比如line-折线图，bar-柱状图，pie-饼图，我用到折线图，所以就介绍折线图了

2.其余组件（title/legend/grid）

【注】这里只是把常用的，或者说我这个项目中用到的属性列出来了，如果你还需要对轴线或者线的展示有其他的要求，就去翻阅官方文档吧

四、异步数据加载折线图（ajax请求）

之前展示图的数据是在初始化后setOption中直接填入，已经写死了。但在实际应用中，肯定需要动态加载数据。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

js中使用JQuery内置的Ajax方法请求，其url为 “/getdata”，后端定义’/getdata’对应的路由，返回一个json形式的data。

1.前端js代码

2.后端代码（python实现，flask框架）

from flask import Flask,render_templateapp = Flask(__name__)def get_chartdata():data=[]with open("./static/data/results.txt", "r") as f:for line in f:dic ={}line = line.strip('\n')temp = line1.split(' ') dic['frame'] = int(temp[0])dic['p'] = temp[1]dic['s'] = temp[2]data.append(dic)return data@app.route('/')def index():return render_template('index.html')@app.route("/getdata", methods = ['POST','GET'])def showcharts():data= get_chartdata()return jsonify(data)if __name__ == '__main__':app.run()