【Web開發】Python實作Web圖表功能（pyecharts，Flask）

<font color=purple face=華文行楷 size="5">"柳絲榆莢自芳菲，不管桃飄與李飛；"

1、簡介

A Python Echarts Plotting Library.

Apache Echarts 是一個由百度開源的資料可視化，憑借着良好的互動性，精巧的圖表設計，得到了衆多開發者的認可。而 Python 是一門富有表達力的語言，很适合用于資料處理。當資料分析遇上資料可視化時，pyecharts 誕生了。

2、Flask + pyecharts

如何在 Flask 中使用 pyecharts。

2.1 Flask 模闆渲染

$ mkdir pyecharts-flask-demo
$ cd pyecharts-flask-demo
$ mkdir templates

将 pyecharts 模闆，位于 pyecharts.render.templates 拷貝至剛建立的 templates 檔案夾。

server.py

from flask import Flask
from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig
from markupsafe import Markup

# 關于 CurrentConfig，可參考 [基本使用-全局變量]
CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./templates"))

from pyecharts import options as opts
from pyecharts.charts import Bar


app = Flask(__name__, static_folder="templates")


def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="愛看書的小沐"))
    )
    return c

@app.route("/")
def index():
    c = bar_base()
    return Markup(c.render_embed())

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

2.2 Flask 前後端分離

前後端分離可以使用動态更新資料，增量更新資料等功能。

建立一個 HTML 檔案。

建立 HTML 檔案儲存位于項目根目錄的 templates 檔案夾，這裡以如下 index.html 為例. 主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依賴。

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動态更新資料</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
      (
        function () {
            var result_json = '{{ result_json|tojson }}';
            // var result = JSON.parse(result_json);
            var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/barChart",
                dataType: 'json',
                data: {result: result_json},
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    )
    </script>
</body>
</html>

app.py:

from random import randrange
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar

app = Flask(__name__, static_folder="templates")

def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
        .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
        .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标題"))
    )
    return c


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()


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

2.3 定時全量更新圖表

前端主動向後端進行資料重新整理

定時重新整理的核心在于 HTML 的 setInterval 方法。

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 2000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/barChart",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    </script>
</body>
</html>

app.py:

代碼同上。

2.4 定時增量更新圖表

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
        var old_data = [];
        $(
            function () {
                fetchData(chart);
                setInterval(getDynamicData, 2000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineChart",
                dataType: "json",
                success: function (result) {
                    chart.setOption(result);
                    old_data = chart.getOption().series[0].data;
                }
            });
        }

        function getDynamicData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/lineDynamicData",
                dataType: "json",
                success: function (result) {
                    old_data.push([result.name, result.value]);
                    chart.setOption({
                        series: [{data: old_data}]
                    });
                }
            });
        }

    </script>
</body>
</html>

app.py:

from random import randrange

from flask.json import jsonify
from flask import Flask, render_template

from pyecharts import options as opts
from pyecharts.charts import Line


app = Flask(__name__, static_folder="templates")


def line_base() -> Line:
    line = (
        Line()
        .add_xaxis(["{}".format(i) for i in range(10)])
        .add_yaxis(
            series_name="",
            y_axis=[randrange(50, 80) for _ in range(10)],
            is_smooth=True,
            label_opts=opts.LabelOpts(is_show=False),
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(title="動态資料"),
            xaxis_opts=opts.AxisOpts(type_="value"),
            yaxis_opts=opts.AxisOpts(type_="value"),
        )
    )
    return line


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/lineChart")
def get_line_chart():
    c = line_base()
    return c.dump_options_with_quotes()

idx = 9

@app.route("/lineDynamicData")
def update_line_data():
    global idx
    idx = idx + 1
    return jsonify({"name": idx, "value": randrange(50, 80)})

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

3、Flask + echarts.js

3.1 直接渲染

app.py:

from flask import Flask, render_template

app = Flask(__name__)

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

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

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一個 ECharts 執行個體</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于準備好的dom，初始化echarts執行個體
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定圖表的配置項和資料
        var option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                    ]
                },
                xAxis: [
                    {type: 'category', gridIndex: 0},
                    {type: 'category', gridIndex: 1}
                ],
                yAxis: [
                    {gridIndex: 0},
                    {gridIndex: 1}
                ],
                grid: [
                    {bottom: '55%'},
                    {top: '55%'}
                ],
                series: [
                    // 這幾個系列會在第一個直角坐标系中，每個系列對應到 dataset 的每一行。
                    {type: 'bar', seriesLayoutBy: 'row'},
                    {type: 'bar', seriesLayoutBy: 'row'},
                    {type: 'bar', seriesLayoutBy: 'row'},
                    // 這幾個系列會在第二個直角坐标系中，每個系列對應到 dataset 的每一列。
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
                ]
            }

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

3.2 模闆渲染

例子：模闆

app.py:

import pandas as pd
from flask import Flask, render_template

datas = {}
datas2 = {}
df = pd.read_csv('data/datum_shift.csv')
df = df.sort_values('AREA_SOUTH_BOUND_LAT', ascending=False)

for item in df.head().values:
    datas[item[0]] = item[1]
    datas2[item[0]] = item[2]
    
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', datas=datas)

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

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房源占比前五的餅圖</title>
    <script src="./static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px"></div>
<script type="text/javascript">
      // 基于準備好的dom，初始化echarts執行個體
      var myChart = echarts.init(document.getElementById('main'));

      option = {
      title: {
        text: 'datum_shift',
        subtext: '餅圖練習',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '各項占比',
          type: 'pie',
          radius: '50%',
          data: [
               {% for data in datas %}
               {value:{{ datas[data] }}, name: '{{data}}'},
               {% endfor %}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

   // 使用剛指定的配置項和資料顯示圖表。
   myChart.setOption(option);

</script>
</body>
</html>

3.3 異步請求$.ajax

例子：$.ajax

建立目錄如下：

test_flask.py：

import json
from flask import Flask, request, jsonify,render_template
app = Flask(__name__)


@app.route('/test')
def hello_world():
    return 'Hello World，愛看書的小沐！'

@app.route("/")
def index():
    return render_template("index.html")

@app.route('/getdata_bar')
def getdata_bar():
    language = ['python', 'java', 'c', 'c++', 'c#', 'php']
    value = ['100', '150', '100', '90', '80', '90']
    return json.dumps({'language':language,'value':value},ensure_ascii=False) 

@app.route('/getdata_pie')
def getdata_pie():
    data = [
        {"value": 235, "name": '視訊廣告'},
        {"value": 274, "name": '聯盟廣告'},
        {"value": 310, "name": '郵件營銷'},
        {"value": 335, "name": '直接通路'},
        {"value": 400, "name": '搜尋引擎'},
        {"value": 90, "name": '其他'},
    ],

    return json.dumps({'data':data},ensure_ascii=False) 

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8080)

index.html:

<head>
    <meta charset="UTF-8">
    <title>Echarts</title>
	<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="/static/js/echarts.min.js"></script>

    <style>
        body {
        margin: 100px;
        }
        .flex-div{
        display: flex;
        width: auto;
        }
    </style>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div class="flex-div">
    <div id="echarts_lang" style="width: 600px;height:400px;"></div>
    <div id="echarts_ad" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
         $(function () {
            // 基于準備好的dom，初始化echarts執行個體
            var myChart = echarts.init(document.getElementById('echarts_lang'));
            $.ajax({
                url:'/getdata_bar',
                success:function (data) {
                    json_data=JSON.parse(data)

                    console.info(json_data['language'])
                    console.info(json_data['value'])

                    var option = {
                        title: {
                            text: '人數統計'
                        },
                        tooltip: {},
                        legend: {
                            data:['2022年銷量']
                        },
                        xAxis: {
                            data: json_data['language']
                        },
                        yAxis: {},
                        series: [{
                            name: '2022年銷量',
                            type: 'bar',
                            data: json_data['value']
                        }]
                    };
                   
                    myChart.setOption(option);
                }
            })
        })

        $(function () {
            // 基于準備好的dom，初始化echarts執行個體
            var myChart = echarts.init(document.getElementById('echarts_ad'));
            $.ajax({
                url:'/getdata_pie',
                success:function (data) {
                    json_data=JSON.parse(data)
                    console.info(json_data['data'])
 
                    option = {
                        series : [
                            {
                                name: '通路來源',
                                type: 'pie',
                                radius: '55%',
                                data: json_data['data'][0],
                                roseType: 'angle',
                                itemStyle: {
                                    normal: {
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ],
                    };
                    console.info(option)
                    myChart.setOption(option);
                }
            })
        })

    </script>
</body>

3.4 異步請求$.get

例子2： $.get

app.py:

from flask import Flask, request, jsonify,render_template
app = Flask(__name__)

categories=["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
data=[5, 20, 36, 10, 10, 20]
data2=[111, 222, 80, 150, 75, 55]

app = Flask (__name__)

@app.route('/test')
def hello_world():
    return 'Hello World，愛看書的小沐！'

@app.route('/', methods=["GET"])
def index():
     return render_template("index.html")

@app.route('/echarts', methods=["GET"]) 
def echarts():
    return jsonify(categories = categories,data = data, data2 = data2)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8080)

index.html:

<!DOCTYPE html>
<html style="height: 100%" lang="en">

<head>
    <meta charset="utf-8">
    <title>My Finance</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
    <!-- 引入 vintage 主題 -->
</head>

<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width:1000px;height:300px;"></div>

    <script type="text/javascript">
        // 基于準備好的dom，初始化echarts執行個體
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: '$.get異步資料加載示例(愛看書的小沐)'
            },
            tooltip: {},
            legend: {
                data: ['1月銷量', '2月銷量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '1月銷量',
                type: 'bar',
                data: []
            },{
                name: '2月銷量',
                type: 'bar',
                data: []
            }]
        });

        // 異步加載資料
        $.get('/echarts').done(function (data) {
            // 填入資料
            myChart.setOption({
                xAxis: {
                    data: data.categories
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    rotate: 40,
                    textStyle: {
                        color: '#333'
                    }
                },
                series: [
                    {
                        name: '1月銷量',
                        data: data.data
                    },
                    {
                        name: '2月銷量',
                        data: data.data2
                    }
                ]
            });
        });

        myChart.setOption(option);
    </script>
</body>

</html>

3.5 Flask + nodejs + vue

對于 Vue 3，你應該使用 npm 上可用的 Vue CLI v4.5 作為 @vue/cli。要更新，你應該需要全局重新安裝最新版本的 @vue/cli：

# 全局安裝 vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli

安裝完後檢視版本:

$ vue --version

然後在 Vue 項目中運作：

vue upgrade --next

vue create、vue ui、vue init三種方式建立Vue項目。

vue create指令是vue-cli3.x提供建立Vue項目的方式，模闆是固定的，模闆選項可自由配置。

vue ui指令也是vue-cli3.x提供建立Vue項目的方式，可以通過操作可視化頁面來建立和管理Vue項目。

vue init指令是vue-cli2.x提供建立Vue項目的方式，可以使用github上面的一些模闆來初始化項目。比如webpack就是官方推薦的标準模闆。

建立項目:

vue init webpack vue3-test

cd vue3-test
npm run dev

通路網址：http://localhost:8080

npm install --save echarts vue-jsonp vue-resource

D:\0627\vue3-test\src\main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import * as VueJsonp from 'vue-jsonp'
// import echarts from 'echarts'
import * as echarts from 'echarts';

Vue.use(VueJsonp)
Vue.use(VueResource)
Vue.prototype.$echarts = echarts

new Vue({
    el: '#app',
    render: h => h(App)
})

D:\0627\vue3-test\src\App.vue:

<template>
  <div class="main">
    <chart1 />
  </div>
</template>
<script>
import chart1 from "./components/chart1.vue";

export default {
  components: {
    chart1,
  },
};
</script>

D:\0627\vue3-test\src\components\chart1.vue:

<template>
  <div>
    <div id="echartContainer" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script>
export default {
  name: "chart1",
  data() {
    return {};
  },
  methods: {
    draw() {
      var myChart = this.$echarts.init(
        document.getElementById("echartContainer"),
        "infographic"
      );
      myChart.setOption({
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 5,
            data: [],
            type: "bar",
          },
        ],
      });
      this.$http
        .get("http://localhost:5000/api/demo/", {
          headers: { "Access-Control-Allow-Origin": "*" },
        })
        .then((res) => {
          console.log(res.data);
          myChart.hideLoading();
          myChart.setOption({ series: [{ data: res.data.product }] });
        });
    },
  },
  mounted() {
    this.draw();
  },
};
</script>

<style></style>

test_flask:

from flask import Flask, jsonify, render_template
from flask.helpers import make_response
from flask_cors import CORS

app = Flask(__name__,
    static_folder='./dist',  #設定靜态檔案夾目錄
    template_folder = "./dist",
    static_url_path="")  #設定vue編譯輸出目錄dist檔案夾，為Flask模闆檔案目錄
CORS(app, resources=r'/*')

@app.route('/', methods=["GET"])
def index():
     return render_template("index.html")

@app.route('/api/demo/')
def api_test():
    ans = jsonify({
        "product": [5, 20, 36, 10, 10, 20]
    })
    return make_response(ans)


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

cd vue3-test
npm run build
npm run dev

通路：http://localhost:8080/

以上是開啟了兩個web伺服器（Flask、nodejs）.

以下是開一個web伺服器（Flask）的方法：

将上面打包的dist檔案複制到Flask的主檔案夾裡，然後運作test_flask.py如下。

【Web開發】Python實作Web圖表功能（pyecharts，Flask）

1、簡介

2、Flask + pyecharts

2.1 Flask 模闆渲染

2.2 Flask 前後端分離

2.3 定時全量更新圖表

2.4 定時增量更新圖表

3、Flask + echarts.js

3.1 直接渲染

3.2 模闆渲染

3.3 異步請求$.ajax

3.4 異步請求$.get

3.5 Flask + nodejs + vue

結語

繼續閱讀

龍珠訓練營task04

趕工心得（一）

Python 開發簡單的 web API

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

vue學習筆記day12 vue的生命周期

403 Forbidden，You don't have permission to access / on this server.Forbidden

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目