用异步ajax（jquery）请求后台接口数据实现echarts图表

最新推荐文章于 2022-05-02 18:35:24 发布

代码帮

最新推荐文章于 2022-05-02 18:35:24 发布

阅读量1.4k

点赞数

分类专栏： Python 前端文章标签：图表

本文链接：https://blog.csdn.net/ITLearnHall/article/details/102527961

版权

Python 同时被 2 个专栏收录

77 篇文章 61 订阅

订阅专栏

前端

15 篇文章 1 订阅

订阅专栏

通常实现实现echarts图表用异步ajax（jquery）请求后台接口数据，现在举例python,flask项目

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="height: 100%;width: 100%;position: fixed"></div>
</body>
<script type="text/javascript" src="/static/js/test_echarts.js"></script>
</html>

js测试图表是否可以正常展示图表代码

test();
function test() {
    var myChart = echarts.init(document.getElementById("container"));
    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            areaStyle: {}
        }]
    };
    $.post("/top",function (data) {
        option.xAxis.data=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        option.series[0].data=[820, 932, 901, 934, 1290, 1330, 1320];
        myChart.setOption(option, true);

    });


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };

}

运行正常

定义Python后台接口(flask)

# -*-coding: utf-8-*-
# !/usr/bin/env python
from flask import Flask, render_template, jsonify

app = Flask(__name__)


@app.route('/top', methods=["post"])
def test():
    print("进来了")
    # x轴数据，可以从数据库，文件，或者随机函数产生
    x = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    # y轴数据，可以从数据库，文件，或者随机函数产生
    y = [820, 932, 901, 934, 1290, 1330, 1320]
    return jsonify({"x": x, "y": y})


@app.route('/')
def hello_world():
    return render_template('test_echarts.html')


if __name__ == '__main__':
    app.run()

更改js代码

test();
function test() {
    var myChart = echarts.init(document.getElementById("container"));
    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            areaStyle: {}
        }]
    };
    $.post("/top",function (data) {
        option.xAxis.data=data.x;
        option.series[0].data=data.y;
        myChart.setOption(option, true);

    });


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };

}

运行成功

页面展示

进QQ群（779809018）免费领取学习资源，疑难问题解答。同时欢迎大家关注我的微信公众号：代码帮，免费领取学习资源。

本公众号将秉持活到老学到老学习无休止的交流分享开源精神，汇聚于互联网和个人学习工作的精华干货知识，一切来于互联网，反馈回互联网。
目前研究领域：大数据、机器学习、深度学习、人工智能、数据挖掘、数据分析。语言涉及：Java、Scala、Python、Shell、Linux等。同时还涉及平常所使用的手机、电脑和互联网上的使用技巧、问题和实用软件破解。只要你一直关注和呆在群里，每天必须有收获,讨论和答疑QQ群：大数据和人工智能总群(779809018)微信公众号（代码帮）每天分享最新IT、大数据和人工智能新技术。

代码帮

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用异步ajax（jquery）请求后台接口数据实现echarts图表

通常实现实现echarts图表用异步ajax（jquery）请求后台接口数据，现在举例python,flask项目html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...
复制链接

扫一扫

专栏目录