pyecharts 选择数据点删除，并更新图表 demo

以下是一个简单的示例代码，演示了如何使用 pyecharts 选择数据点删除，并更新图表：

from pyecharts.charts import Scatter
from pyecharts import options as opts
from pyecharts.commons.utils import JsCode

# 准备数据
data = [
    [10.0, 8.04],
    [8.0, 6.95],
    [13.0, 7.58],
    [9.0, 8.81],
    [11.0, 8.33],
    [14.0, 9.96],
    [6.0, 7.24],
    [4.0, 4.26],
    [12.0, 10.84],
    [7.0, 4.82],
    [5.0, 5.68]
]

# 创建散点图
scatter_chart = Scatter()
scatter_chart.add_xaxis([item[0] for item in data])
scatter_chart.add_yaxis("", [item[1] for item in data])

# 启用 JavaScript 扩展
scatter_chart.extend_axis(
    xaxis=opts.AxisOpts(
        axislabel_opts=opts.LabelOpts(formatter=JsCode(
            """function (value) {return value.toFixed(1);}"""
        ))
    )
)
scatter_chart.extend_axis(
    yaxis=opts.AxisOpts(
        axislabel_opts=opts.LabelOpts(formatter=JsCode(
            """function (value) {return value.toFixed(1);}"""
        ))
    )
)

# 监听鼠标点击事件
scatter_chart.set_global_opts(
    title_opts=opts.TitleOpts(title="Scatter Chart with Click Function"),
    toolbox_opts=opts.ToolboxOpts(
        feature=opts.ToolBoxFeatureOpts(
            save_as_image=opts.ToolBoxFeatureSaveAsImageOpts(),
            data_view=opts.ToolBoxFeatureDataViewOpts(),
            restore=opts.ToolBoxFeatureRestoreOpts()
        )
    ),
    tooltip_opts=opts.TooltipOpts(
        trigger="item",
        formatter="({c})"
    ),
    graphic_opts=[
        opts.GraphicGroup(
            graphic_item=opts.GraphicItem(
                left="center",
                top="center",
                z=100
            ),
            children=[
                opts.GraphicRect(
                    graphic_item=opts.GraphicItem(
                        z=100
                    ),
                    bounding="raw",
                    left="center",
                    top="center",
                    shape_opts=opts.ShapeOpts(
                        width=400,
                        height=200
                    ),
                    style_opts=opts.CommonGraphicStyleOpts(
                        fill="#fff",
                        stroke="#555",
                        lineWidth=1,
                        shadowBlur=10,
                        shadowOffsetX=0,
                        shadowOffsetY=0,
                        shadowColor="rgba(0, 0, 0, 0.3)"
                    )
                ),
                opts.GraphicText(
                    graphic_item=opts.GraphicItem(
                        left="center",
                        top="center",
                        z=100
                    ),
                    style_opts=opts.TextStyleOpts(
                        text="Click to Remove",
                        font="bold 14px Microsoft YaHei",
                        fill="#333"
                    )
                )
            ]
        )
    ],
    axispointer_opts=opts.AxisPointerOpts(
        is_show=True,
        link=[{"xAxisIndex": "all"}],
        label=opts.LabelOpts(background_color="#777")
    )
)

# 定义 JavaScript 代码
js_code = """
    chart.on('click', function (params) {
        console.log(params);
        if (params.componentType === 'series') {
            chart.setOption({
                series: [{
                    id: 'scatter',
                    data: params.seriesData.filter(function (item) {
                        return item[0] !== params.data[0] || item[1] !== params.data[1];
                    })
                }]
            });
        }
    });
"""

# 添加 JavaScript 代码
scatter_chart.add_js_funcs(js_code)

# 渲染图表
scatter_chart.render_notebook()

在这个示例中，我们创建了一个散点图，并启用了 JavaScript 扩展。然后，我们使用 set_global_opts 方法设置了工具箱、提示框、图形组和轴指示器等选项。接下来，我们定义了一个 JavaScript 代码块，用于监听鼠标点击事件，并根据用户选择的数据点更新图表。最后，我们使用 add_js_funcs 方法将 JavaScript 代码添加到图表中，并使用 render_notebook 方法将图表渲染到 Jupyter Notebook 中。

当你在 Jupyter Notebook 中运行这段代码时，你会看到一个散点图，上面有一个提示框和一个图形组。当你点击散点图上的任何一个数据点时，该数据点将被删除，并更新散点图。