73.PyEcharts整合Web框架（Flask与Django）

最新推荐文章于 2024-10-08 16:27:07 发布

想成为数据分析师的开发工程师

最新推荐文章于 2024-10-08 16:27:07 发布

阅读量870

点赞数

分类专栏：数据分析-数据可视化文章标签：数据分析 python django flask

本文链接：https://blog.csdn.net/m0_63953077/article/details/128883799

版权

数据分析-数据可视化专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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)

<!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>

在这里插入图片描述

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))

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>