level 1
liubo_wh
楼主
在echarts 3 中,如何用从后台数据库中查询出的数据展示在图表中,而不是在页面里写死。
试着用罗兵的例子,但是访问时一直显示转圈载入数据,没反映,具体代码如下:
html文件:
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['蒸发量','降水量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '蒸发量', type: 'bar', data: [] },{ name: '降水量', type: 'line', data: [] }] }); myChart.showLoading(); // 显示加载动画 // 异步加载数据 $.get('/weather').done(function (data) { myChart.hideLoading(); // 隐藏加载动画 // 填入数据 myChart.setOption({ xAxis: { data: data.month }, series: [{ name: '蒸发量', // 根据名字对应到相应的系列 data: data.evaporation.map(parseFloat) // 转化为数字(注意map) },{ name: '降水量', data: data.precipitation.map(parseFloat) }] }); }); </script>
后台使用flask,相关代码如下:
@app.route("/weather", methods=["POST"])
def weather():
if request.method == "POST":
return jsonify(month = [‘Jan','Feb',’Mar'], evaporation = [1.1,3.2,2.5], precipitation = [5.7,6.4,4.8])
2016年12月19日 02点12分
1
试着用罗兵的例子,但是访问时一直显示转圈载入数据,没反映,具体代码如下:
html文件:
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['蒸发量','降水量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '蒸发量', type: 'bar', data: [] },{ name: '降水量', type: 'line', data: [] }] }); myChart.showLoading(); // 显示加载动画 // 异步加载数据 $.get('/weather').done(function (data) { myChart.hideLoading(); // 隐藏加载动画 // 填入数据 myChart.setOption({ xAxis: { data: data.month }, series: [{ name: '蒸发量', // 根据名字对应到相应的系列 data: data.evaporation.map(parseFloat) // 转化为数字(注意map) },{ name: '降水量', data: data.precipitation.map(parseFloat) }] }); }); </script>
后台使用flask,相关代码如下:
@app.route("/weather", methods=["POST"])
def weather():
if request.method == "POST":
return jsonify(month = [‘Jan','Feb',’Mar'], evaporation = [1.1,3.2,2.5], precipitation = [5.7,6.4,4.8])