73.PyEcharts整合Web框架（Flask与Django）_使用pyecharts整合web框架,框架选用 django

作者：2023面试高手 | 2024-02-29 10:14:00

踩

使用pyecharts整合web框架,框架选用 django

1.PyEcharts整合flask框架

创建flask项目pyecharts-flask-demo
项目中创建templates
创建一个py文件

from flask import Flask, render_template, Markup
from pyecharts.charts import Bar, Timeline
from pyecharts import options as opts
from pyecharts.faker import Faker
from pyecharts.globals import ThemeType
app = Flask(__name__)

# 绘制时间线图
def create_chart01():
    timeline = Timeline(init_opts=opts.InitOpts(theme=ThemeType.DARK))
    for i in range(2020,2030):
        # 绘制2020-2030年分类销量柱状图
        bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK))
        # 添加数据
        bar.add_xaxis(Faker.choose())
        bar.add_yaxis('A',Faker.values())
        bar.add_yaxis('B',Faker.values())
        bar.set_global_opts(title_opts=opts.TitleOpts(title=f'{i}年销量'))
        # 添加到时间线图中
        timeline.add(bar,f'{i}年')
    timeline.render('pyecharts_flask_demo/templates/show_chart01.html')

# 1.直接渲染页面：返回一个html页面显示图表
# 路由配置
@app.route('/show_chart01')
def show_chart01():
    create_chart01()
    return render_template('show_chart01.html')

# 2.返回一个模板对象
def create_chart02():
    timeline = Timeline(init_opts=opts.InitOpts(theme=ThemeType.DARK))
    for i in range(2020,2030):
        # 绘制2020-2030年分类销量柱状图
        bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK))
        # 添加数据
        bar.add_xaxis(Faker.choose())
        bar.add_yaxis('A',Faker.values())
        bar.add_yaxis('B',Faker.values())
        bar.set_global_opts(title_opts=opts.TitleOpts(title=f'{i}年销量'))
        # 添加到时间线图中
        timeline.add(bar,f'{i}年')
    return timeline

@app.route('/show_chart02')
def show_chart02():
    timeline = create_chart02()
    # 返回一个模板
    return Markup(timeline.render_embed())

@app.route('/get_opts')
def get_opts():
    timeline = create_chart02()
    return timeline.dump_options_with_quotes()

# 3.前后端分离
@app.route('/show_chart03')
def show_chart03():
    return render_template('show_chart03.html')


if __name__=='__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        $(function(){
            get_opts();
        })
        function get_opts() {
            // 发送异步请求
            $.ajax({
                type:"GET",
                url:"http://127.0.0.1:5000/get_opts",
                dataType:'json',
                success:function(result){
                    // 使用刚指定的配置项和数据显示图标
                    myChart.setOption(result);
                }
            })
        }


    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

在这里插入图片描述

2.PyEcharts整合django框架

views

from django.shortcuts import render
from rest_framework.views import APIView
from pyecharts.charts import Bar, Timeline
from pyecharts import options as opts
from pyecharts.faker import Faker
from pyecharts.globals import ThemeType
from django.http import JsonResponse
import json
# Create your views here.
def show_chart(request):
    print('show_chart')
    return render(request, 'show_chart.html')

def create_chart():
    timeline = Timeline(init_opts=opts.InitOpts(theme=ThemeType.DARK))
    for i in range(2020,2030):
        # 绘制2020-2030年分类销量柱状图
        bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK))
        # 添加数据
        bar.add_xaxis(Faker.choose())
        bar.add_yaxis('A',Faker.values())
        bar.add_yaxis('B',Faker.values())
        bar.set_global_opts(title_opts=opts.TitleOpts(title=f'{i}年销量'))
        # 添加到时间线图中
        timeline.add(bar,f'{i}年')
    return timeline.dump_options_with_quotes()

class OptionView(APIView):
    def get(self,request,*args,**kwargs):
        # 返回图标对象
        timeline = create_chart()
        return JsonResponse(json.loads(timeline))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

templates

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        $(function(){
            get_opts();
        })
        function get_opts() {
            // 发送异步请求
            $.ajax({
                type:"GET",
                url:"/get_opts",
                dataType:'json',
                success:function(result){
                    // 使用刚指定的配置项和数据显示图标
                    myChart.setOption(result);
                }
            })
        }


    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/165022