问题/背景

        最近因科研需要，开始浅浅学习pyecharts，并记录在这个过程遇到的问题以及简单的解决办法。

        在使用pyecharts画组合图时遇到了折线图的点无法对准柱状图中心的问题，在网上的文章只找到使用echarts设置折线图的点对准柱状图中心，然而echarts的方法无法照搬到pyecharts，查阅官方文档的示例折线图的点也同样是偏移的，故展示组合图绘画以及如何让折线图点画在柱状图中心的简单示例。

导入库

# 导入配置模块
from pyecharts import options as opts
# 导入主题模块
from pyecharts.globals import ThemeType
# 导入柱状图模块
from pyecharts.charts import Bar
# 导入折线图模块
from pyecharts.charts import Line

 数据准备

准备横轴数据

一个长度为24的列表。注意在准备横轴数据时，数值类型的数据要改为字符串类型的数据，如下，24小时的横轴数据在准备时将数字作为字符串添加到横轴列表中，而不是像注释中将数值添加到列表中，string类型的横轴数据输入后折线图自动对准柱状图中心，数值类型的横轴数据输入后折线图无法对准柱状图中心。

time = ["{}".format(i) for i in range(1, 25)]  # 准备x轴数据，类型为string
# time = [] # 此为横轴数据为数值类型
# for i in range (24):
#     time.append(i)

 准备纵轴数据

3个长度为24的列表，分别从1到24,25到48，49到72

data1 = [i for i in range(1, 25)]
data2 = [i for i in range(25, 49)]
data3 = [i for i in range(49, 73)]# 准备y轴数据

一、使用bar绘制堆积柱状图

创建柱状图实例

bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT)) # theme 设置图表主题，可以去掉

增加x轴数据

bar.add_xaxis(xaxis_data=time)  # 增加横轴数据

增加纵轴数据

bar.add_yaxis(
    series_name='data1',
    y_axis=data1,
    stack="stack1",  # stack="stack1"表示堆叠
    category_gap="50%",  # 柱状的间距
    z=0, # 设置图形堆叠时的图层顺序，0为最低级，让折线图在柱状图图层上面
).add_yaxis(
    series_name='data2',
    y_axis=data2,
    stack="stack1",
    category_gap="50%",
    z=0,
).set_series_opts(label_opts=opts.LabelOpts(is_show=False) # 系列设置，不显示标签
).set_global_opts(
            title_opts=opts.TitleOpts(
                title='示例',
            ),# 全局设置，设置标题
)

二、使用Line绘制折线图

绘制折线图

line = (Line()
        .add_xaxis(time)
        .add_yaxis(series_name='data3',
                   y_axis=data3,
                   label_opts=opts.LabelOpts(is_show=False),# 不显示标签
                   linestyle_opts=opts.LineStyleOpts(width=2), # 线例设置宽度
                   )
        )

三、将 折线图 与 柱状图进行组合

bar.overlap(line)

四、创建并行多图示例，放入组合后的bar

grid = Grid()
grid.add(bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True)# 设置grid 组件离容器左/右侧的距离，以及是否由自己控制 Axis 索引

五、生成html文件

grid.render("示例.html")

六、绘图结果

可以看到，折线图的每个点都在柱状图中心，折线图与柱状图的图像是对齐的。

数值x轴绘图结果：

可以看到，折线图较柱状图偏了一个数值位，在柱状图的下标是2的时候折线图的点是下标1，不同的x轴数据可能在自动调整后最后展示时不一样，但折线图的点都和柱状图有一定偏差，最后的结果都不尽人意。

七、结语

这只是一个很小的问题，却在我刚接触pyecharts时花了我一定的时间，无论是查阅官方文档抑或在网上查找解决方案都没有结果，差点就放弃这个库转别的库了，毕竟没有太多时间研究画图hhh，最后找到了这个解决方法，这个应该是比较快且简单解决问题的方法，不知道有没有更高明的方法做到组合图时指定各个图的x轴位置得到想要的结果。