Exemplo n.º 1
0
def plot_kline(df, rendered=True, col=""):
    """
    针对 dataframe 直接画出标准看盘软件的上k线图下成交量图的形式

    :param df:
    :param rendered:
    :param col:
    :return:
    """
    kline = (
        Kline()
        .add_xaxis(xaxis_data=list(df["date"]))
        .add_yaxis(
            series_name="",
            itemstyle_opts=opts.ItemStyleOpts(
                color="#ef232a",
                color0="#14b143",
                border_color="#ef232a",
                border_color0="#14b143",
            ),
            y_axis=list(zip(df["open"], df["close"], df["high"], df["low"])),
            markpoint_opts=opts.MarkPointOpts(
                data=[
                    opts.MarkPointItem(type_="max", name="最大值"),
                    opts.MarkPointItem(type_="min", name="最小值"),
                ],
                symbol="pin",
                symbol_size=[56, 40],
                # label_opts=opts.LabelOpts(color="#CCFFFF",position=["top", "bottom"])
            ),
        )
        .set_global_opts(
            datazoom_opts=[
                opts.DataZoomOpts(
                    is_show=True,
                    type_="slider",
                    range_start=50,
                    range_end=100,
                    xaxis_index=[0, 1],
                ),
                opts.DataZoomOpts(
                    is_show=False,
                    type_="inside",
                    range_start=50,
                    range_end=100,
                    xaxis_index=1,
                ),
            ],
            tooltip_opts=opts.TooltipOpts(
                is_show=True,
                trigger="axis",
                trigger_on="mousemove",
                axis_pointer_type="cross",
            ),
        )
    )
    if col:
        line = (
            Line()
            .add_xaxis(xaxis_data=list(df["date"]))
            .add_yaxis(
                series_name="",
                y_axis=list(df[col]),
                is_smooth=True,
                linestyle_opts=opts.LineStyleOpts(opacity=0.5),
                label_opts=opts.LabelOpts(is_show=False),
            )
        )
        kline = kline.overlap(line)

    if "volume" in df.columns:
        vl = list(df["volume"])
    elif "amount" in df.columns:
        vl = list(df["amount"])
    else:
        vl = [0 for _ in range(len(df))]
    bar = (
        Bar()
        .add_js_funcs("var barData = {}".format(list(df["close"] - df["open"])))
        .add_xaxis(xaxis_data=list(df["date"]))
        .add_yaxis(
            series_name="",
            yaxis_data=vl,
            label_opts=opts.LabelOpts(is_show=False),
            itemstyle_opts=opts.ItemStyleOpts(
                color=JsCode(
                    """
                function(params) {
                    var colorList;
                    if (barData[params.dataIndex]>0) {
                        colorList = '#ef232a';
                    } else {
                        colorList = '#14b143';
                    }
                    return colorList;
                }
                """
                )
            ),
        )
        .set_global_opts(
            tooltip_opts=opts.TooltipOpts(
                is_show=True,
                trigger="axis",
                trigger_on="mousemove",
                axis_pointer_type="cross",
            ),
        )
    )
    grid_chart = Grid()
    grid_chart.add_js_funcs("var barData = {}".format(list(df["close"] - df["open"])))
    grid_chart.add(
        kline,
        grid_opts=opts.GridOpts(
            pos_left="10%", pos_right="1%", pos_top="2%", height="65%"
        ),
    )

    grid_chart.add(
        bar,
        grid_opts=opts.GridOpts(
            pos_left="10%", pos_right="1%", pos_top="71%", height="22%"
        ),
    )
    if rendered:
        return grid_chart.render_notebook()
    else:
        return grid_chart
Exemplo n.º 2
0
from pywebio.output import put_html
from pyecharts import options as opts
from pyecharts.charts import Grid, Liquid
from pyecharts.commons.utils import JsCode

l1 = (
    Liquid()
    .add("lq", [0.6, 0.7], center=["60%", "50%"])
    .set_global_opts(title_opts=opts.TitleOpts(title="多个 Liquid 显示"))
)

l2 = Liquid().add(
    "lq",
    [0.3254],
    center=["25%", "50%"],
    label_opts=opts.LabelOpts(
        font_size=50,
        formatter=JsCode(
            """function (param) {
                    return (Math.floor(param.value * 10000) / 100) + '%';
                }"""
        ),
        position="inside",
    ),
)

grid = Grid().add(l1, grid_opts=opts.GridOpts()).add(l2, grid_opts=opts.GridOpts())
put_html(grid.render_notebook())

Exemplo n.º 3
0
def draw_chart():
    kline = (
        Kline()
        .add_xaxis(xaxis_data=data["times"])
        .add_yaxis(
            series_name="",
            y_axis=data["datas"],
            itemstyle_opts=opts.ItemStyleOpts(
                color="#ef232a",
                color0="#14b143",
                border_color="#ef232a",
                border_color0="#14b143",
            ),
            markpoint_opts=opts.MarkPointOpts(
                data=[
                    opts.MarkPointItem(type_="max", name="最大值"),
                    opts.MarkPointItem(type_="min", name="最小值"),
                ]
            ),
            markline_opts=opts.MarkLineOpts(
                label_opts=opts.LabelOpts(
                    position="middle", color="blue", font_size=15
                ),
                data=split_data_part(),
                symbol=["circle", "none"],
            ),
        )
        .set_series_opts(
            markarea_opts=opts.MarkAreaOpts(is_silent=True, data=split_data_part())
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(title="K线周期图表", pos_left="0"),
            xaxis_opts=opts.AxisOpts(
                type_="category",
                is_scale=True,
                boundary_gap=False,
                axisline_opts=opts.AxisLineOpts(is_on_zero=False),
                splitline_opts=opts.SplitLineOpts(is_show=False),
                split_number=20,
                min_="dataMin",
                max_="dataMax",
            ),
            yaxis_opts=opts.AxisOpts(
                is_scale=True, splitline_opts=opts.SplitLineOpts(is_show=True)
            ),
            tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="line"),
            datazoom_opts=[
                opts.DataZoomOpts(
                    is_show=False, type_="inside", xaxis_index=[0, 0], range_end=100
                ),
                opts.DataZoomOpts(
                    is_show=True, xaxis_index=[0, 1], pos_top="97%", range_end=100
                ),
                opts.DataZoomOpts(is_show=False, xaxis_index=[0, 2], range_end=100),
            ],
            # 三个图的 axis 连在一块
            # axispointer_opts=opts.AxisPointerOpts(
            #     is_show=True,
            #     link=[{"xAxisIndex": "all"}],
            #     label=opts.LabelOpts(background_color="#777"),
            # ),
        )
    )

    kline_line = (
        Line()
        .add_xaxis(xaxis_data=data["times"])
        .add_yaxis(
            series_name="MA5",
            y_axis=calculate_ma(day_count=5),
            is_smooth=True,
            linestyle_opts=opts.LineStyleOpts(opacity=0.5),
            label_opts=opts.LabelOpts(is_show=False),
        )
        .set_global_opts(
            xaxis_opts=opts.AxisOpts(
                type_="category",
                grid_index=1,
                axislabel_opts=opts.LabelOpts(is_show=False),
            ),
            yaxis_opts=opts.AxisOpts(
                grid_index=1,
                split_number=3,
                axisline_opts=opts.AxisLineOpts(is_on_zero=False),
                axistick_opts=opts.AxisTickOpts(is_show=False),
                splitline_opts=opts.SplitLineOpts(is_show=False),
                axislabel_opts=opts.LabelOpts(is_show=True),
            ),
        )
    )
    # Overlap Kline + Line
    overlap_kline_line = kline.overlap(kline_line)

    # Bar-1
    bar_1 = (
        Bar()
        .add_xaxis(xaxis_data=data["times"])
        .add_yaxis(
            series_name="Volumn",
            yaxis_data=data["vols"],
            xaxis_index=1,
            yaxis_index=1,
            label_opts=opts.LabelOpts(is_show=False),
            # 根据 echarts demo 的原版是这么写的
            # itemstyle_opts=opts.ItemStyleOpts(
            #     color=JsCode("""
            #     function(params) {
            #         var colorList;
            #         if (data.datas[params.dataIndex][1]>data.datas[params.dataIndex][0]) {
            #           colorList = '#ef232a';
            #         } else {
            #           colorList = '#14b143';
            #         }
            #         return colorList;
            #     }
            #     """)
            # )
            # 改进后在 grid 中 add_js_funcs 后变成如下
            itemstyle_opts=opts.ItemStyleOpts(
                color=JsCode(
                    """
                function(params) {
                    var colorList;
                    if (barData[params.dataIndex][1] > barData[params.dataIndex][0]) {
                        colorList = '#ef232a';
                    } else {
                        colorList = '#14b143';
                    }
                    return colorList;
                }
                """
                )
            ),
        )
        .set_global_opts(
            xaxis_opts=opts.AxisOpts(
                type_="category",
                grid_index=1,
                axislabel_opts=opts.LabelOpts(is_show=False),
            ),
            legend_opts=opts.LegendOpts(is_show=False),
        )
    )

    # Bar-2 (Overlap Bar + Line)
    bar_2 = (
        Bar()
        .add_xaxis(xaxis_data=data["times"])
        .add_yaxis(
            series_name="MACD",
            yaxis_data=data["macds"],
            xaxis_index=2,
            yaxis_index=2,
            label_opts=opts.LabelOpts(is_show=False),
            itemstyle_opts=opts.ItemStyleOpts(
                color=JsCode(
                    """
                        function(params) {
                            var colorList;
                            if (params.data >= 0) {
                              colorList = '#ef232a';
                            } else {
                              colorList = '#14b143';
                            }
                            return colorList;
                        }
                        """
                )
            ),
        )
        .set_global_opts(
            xaxis_opts=opts.AxisOpts(
                type_="category",
                grid_index=2,
                axislabel_opts=opts.LabelOpts(is_show=False),
            ),
            yaxis_opts=opts.AxisOpts(
                grid_index=2,
                split_number=4,
                axisline_opts=opts.AxisLineOpts(is_on_zero=False),
                axistick_opts=opts.AxisTickOpts(is_show=False),
                splitline_opts=opts.SplitLineOpts(is_show=False),
                axislabel_opts=opts.LabelOpts(is_show=True),
            ),
            legend_opts=opts.LegendOpts(is_show=False),
        )
    )

    line_2 = (
        Line()
        .add_xaxis(xaxis_data=data["times"])
        .add_yaxis(
            series_name="DIF",
            y_axis=data["difs"],
            xaxis_index=2,
            yaxis_index=2,
            label_opts=opts.LabelOpts(is_show=False),
        )
        .add_yaxis(
            series_name="DIF",
            y_axis=data["deas"],
            xaxis_index=2,
            yaxis_index=2,
            label_opts=opts.LabelOpts(is_show=False),
        )
        .set_global_opts(legend_opts=opts.LegendOpts(is_show=False))
    )
    # 最下面的柱状图和折线图
    overlap_bar_line = bar_2.overlap(line_2)

    # 最后的 Grid
    grid_chart = Grid()

    # 这个是为了把 data.datas 这个数据写入到 html 中,还没想到怎么跨 series 传值
    # demo 中的代码也是用全局变量传的
    grid_chart.add_js_funcs("var barData = {}".format(data["datas"]))

    # K线图和 MA5 的折线图
    grid_chart.add(
        overlap_kline_line,
        grid_opts=opts.GridOpts(pos_left="3%", pos_right="1%", height="60%"),
    )
    # Volumn 柱状图
    grid_chart.add(
        bar_1,
        grid_opts=opts.GridOpts(
            pos_left="3%", pos_right="1%", pos_top="71%", height="10%"
        ),
    )
    # MACD DIFS DEAS
    grid_chart.add(
        overlap_bar_line,
        grid_opts=opts.GridOpts(
            pos_left="3%", pos_right="1%", pos_top="82%", height="14%"
        ),
    )
    put_html(grid_chart.render_notebook())
Exemplo n.º 4
0
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Grid - 多图合并"),
    )
)

line = (
    Line()
    .add_xaxis(x)
    .add_yaxis("蒸发量", [x + 50 for x in data_china]
    )
)

bar.overlap(line)
grid = Grid()
grid.add(bar, opts.GridOpts(pos_left="5%", pos_right="5%"), is_control_axis_index=True)
grid.render_notebook()


# 词云
data = [("生活资源", "999"),("供热管理", "888"),("供气质量", "777"),("生活用水管理", "688"),("一次供水问题", "588"),("交通运输", "516"),("城市交通", "515"),("环境保护", "483"),("房地产管理", "462"),("城乡建设", "449"),("社会保障与福利", "429"),("社会保障", "407"),("文体与教育管理", "406"),("公共安全", "406"),("公交运输管理", "386"),("出租车运营管理", "385"),("供热管理", "375"),("市容环卫", "355"),("自然资源管理", "355"),("粉尘污染", "335"),("噪声污染", "324"),("土地资源管理", "304"),("物业服务与管理", "304"),("医疗卫生", "284"),("粉煤灰污染", "284"),("占道", "284"),("供热发展", "254"),("农村土地规划管理", "254"),("生活噪音", "253"),("供热单位影响", "253"),("城市供电", "223"),("房屋质量与安全", "223"),("大气污染", "223"),("房屋安全", "223"),("文化活动", "223"),("拆迁管理", "223"),("公共设施", "223"),("供气质量", "223"),("供电管理", "223"),("燃气管理", "152"),("教育管理", "152"),("医疗纠纷", "152"),("执法监督", "152"),("设备安全", "152"),("政务建设", "152"),("县区、开发区", "152"),("宏观经济", "152"),("教育管理", "112"),("社会保障", "112"),("生活用水管理", "112"),("物业服务与管理", "112"),("分类列表", "112"),("农业生产", "112"),("二次供水问题", "112"),("城市公共设施", "92"),("拆迁政策咨询", "92"),("物业服务", "92"),("物业管理", "92"),("社会保障保险管理", "92"),("低保管理", "92"),("文娱市场管理", "72"),("城市交通秩序管理", "72"),("执法争议", "72"),("商业烟尘污染", "72"),("占道堆放", "71"),("地上设施", "71"),("水质", "71"),("无水", "71"),("供热单位影响", "71"),("人行道管理", "71"),("主网原因", "71"),("集中供热", "71"),("客运管理", "71"),("国有公交(大巴)管理", "71"),("工业粉尘污染", "71"),("治安案件", "71"),("压力容器安全", "71"),("身份证管理", "71"),("群众健身", "41"),("工业排放污染", "41"),("破坏森林资源", "41"),("市场收费", "41"),("生产资金", "41"),("生产噪声", "41"),("农村低保", "41"),("劳动争议", "41"),("劳动合同争议", "41"),("劳动报酬与福利", "41"),("医疗事故", "21"),("停供", "21"),("基础教育", "21"),("职业教育", "21"),("物业资质管理", "21"),("拆迁补偿", "21"),("设施维护", "21"),("市场外溢", "11"),("占道经营", "11"),("树木管理", "11"),("农村基础设施", "11"),("无水", "11"),("供气质量", "11"),("停气", "11"),("市政府工作部门(含部门管理机构、直属单位)", "11"),("燃气管理", "11"),("市容环卫", "11"),("新闻传媒", "11"),("人才招聘", "11"),("市场环境", "11"),("行政事业收费", "11"),("食品安全与卫生", "11"),("城市交通", "11"),("房地产开发", "11"),("房屋配套问题", "11"),("物业服务", "11"),("物业管理", "11"),("占道", "11"),("园林绿化", "11"),("户籍管理及身份证", "11"),("公交运输管理", "11"),("公路(水路)交通", "11"),("房屋与图纸不符", "11"),("有线电视", "11"),("社会治安", "11"),("林业资源", "11"),("其他行政事业收费", "11"),("经营性收费", "11"),("食品安全与卫生", "11"),("体育活动", "11"),("有线电视安装及调试维护", "11"),("低保管理", "11"),("劳动争议", "11"),("社会福利及事务", "11"),("一次供水问题", "11"),]

wordCloud = (
    WordCloud()
    .add(series_name="热点分析", data_pair=data, word_size_range=[6, 66])
    .set_global_opts(
        title_opts=opts.TitleOpts(
            title="热点分析", title_textstyle_opts=opts.TextStyleOpts(font_size=23)
        ),
        tooltip_opts=opts.TooltipOpts(is_show=True),
    )
)
def draw_charts():
    kline_data = [data[1:-1] for data in chart_data["values"]]
    kline = (Kline().add_xaxis(
        xaxis_data=chart_data["categoryData"]).add_yaxis(
            series_name="Dow-Jones index",
            y_axis=kline_data,
            itemstyle_opts=opts.ItemStyleOpts(color="#ec0000",
                                              color0="#00da3c"),
        ).set_global_opts(
            legend_opts=opts.LegendOpts(is_show=False,
                                        pos_bottom=10,
                                        pos_left="center"),
            datazoom_opts=[
                opts.DataZoomOpts(
                    is_show=False,
                    type_="inside",
                    xaxis_index=[0, 1],
                    range_start=98,
                    range_end=100,
                ),
                opts.DataZoomOpts(
                    is_show=True,
                    xaxis_index=[0, 1],
                    type_="slider",
                    pos_top="85%",
                    range_start=98,
                    range_end=100,
                ),
            ],
            yaxis_opts=opts.AxisOpts(
                is_scale=True,
                splitarea_opts=opts.SplitAreaOpts(
                    is_show=True,
                    areastyle_opts=opts.AreaStyleOpts(opacity=1)),
            ),
            tooltip_opts=opts.TooltipOpts(
                trigger="axis",
                axis_pointer_type="cross",
                background_color="rgba(245, 245, 245, 0.8)",
                border_width=1,
                border_color="#ccc",
                textstyle_opts=opts.TextStyleOpts(color="#000"),
            ),
            visualmap_opts=opts.VisualMapOpts(
                is_show=False,
                dimension=2,
                series_index=5,
                is_piecewise=True,
                pieces=[
                    {
                        "value": 1,
                        "color": "#00da3c"
                    },
                    {
                        "value": -1,
                        "color": "#ec0000"
                    },
                ],
            ),
            axispointer_opts=opts.AxisPointerOpts(
                is_show=True,
                link=[{
                    "xAxisIndex": "all"
                }],
                label=opts.LabelOpts(background_color="#777"),
            ),
            brush_opts=opts.BrushOpts(
                x_axis_index="all",
                brush_link="all",
                out_of_brush={"colorAlpha": 0.1},
                brush_type="lineX",
            ),
        ))

    line = (Line().add_xaxis(xaxis_data=chart_data["categoryData"]).add_yaxis(
        series_name="MA5",
        y_axis=calculate_ma(day_count=5, data=chart_data),
        is_smooth=True,
        is_hover_animation=False,
        linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    ).add_yaxis(
        series_name="MA10",
        y_axis=calculate_ma(day_count=10, data=chart_data),
        is_smooth=True,
        is_hover_animation=False,
        linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    ).add_yaxis(
        series_name="MA20",
        y_axis=calculate_ma(day_count=20, data=chart_data),
        is_smooth=True,
        is_hover_animation=False,
        linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    ).add_yaxis(
        series_name="MA30",
        y_axis=calculate_ma(day_count=30, data=chart_data),
        is_smooth=True,
        is_hover_animation=False,
        linestyle_opts=opts.LineStyleOpts(width=3, opacity=0.5),
        label_opts=opts.LabelOpts(is_show=False),
    ).set_global_opts(xaxis_opts=opts.AxisOpts(type_="category")))

    bar = (Bar().add_xaxis(xaxis_data=chart_data["categoryData"]).add_yaxis(
        series_name="Volume",
        yaxis_data=chart_data["volumes"],
        xaxis_index=1,
        yaxis_index=1,
        label_opts=opts.LabelOpts(is_show=False),
    ).set_global_opts(
        xaxis_opts=opts.AxisOpts(
            type_="category",
            is_scale=True,
            grid_index=1,
            boundary_gap=False,
            axisline_opts=opts.AxisLineOpts(is_on_zero=False),
            axistick_opts=opts.AxisTickOpts(is_show=False),
            splitline_opts=opts.SplitLineOpts(is_show=False),
            axislabel_opts=opts.LabelOpts(is_show=False),
            split_number=20,
            min_="dataMin",
            max_="dataMax",
        ),
        yaxis_opts=opts.AxisOpts(
            grid_index=1,
            is_scale=True,
            split_number=2,
            axislabel_opts=opts.LabelOpts(is_show=False),
            axisline_opts=opts.AxisLineOpts(is_show=False),
            axistick_opts=opts.AxisTickOpts(is_show=False),
            splitline_opts=opts.SplitLineOpts(is_show=False),
        ),
        legend_opts=opts.LegendOpts(is_show=False),
    ))

    # Kline And Line
    overlap_kline_line = kline.overlap(line)

    # Grid Overlap + Bar
    grid_chart = Grid(init_opts=opts.InitOpts(
        width="1000px",
        height="800px",
        animation_opts=opts.AnimationOpts(animation=False),
    ))
    grid_chart.add(
        overlap_kline_line,
        grid_opts=opts.GridOpts(pos_left="10%", pos_right="8%", height="50%"),
    )
    grid_chart.add(
        bar,
        grid_opts=opts.GridOpts(pos_left="10%",
                                pos_right="8%",
                                pos_top="63%",
                                height="16%"),
    )

    put_html(grid_chart.render_notebook())
Exemplo n.º 6
0
def plot_kline(
    df,
    rendered=True,
    ucolor="#ef232a",
    dcolor="#14b143",
    ucolorborder=None,
    dcolorborder=None,
    ucolorvolume=None,
    dcolorvolume=None,
    col="",
):
    """
    针对 dataframe 直接画出标准看盘软件的上k线图下成交量图的形式

    :param df:
    :param rendered:
    :param ucolor: str for color when going up, default red in A stock as "#ef232a"
    :param dcolor: str for color when going down, default green in A stock as "#14b143"
    :param col:
    :return:
    """
    # TODO: color changing seems to make no effect, possible issue with pyecharts
    if ucolorborder is None:
        ucolorborder = ucolor
    if dcolorborder is None:
        dcolorborder = dcolor
    if ucolorvolume is None:
        if ucolor != "#ffffff":
            ucolorvolume = ucolor
        else:
            ucolorvolume = ucolorborder
    if dcolorvolume is None:
        if dcolor != "#ffffff":
            dcolorvolume = dcolor
        else:
            dcolorvolume = dcolorborder

    kline = (
        Kline().add_xaxis(xaxis_data=list(df["date"])).add_yaxis(
            series_name="",
            itemstyle_opts=opts.ItemStyleOpts(
                color=ucolor,
                color0=dcolor,
                border_color=ucolorborder,  # ucolor,
                border_color0=dcolorborder,  # dcolor,
            ),
            y_axis=list(zip(df["open"], df["close"], df["low"], df["high"])),
            markpoint_opts=opts.MarkPointOpts(
                data=[
                    opts.MarkPointItem(type_="max", name="最大值"),
                    opts.MarkPointItem(type_="min", name="最小值"),
                ],
                symbol="pin",
                symbol_size=[56, 40],
                # label_opts=opts.LabelOpts(color="#CCFFFF",position=["top", "bottom"])
            ),
        ).set_global_opts(
            datazoom_opts=[
                opts.DataZoomOpts(
                    is_show=True,
                    type_="slider",
                    range_start=50,
                    range_end=100,
                    xaxis_index=[0, 1],
                ),
                opts.DataZoomOpts(
                    is_show=False,
                    type_="inside",
                    range_start=50,
                    range_end=100,
                    xaxis_index=1,
                ),
            ],
            tooltip_opts=opts.TooltipOpts(
                is_show=True,
                trigger="axis",
                trigger_on="mousemove",
                axis_pointer_type="cross",
            ),
        ))
    if col is not None:
        for c in col:
            line = (Line().add_xaxis(xaxis_data=list(df["date"])).add_yaxis(
                series_name=c,
                y_axis=list(df[c]),
                is_smooth=True,
                linestyle_opts=opts.LineStyleOpts(opacity=0.5),
                label_opts=opts.LabelOpts(is_show=False),
            ))
            kline = kline.overlap(line)

    if "volume" in df.columns:
        vl = list(df["volume"])
    elif "amount" in df.columns:
        vl = list(df["amount"])
    else:
        vl = [0 for _ in range(len(df))]
    bar = (
        Bar().add_js_funcs("var barData = {}".format(
            list(df["close"] - df["open"]))).add_xaxis(
                xaxis_data=list(df["date"])).add_yaxis(
                    series_name="",
                    yaxis_data=vl,
                    label_opts=opts.LabelOpts(is_show=False),
                    itemstyle_opts=opts.ItemStyleOpts(
                        color=JsCode("""
                function(params) {{
                    var colorList;
                    if (barData[params.dataIndex]>0) {{
                        colorList = '{ucolor}';
                    }} else {{
                        colorList = '{dcolor}';
                    }}
                    return colorList;
                }}
                """.format(ucolor=ucolorvolume,
                           dcolor=dcolorvolume))  # escape {} when using format
                    ),
                ).set_global_opts(tooltip_opts=opts.TooltipOpts(
                    is_show=True,
                    trigger="axis",
                    trigger_on="mousemove",
                    axis_pointer_type="cross",
                ), ))
    grid_chart = Grid()
    grid_chart.add_js_funcs("var barData = {}".format(
        list(df["close"] - df["open"])))
    grid_chart.add(
        kline,
        grid_opts=opts.GridOpts(pos_left="10%",
                                pos_right="1%",
                                pos_top="2%",
                                height="65%"),
    )

    grid_chart.add(
        bar,
        grid_opts=opts.GridOpts(pos_left="10%",
                                pos_right="1%",
                                pos_top="71%",
                                height="22%"),
    )
    if rendered:
        return grid_chart.render_notebook()
    else:
        return grid_chart