pyecharts学习6--多x轴和多y轴，多图叠加

多坐标轴

先上图：两个x轴和两y轴

先看extend_axis的源码片段：

    def extend_axis(
        self,
        xaxis_data: Sequence = None,
        xaxis: types.Axis = None,
        yaxis: types.Axis = None,
    ):

其中只有xaxis_data而没有，yaxis_data，因而y轴的添加不能一步完成， 因为数据是绑定到y轴的
添加额外的x轴：直接使用.extend_axis然后设置 数据：xaxis_data，和 属性：xaxis即可
添加额外的y轴：先使用.extend_axis设置 属性：yaxis，然后再使用add_yaxis添加数据，同时指定y轴索引yaxis_index=1即可， 同时要注意图例位置的设置，不然会重合

from pyecharts import options as opts
from pyecharts.charts import Line
week_name_list = (["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                  ["Mon", 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'])
price = [11.57, 14.34, 15.37, 12.29, 10.45, 15.60, 13.49]
sales = [114, 55, 27, 101, 125, 26, 105]

line= (
    Line()
    .add_xaxis(week_name_list[0])
    # 在顶部添加x轴
    .extend_axis(xaxis_data=week_name_list[1],
                xaxis=opts.AxisOpts(type_="category", position='top',
                # axistick_opts=opts.AxisTickOpts(is_align_with_label=True),  # 设置标签位置
                axisline_opts=opts.AxisLineOpts(is_on_zero=False, linestyle_opts=opts.LineStyleOpts(color="#6e9ef1"))
                    ))
    # 在右侧添加y轴
    .extend_axis(yaxis=opts.AxisOpts(type_="value", position="right",))
    .add_yaxis("价格", price, markpoint_opts=opts.MarkPointOpts(
        data=[opts.MarkPointItem(type_="max", name="最大值"), opts.MarkPointItem(type_="min", name="最小值")]))
    # 设置右侧y轴
    .add_yaxis("销量", sales, yaxis_index=1)
    .add_yaxis("收益", [int(price[i]*sales[i]) for i in range(len(price))], yaxis_index=1, markpoint_opts=opts.MarkPointOpts(
               data=[opts.MarkPointItem(type_="max", name="最大值"), opts.MarkPointItem(type_="min", name="最小值")]))
    .set_global_opts(title_opts=opts.TitleOpts(title="销量统计"),
                     # 设置图例， 多个y轴要分开设置
                     legend_opts=[opts.LegendOpts(pos_left="right", pos_top='20%', orient='vertical', legend_icon='rent'),
                                  opts.LegendOpts(pos_left="right", pos_top='50%', orient='vertical', legend_icon='circle')],
                    # 交叉指向工具
                    tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
                    # 设置范围控制滑块
                     # datazoom_opts=opts.DataZoomOpts(orient='vertical', pos_top="5%", pos_left="93%", pos_bottom="60%",
                     #                                 range_start=0, range_end=200)
                     )
)
line.render("professional_kline_chart.html")

叠加

overlap

使用.overlap将多个图形叠加在一个视图区
注：旧版本的pyechart， overlap是作为模块的，新版是作为模块的函数来使用

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

week_name_list = (["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                  ["Mon", 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'])
red = [117, 144, 157, 129, 105, 159, 139]
green = [114, 95, 127, 101, 105, 136, 105]

bar = (
    Bar()
    .add_xaxis(week_name_list[0])
    .extend_axis(yaxis=opts.AxisOpts(type_="value", position="right",))
    .add_yaxis("红豆", red)
    .add_yaxis("绿豆", green, yaxis_index=1)
    .set_global_opts(title_opts=opts.TitleOpts(title="一周销售情况"),
                     # 设置图例， 多个y轴要分开设置
                     legend_opts=[opts.LegendOpts(pos_left="right", pos_top='20%', orient='vertical', legend_icon='rent'),
                                  opts.LegendOpts(pos_left="right", pos_top='50%', orient='vertical', legend_icon='roundRect')],
                    # 交叉指向工具
                    tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
                     )
)

line = (
    Line()
    .add_xaxis(xaxis_data=week_name_list[0])
    .add_yaxis(series_name="总销量", y_axis=[red[i]+green[i] for i in range(len(red))])
    .set_global_opts(
        xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),
        legend_opts=opts.LegendOpts(pos_left="right", pos_top='70%', orient='vertical'),
    )
)

bar.overlap(line).render("professional_kline_chart.html")

多图

多图叠加使用的是模块Grid

只需要将上面的overlap更换为以下代码

grid_chart = Grid()
grid_chart.add(line,grid_opts=opts.GridOpts(pos_left="3%", pos_right="10%", pos_top="68%", height="30%"))
grid_chart.add(bar,grid_opts=opts.GridOpts(pos_left="3%", pos_right="10%", height="50%"))
grid_chart.render("professional_kline_chart.html")

问题点： 当有多y轴时，使用Grid叠加，如果是不同类型，y轴数据会异常（轴索引冲突，默认都是绑定到x0，y0轴），
相同类型则显示正常（添加轴时索引值会自动增加，只需要设置好绑定指定的轴即可）
目前使用的pyecharts版本1.7.1，后续不知道会不会优化

两个使用相同类型、bar时数据正常（更换了数据和摆放位置）

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

# 用于本地js
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "E:/python/three_lib/pyecharts_js/assets/"

week_name_list = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
red = [117, 144, 157, 129, 105, 159, 139]
green = [114, 95, 127, 101, 105, 136, 105]

bar1 = (
    Bar()
    .add_xaxis(week_name_list)
    .add_yaxis("红豆", red, yaxis_index=0)
    .add_yaxis("绿豆", green, yaxis_index=1)
    .extend_axis(yaxis=opts.AxisOpts(name="绿豆", type_="value", position="right"))
    .set_global_opts(
        title_opts=opts.TitleOpts(title="一周销售情况"),
        yaxis_opts=opts.AxisOpts(name="红豆", type_="value", position="left"),
        # 设置图例， 多个y轴要分开设置
        legend_opts=opts.LegendOpts(pos_left='20%'),
        # 交叉指向工具
        tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
                     )
)

bar2 = (
    Bar()
    .add_xaxis(xaxis_data=week_name_list)
    .add_yaxis("差值", [red[i]-green[i] for i in range(len(red))], xaxis_index=1, yaxis_index=2)
    .add_yaxis("总销量", [red[i]+green[i] for i in range(len(red))], xaxis_index=1, yaxis_index=3)
    .extend_axis(yaxis=opts.AxisOpts(name="销量", type_="value", position="right"))
    .set_global_opts(
        xaxis_opts=opts.AxisOpts(grid_index=1),
        yaxis_opts=opts.AxisOpts(name="差值", type_="value", position="left"),
        legend_opts=opts.LegendOpts(pos_left='60%'),)
)


grid = (
    Grid()
    .add(bar1, grid_opts=opts.GridOpts(pos_right="58%"), is_control_axis_index=True)
    .add(bar2, grid_opts=opts.GridOpts(pos_left="58%"), is_control_axis_index=True)
    .render("test.html")
)

注意：在示例中使用的多轴，开始调试时图像一直显示不出来，后来研究半天终于找到原因是因为Grid在添加add多轴图块并设置了绑定的轴时需要设置is_control_axis_index=true，否者按照源码会设置全部使用同一个轴导致显示异常而没有图像

源码部分

            if not is_control_axis_index:
                for s in self.options.get("series"):
                    s.update(xAxisIndex=self._axis_index, yAxisIndex=self._axis_index)