数据展示，曲线图动态增量更新曲线，而并不是直接覆盖整张图

[yeqingcheng368]

您好！功能询问：数据展示，曲线图动态增量更新曲线，而并不是直接覆盖整张图

[wang0618]

需要使用原生的echarts配合 run_js() 来实现了，我这里封装了一个简单的Echarts类:

import json
import random
import time

from pywebio import start_server
from pywebio.output import *
from pywebio.session import *
from pywebio.utils import random_str

TPL = """
<div id="echarts_DOM_ID" style="height: 400px"></div>
<script>
    require(['https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js'], function (echarts) {
        let dom_id = 'DOM_ID'
        let option = OPTIONS
        let update_func = UPDATE_FUNC
        if (!window._echarts_update) {
            window._echarts_update = {}
        }
        let chart = echarts.init(document.getElementById(`echarts_${dom_id}`));
        chart.setOption(option)
        window._echarts_update[dom_id] = function (data) {
            update_func.apply(option, [data])
            chart.setOption(option)
        }
    })
</script>
"""


class Echarts:
    def __init__(self, options, update_func):
        """
        :param dict options: the init options for echarts. Doc: https://echarts.apache.org/en/option.html#title
        :param str update_func: the js function used to update your echarts options.
           You can use `this` to access the options object.
        """
        self.options = options
        self.update_func = update_func
        self.dom_id = random_str(10)
        self._output = False

    def output(self):
        if self._output:
            raise RuntimeError("Only output once!")
        self._output = True
        html = TPL.replace('DOM_ID', self.dom_id) \
            .replace('OPTIONS', json.dumps(self.options)) \
            .replace('UPDATE_FUNC', self.update_func)
        return put_html(html)

    def update(self, data):
        if not self._output:
            raise RuntimeError("You must output the chart first.")

        run_js("_echarts_update[dom_id](data)", dom_id=self.dom_id, data=data)


def main():
    options = {
        'animation': False,
        'xAxis': {
            'type': 'category',
            'data': list(range(100))
        },
        'yAxis': {
            'type': 'value'
        },
        'series': [
            {
                'type': 'line',
                'smooth': False,
                'data': []
            }
        ]
    }
    update_func = """
    function (d) {
        this.series[0].data.push(d);
        this.series[0].data = this.series[0].data.slice(-100);
    }
    """
    chart = Echarts(options, update_func)
    put_collapse("Chart", chart.output(), open=True)
    chart2 = Echarts(options, update_func)
    chart2.output()

    while True:
        chart.update(random.randint(0, 99))
        chart2.update(random.randint(0, 99))
        time.sleep(0.1)


start_server(main, port=8080, debug=True)

使用方式见注释main函数

[yeqingcheng368]

谢谢，已经成功了。但部署的时候能否把这个'https://cdn.jsdelivr.net/gh/pyecharts/pyecharts-assets@master/assets/echarts.min.js'转换为本地js文件

[wang0618]

可以替换成echarts的其他CDN地址，我已经在上面代码中更新了一个国内可用的echarts CDN