【小沐学Python】Python实现Web图表功能(pyecharts,Flask)

66 篇文章 13 订阅

在这里插入图片描述

🎈🎈🎈Python实现Web图表功能系列:🎈🎈🎈
1🎈【Web开发】Python实现Web图表功能(D-Tale入门)🎈
2🎈【Web开发】Python实现Web图表功能(D-Tale编译)🎈
3🎈【Web开发】Python实现Web图表功能(pyecharts,Flask)🎈
4🎈【Web开发】Python实现Web图表功能(ECharts.js,Flask)🎈
5🎈【Web开发】Node实现Web图表功能(ECharts.js,Vue)🎈
6🎈【Web开发】Node实现Web图表功能(ECharts.js,React)🎈
7🎈【Web开发】Python实现Web图表功能(Grafana入门)🎈

“柳丝榆荚自芳菲,不管桃飘与李飞;”

1、简介

A Python Echarts Plotting Library.
Apache Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python 是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts 诞生了。

在这里插入图片描述

在这里插入图片描述

  • 简洁的 API 设计,使用如丝滑般流畅,支持链式调用
  • 囊括了 30+ 种常见图表,应有尽有
  • 支持主流 Notebook 环境,Jupyter Notebook 和 JupyterLab
  • 可轻松集成至 Flask,Sanic,Django 等主流 Web 框架
  • 高度灵活的配置项,可轻松搭配出精美的图表
  • 详细的文档和示例,帮助开发者更快的上手项目
  • 多达 400+ 地图文件,并且支持原生百度地图,为地理数据可视化提供强有力的支持
    在这里插入图片描述

2、下载和安装

新版本系列将从 v1.0.0 开始,文档位于 pyecharts.org;示例位于 gallery.pyecharts.org

2.1 pip 安装

# 安装 v1 以上版本
$ pip install pyecharts -U

# 如果需要安装 0.5.11 版本的开发者,可以使用
# pip install pyecharts==0.5.11

2.2 源码安装

# 安装 v1 以上版本
$ git clone https://github.com/pyecharts/pyecharts.git
# 如果需要安装 0.5.11 版本,请使用 git clone https://github.com/pyecharts/pyecharts.git -b v05x
$ cd pyecharts
$ pip install -r requirements.txt
$ python setup.py install

在这里插入图片描述

3、快速入门

3.1 生成 HTML(本地环境)

  • 例子1:app.py
from pyecharts.charts import Bar
from pyecharts import options as opts

# V1 版本开始支持链式调用
bar = (
    Bar()
    .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
    .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
    .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况(爱看书的小沐)"))
)
bar.render()

# 不习惯链式调用的开发者依旧可以单独调用方法
bar = Bar()
bar.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
bar.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
bar.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况(爱看书的小沐)"))
bar.render()

在这里插入图片描述

  • 例子2:app2.py
import random

from pyecharts import options as opts
from pyecharts.charts import Bar3D
from pyecharts.faker import Faker


data = [(i, j, random.randint(0, 12)) for i in range(6) for j in range(24)]
c = (
    Bar3D()
    .add(
        "",
        [[d[1], d[0], d[2]] for d in data],
        xaxis3d_opts=opts.Axis3DOpts(Faker.clock, type_="category"),
        yaxis3d_opts=opts.Axis3DOpts(Faker.week_en, type_="category"),
        zaxis3d_opts=opts.Axis3DOpts(type_="value"),
    )
    .set_global_opts(
        visualmap_opts=opts.VisualMapOpts(max_=20),
        title_opts=opts.TitleOpts(title="Bar3D-基本示例 (爱看书的小沐)"),
    )
    .render("bar3d_base.html")
)

在这里插入图片描述

3.2 生成图片(本地环境)

  • 例子1:app.py
from snapshot_selenium import snapshot as driver

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


def bar_chart() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
        .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
        .reversal_axis()
        .set_series_opts(label_opts=opts.LabelOpts(position="right"))
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-测试渲染图片(爱看书的小沐)"))
    )
    return c

# 需要安装 snapshot-selenium 或者 snapshot-phantomjs
make_snapshot(driver, bar_chart().render(), "bar.png")

在这里插入图片描述

  • 例子2:app2.py
from snapshot_selenium import snapshot as driver
from pyecharts.render import make_snapshot
from pyecharts import options as opts
from pyecharts.charts import Bar3D
import random

x_data = y_data = list(range(10))

def generate_data():
    data = []
    for j in range(10):
        for k in range(10):
            value = random.randint(0, 9)
            data.append([j, k, value * 2 + 4])
    return data

def bar3d_chart() -> Bar3D:
    
    bar3d = Bar3D()
    for _ in range(10):
        bar3d.add(
            "",
            generate_data(),
            shading="lambert",
            xaxis3d_opts=opts.Axis3DOpts(data=x_data, type_="value"),
            yaxis3d_opts=opts.Axis3DOpts(data=y_data, type_="value"),
            zaxis3d_opts=opts.Axis3DOpts(type_="value"),
        )

    bar3d.set_global_opts(title_opts=opts.TitleOpts("Bar3D-堆叠柱状图示例(爱看书的小沐)"))
    bar3d.set_series_opts(**{"stack": "stack"})
    # bar3d.render("bar3d_stack.html")
    return bar3d

# 需要安装 snapshot-selenium 或者 snapshot-phantomjs
make_snapshot(driver, bar3d_chart().render(), "bar3d.png")

在这里插入图片描述

3.3 Jupyter Notebook(Notebook 环境)

https://jupyter.org/try-jupyter/retro/notebooks/?path=notebooks/Intro.ipynb
https://jupyter.org/install

  • 什么是Jupyter Notebook?
    ① Jupyter Notebook是基于网页的用于交互计算的应用程序。其可被应用于全过程计算:开发、文档编写、运行代码和展示结果。
    ② Jupyter Notebook是以网页的形式打开,可以在网页页面中直接编写代码和运行代码,代码的运行结果也会直接在代码块下显示的程序。如在编程过程中需要编写说明文档,可在同一个页面中直接编写,便于作及时的说明和解释。

  • Jupyter Notebook的主要特点
    ① 编程时具有语法高亮、缩进、tab补全的功能。
    ② 可直接通过浏览器运行代码,同时在代码块下方展示运行结果。
    ③ 以富媒体格式展示计算结果。富媒体格式包括:HTML,LaTeX,PNG,SVG等。
    ④ 对代码编写说明文档或语句时,支持Markdown语法。
    ⑤ 支持使用LaTeX编写数学性说明。
    在这里插入图片描述
    Install the classic Jupyter Notebook with:

pip install notebook
jupyter notebook

在这里插入图片描述

在这里插入图片描述

# How do I open a specific Notebook?
jupyter notebook notebook.ipynb

# How do I start the Notebook using a custom IP or port?
jupyter notebook --port 9999

# How do I start the Notebook server without opening a browser?
jupyter notebook --no-browser

# How do I get help about Notebook server options?
jupyter notebook --help

# Running a notebook is this easy.
jupyter run notebook.ipynb

# You can pass more than one notebook as well.
jupyter run notebook.ipynb notebook2.ipynb

# By default, notebook errors will be raised and printed into the terminal. You can suppress them by passing the --allow-errors flag.
jupyter run notebook.ipynb --allow-errors

编辑代码:
在这里插入图片描述
预览成果:
在这里插入图片描述

3.4 JupyterLab(Notebook 环境)

Install JupyterLab with pip:

pip install jupyterlab

在这里插入图片描述
Once installed, launch JupyterLab with:

jupyter-lab

在这里插入图片描述
在这里插入图片描述
鼠标点击NoteBook按钮,进入编辑界面,并输入代码如下如下:
在这里插入图片描述
在这里插入图片描述

3.5 Voilà(Notebook 环境)

# Install Voilà with:
pip install voila

# Once installed, launch Voilà with:
voila

在这里插入图片描述
浏览器访问:http://localhost:8866/
在这里插入图片描述
查看某个ipynb文件如下:
在这里插入图片描述

4、地图 Map

4.1 Map_base

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
    .set_global_opts(title_opts=opts.TitleOpts(title="Map-基本示例"))
    .render("map_base.html")
)

在这里插入图片描述

4.2 Map_guangdong

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add("商家A", [list(z) for z in zip(Faker.guangdong_city, Faker.values())], "广东")
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Map-广东地图"), visualmap_opts=opts.VisualMapOpts()
    )
    .render("map_guangdong.html")
)

在这里插入图片描述

4.3 Map_visualmap_piecewise

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Map-VisualMap(分段型)"),
        visualmap_opts=opts.VisualMapOpts(max_=200, is_piecewise=True),
    )
    .render("map_visualmap_piecewise.html")
)

在这里插入图片描述

4.4 Map_world

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add("商家A", [list(z) for z in zip(Faker.country, Faker.values())], "world")
    .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Map-世界地图"),
        visualmap_opts=opts.VisualMapOpts(max_=200),
    )
    .render("map_world.html")
)

在这里插入图片描述

4.5 Population_density_of_hongkong_v2

import ssl

import pyecharts.options as opts
from pyecharts.charts import Map
from pyecharts.datasets import register_url

"""
Gallery 使用 pyecharts 1.1.0 和 echarts-china-cities-js
参考地址: https://echarts.apache.org/examples/editor.html?c=map-HK
"""
ssl._create_default_https_context = ssl._create_unverified_context
# 与 pyecharts 注册,当画香港地图的时候,用 echarts-china-cities-js
register_url("https://echarts-maps.github.io/echarts-china-cities-js")

WIKI_LINK = (
    "http://zh.wikipedia.org/wiki/"
    "%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12"
)
MAP_DATA = [
    ["中西区", 20057.34],
    ["湾仔", 15477.48],
    ["东区", 31686.1],
    ["南区", 6992.6],
    ["油尖旺", 44045.49],
    ["深水埗", 40689.64],
    ["九龙城", 37659.78],
    ["黄大仙", 45180.97],
    ["观塘", 55204.26],
    ["葵青", 21900.9],
    ["荃湾", 4918.26],
    ["屯门", 5881.84],
    ["元朗", 4178.01],
    ["北区", 2227.92],
    ["大埔", 2180.98],
    ["沙田", 9172.94],
    ["西贡", 3368],
    ["离岛", 806.98],
]


NAME_MAP_DATA = {
    # "key": "value"
    # "name on the hong kong map": "name in the MAP DATA",
    "中西区": "中西区",
    "东区": "东区",
    "离岛区": "离岛",
    "九龙城区": "九龙城",
    "葵青区": "葵青",
    "观塘区": "观塘",
    "北区": "北区",
    "西贡区": "西贡",
    "沙田区": "沙田",
    "深水埗区": "深水埗",
    "南区": "南区",
    "大埔区": "大埔",
    "荃湾区": "荃湾",
    "屯门区": "屯门",
    "湾仔区": "湾仔",
    "黄大仙区": "黄大仙",
    "油尖旺区": "油尖旺",
    "元朗区": "元朗",
}

(
    Map(init_opts=opts.InitOpts(width="1400px", height="800px"))
    .add(
        series_name="香港18区人口密度",
        maptype="香港",
        data_pair=MAP_DATA,
        name_map=NAME_MAP_DATA,
        is_map_symbol_show=False,
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="香港18区人口密度 (2011)",
            subtitle="人口密度数据来自Wikipedia",
            subtitle_link=WIKI_LINK,
        ),
        tooltip_opts=opts.TooltipOpts(
            trigger="item", formatter="{b}<br/>{c} (p / km2)"
        ),
        visualmap_opts=opts.VisualMapOpts(
            min_=800,
            max_=50000,
            range_text=["High", "Low"],
            is_calculable=True,
            range_color=["lightskyblue", "yellow", "orangered"],
        ),
    )
    .render("population_density_of_HongKong_v2.html")
)

在这里插入图片描述

4.6 Population_density_of_hongkong


import asyncio
from aiohttp import TCPConnector, ClientSession

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

"""
Gallery 使用 pyecharts 1.1.0
参考地址: https://echarts.apache.org/examples/editor.html?c=map-HK
"""

WIKI_LINK = (
    "http://zh.wikipedia.org/wiki/"
    "%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12"
)

async def get_json_data(url: str) -> dict:
    async with ClientSession(connector=TCPConnector(ssl=False)) as session:
        async with session.get(url=url) as response:
            return await response.json()

# 下载香港地图
# data = asyncio.run(
#     get_json_data(url="https://echarts.apache.org/examples/data/asset/geo/HK.json")
# )

loop = asyncio.get_event_loop()
data = loop.run_until_complete(get_json_data(url="https://echarts.apache.org/examples/data/asset/geo/HK.json"))

MAP_DATA = [
    ["中西区", 20057.34],
    ["湾仔", 15477.48],
    ["东区", 31686.1],
    ["南区", 6992.6],
    ["油尖旺", 44045.49],
    ["深水埗", 40689.64],
    ["九龙城", 37659.78],
    ["黄大仙", 45180.97],
    ["观塘", 55204.26],
    ["葵青", 21900.9],
    ["荃湾", 4918.26],
    ["屯门", 5881.84],
    ["元朗", 4178.01],
    ["北区", 2227.92],
    ["大埔", 2180.98],
    ["沙田", 9172.94],
    ["西贡", 3368],
    ["离岛", 806.98],
]


NAME_MAP_DATA = {
    # "key": "value"
    # "name on the hong kong map": "name in the MAP DATA",
    "Central and Western": "中西区",
    "Eastern": "东区",
    "Islands": "离岛",
    "Kowloon City": "九龙城",
    "Kwai Tsing": "葵青",
    "Kwun Tong": "观塘",
    "North": "北区",
    "Sai Kung": "西贡",
    "Sha Tin": "沙田",
    "Sham Shui Po": "深水埗",
    "Southern": "南区",
    "Tai Po": "大埔",
    "Tsuen Wan": "荃湾",
    "Tuen Mun": "屯门",
    "Wan Chai": "湾仔",
    "Wong Tai Sin": "黄大仙",
    "Yau Tsim Mong": "油尖旺",
    "Yuen Long": "元朗",
}

(
    Map(init_opts=opts.InitOpts(width="1400px", height="800px"))
    .add_js_funcs("echarts.registerMap('HK', {});".format(data))
    .add(
        series_name="香港18区人口密度",
        maptype="HK",
        data_pair=MAP_DATA,
        name_map=NAME_MAP_DATA,
        is_map_symbol_show=False,
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="香港18区人口密度 (2011)",
            subtitle="人口密度数据来自Wikipedia",
            subtitle_link=WIKI_LINK,
        ),
        tooltip_opts=opts.TooltipOpts(
            trigger="item", formatter="{b}<br/>{c} (p / km2)"
        ),
        visualmap_opts=opts.VisualMapOpts(
            min_=800,
            max_=50000,
            range_text=["High", "Low"],
            is_calculable=True,
            range_color=["lightskyblue", "yellow", "orangered"],
        ),
    )
    .render("population_density_of_HongKong.html")
)

在这里插入图片描述

4.7 Map_china_citites

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add(
        "商家A",
        [list(z) for z in zip(Faker.guangdong_city, Faker.values())],
        "china-cities",
        label_opts=opts.LabelOpts(is_show=False),
    )
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Map-中国地图(带城市)"),
        visualmap_opts=opts.VisualMapOpts(),
    )
    .render("map_china_cities.html")
)

4.8 Map_without_label

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
    .set_series_opts(label_opts=opts.LabelOpts(is_show=False))
    .set_global_opts(title_opts=opts.TitleOpts(title="Map-不显示Label"))
    .render("map_without_label.html")
)

在这里插入图片描述

4.9 Map_visualmap

from pyecharts import options as opts
from pyecharts.charts import Map
from pyecharts.faker import Faker

c = (
    Map()
    .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Map-VisualMap(连续型)"),
        visualmap_opts=opts.VisualMapOpts(max_=200),
    )
    .render("map_visualmap.html")
)

在这里插入图片描述

4.10 Map3d_china_base

from pyecharts import options as opts
from pyecharts.charts import Map3D
from pyecharts.globals import ChartType

c = (
    Map3D()
    .add_schema(
        itemstyle_opts=opts.ItemStyleOpts(
            color="rgb(5,101,123)",
            opacity=1,
            border_width=0.8,
            border_color="rgb(62,215,213)",
        ),
        map3d_label=opts.Map3DLabelOpts(
            is_show=True,
            text_style=opts.TextStyleOpts(
                color="#fff", font_size=16, background_color="rgba(0,0,0,0)"
            ),
        ),
        emphasis_label_opts=opts.LabelOpts(is_show=True),
        light_opts=opts.Map3DLightOpts(
            main_color="#fff",
            main_intensity=1.2,
            is_main_shadow=False,
            main_alpha=55,
            main_beta=10,
            ambient_intensity=0.3,
        ),
    )
    .add(series_name="", data_pair="", maptype=ChartType.MAP3D)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="全国行政区划地图-Base"),
        visualmap_opts=opts.VisualMapOpts(is_show=False),
        tooltip_opts=opts.TooltipOpts(is_show=True),
    )
    .render("map3d_china_base.html")
)

4.11 Map_globe_base

import pyecharts.options as opts
from pyecharts.charts import MapGlobe
from pyecharts.faker import POPULATION

data = [x for _, x in POPULATION[1:]]
low, high = min(data), max(data)

c = (
    MapGlobe()
    .add_schema()
    .add(
        maptype="world",
        series_name="World Population",
        data_pair=POPULATION[1:],
        is_map_symbol_show=False,
        label_opts=opts.LabelOpts(is_show=False),
    )
    .set_global_opts(
        visualmap_opts=opts.VisualMapOpts(
            min_=low,
            max_=high,
            range_text=["max", "min"],
            is_calculable=True,
            range_color=["lightskyblue", "yellow", "orangered"],
        )
    )
    .render("map_globe_base.html")
)

5、Flask + pyecharts

如何在 Flask 中使用 pyecharts。

5.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()

在这里插入图片描述

5.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()

5.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:
    代码同上。

5.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()

在这里插入图片描述


结语

如果您觉得该方法或代码有一点点用处,可以给作者点个赞,或打赏杯咖啡;╮( ̄▽ ̄)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果您需要相关功能的代码定制化开发,可以留言私信作者;(✿◡‿◡)
感谢各位大佬童鞋们的支持!( ´ ▽´ )ノ ( ´ ▽´)っ!!!

“侬今葬花人笑痴,他年葬侬知是谁?”
在这里插入图片描述

  • 3
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装Flaskpyecharts 首先,我们需要安装Flaskpyecharts。可以使用以下命令安装: ``` pip install Flask pip install pyecharts ``` 2. 创建Flask应用 创建一个新的Flask应用,创建app.py文件并添加以下代码: ``` from flask import Flask, render_template from pyecharts import options as opts from pyecharts.charts import Bar app = Flask(__name__) @app.route("/") def index(): return render_template("index.html") if __name__ == "__main__": app.run() ``` 这将创建一个基本的Flask应用,并在根路径上显示index.html模板。 3. 创建pyecharts图表 接下来,我们将创建一个pyecharts图表并将其添加到index.html页面中。我们将创建一个简单的柱形图来显示一些示例数据。在app.py文件中添加以下代码: ``` @app.route("/chart") def chart(): bar = ( Bar() .add_xaxis(["A", "B", "C", "D", "E"]) .add_yaxis("Series 1", [5, 20, 36, 10, 75]) .set_global_opts(title_opts=opts.TitleOpts(title="Bar Chart")) ) return render_template("chart.html", chart=bar.render_embed()) if __name__ == "__main__": app.run() ``` 这将创建一个名为“chart”的路由,该路由将呈现一个简单的柱形图。我们还使用render_embed()方法将图表嵌入到HTML页面中。 4. 创建HTML模板 最后,我们需要创建HTML模板来呈现我们的数据大屏幕。在项目根目录下创建一个名为“templates”的文件夹,并在其中创建两个名为“index.html”和“chart.html”的文件。 在index.html文件中添加以下代码: ``` <!DOCTYPE html> <html> <head> <title>Flask + pyecharts Data Dashboard</title> </head> <body> <h1>Welcome to the Data Dashboard</h1> <a href="/chart">View Chart</a> </body> </html> ``` 这将显示一个欢迎消息和一个链接,该链接将导航到我们刚刚创建的名为“chart”的路由。 在chart.html文件中添加以下代码: ``` <!DOCTYPE html> <html> <head> <title>Flask + pyecharts Data Dashboard</title> <script src="https://cdn.bootcss.com/echarts/4.7.0-rc.1/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> {{ chart|safe }} </body> </html> ``` 这将在页面上显示图表,并使用Flask渲染器呈现我们在app.py中创建的图表。 5. 运行应用程序 现在我们已经准备好运行我们的应用程序了。在命令行中,导航到项目目录并运行以下命令: ``` python app.py ``` 这将启动我们的Flask应用程序。现在,我们可以在浏览器中打开http://localhost:5000/并查看我们的数据大屏幕了。点击“View Chart”链接将带您到我们的示例柱形图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值