pyecharts折线图和柱状图

参照<a href="https://github.com/pyecharts/pyecharts-gallery" target="_blank" rel="noopener">pyecharts-gallery</a>示例代码分容易能完成图形的展示，不过这里也有一点小坑。这里记录下折线图和柱状图的使用。便于说事，这里使用了tushare的stock数据源。先看下效果图：



<img src="https://www.361way.com/wp-content/uploads/2019/08/echart-bar-line.png" width="807" height="472" title="echart-bar-line" alt="echart-bar-line" />

一、折线图

单根线的折线图是比较容易搞的，这里说多根线的折线图，我这里使用的代码如下：



<br />

import pyecharts.options as opts
from pyecharts.charts import Line
import talib as ta
import tushare as ts
dw = ts.get_k_data('603515')
df = dw[-30:]
x_data = df['date'].values
x_data = df['date'].values
#y_data = [820, 932, 901, 934, 1290, 1330, 1320]
line = (
    Line()
    .add_xaxis(xaxis_data=x_data)
    .add_yaxis(
        series_name="开",
        y_axis=df['open'].values,
        label_opts=opts.LabelOpts(is_show=False),
    )
    .add_yaxis(
        series_name="收",
        y_axis=df['close'].values,
        label_opts=opts.LabelOpts(is_show=False),
    )
    .add_yaxis(
        series_name="高",
        y_axis=df['high'].values,
        label_opts=opts.LabelOpts(is_show=False),
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
    )
    .add_yaxis(
        series_name="低",
        y_axis=df['low'].values,
        label_opts=opts.LabelOpts(is_show=False),
        areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
    )
    .set_global_opts(
        tooltip_opts=opts.TooltipOpts(
            is_show=True, trigger="axis", axis_pointer_type="cross"
        ),
        yaxis_opts=opts.AxisOpts(
            type_="value",
            axistick_opts=opts.AxisTickOpts(is_show=True),
            splitline_opts=opts.SplitLineOpts(is_show=True),
        ),
        xaxis_opts=opts.AxisOpts(
            type_="category",
            boundary_gap=False,
            axispointer_opts=opts.AxisPointerOpts(is_show=True, type_="shadow"),
        ),
    )
   # .render("stacked_line_chart.html")
)
line.render_notebook()

这里是根据官方 <a href="https://github.com/pyecharts/pyecharts-gallery/blob/master/Line/stacked_line_chart.py" target="_blank" rel="noopener">stacked_line_chart.py</a> 示例的基础上修改出来的。使用官方示例有一个问题。其在增加 y 轴值的时候，加了一个参数&nbsp;stack="总量" ，使用该参数后，后面每根线的值会和前面一根线的各个点的值求和再显示。有这个场景比较适合使用这个选项，就是CPU利用率，不过这显然我的需求不一样，把这个值拿掉就好了。



上面使用示例中还有两个参数也说明下：



<br />

label_opts=opts.LabelOpts(is_show=False),  //控制是否在线上显示各个点的值
areastyle_opts=opts.AreaStyleOpts(opacity=0.5), //控制是否以颜色区域显示某根线

二、柱状图

根据官方示例，这里先写一个柱状图的示例：



<br />

import tushare as ts
import pyecharts.options as opts
from pyecharts.charts import Bar, Line
dw = ts.get_k_data('603515')
df = dw[-30:]
x_data = df['date'].values
bar = (
    Bar()
    .add_xaxis(list(x_data))
    .add_yaxis("开", list(df['open'].values),label_opts=opts.LabelOpts(is_show=False))
    .add_yaxis("收", list(df['close'].values),label_opts=opts.LabelOpts(is_show=False))
)
bar.render_notebook()

这里有一个坑就是，默认tushare取回的每一列值的数据类型是numpy类型的，而从官方示例上可以看出，其需要引入的是列表类型，所以需要list(npdata) 或npdata.to_list()进行数据转换，不然不能正常显示柱状图，这点和折线图不同，折线图不转换也可以正常显示。

三、柱状图和折线图混用

这部分可以参考官方示例：<a href="https://github.com/pyecharts/pyecharts-gallery/blob/master/Bar/mixed_bar_and_line.py" target="_blank" rel="noopener">mixed_bar_and_line</a> ，我这里具体实现的代码如下：



<br />

import tushare as ts
import pyecharts.options as opts
from pyecharts.charts import Bar, Line
dw = ts.get_k_data('603515')
df = dw[-30:]
x_data = df['date'].values
bar = (
    Bar()
    .add_xaxis(list(x_data))
    .add_yaxis("开", list(df['open'].values),label_opts=opts.LabelOpts(is_show=False))
    .add_yaxis("收", list(df['close'].values),label_opts=opts.LabelOpts(is_show=False))
)
#bar.render_notebook()
line = (
    Line()
    .add_xaxis(xaxis_data=x_data)
    .add_yaxis(
        series_name="高",
        #线上不显示数值
        label_opts=opts.LabelOpts(is_show=False),
        y_axis=df['high'].values,
    )
    .add_yaxis(
        series_name="低",
        label_opts=opts.LabelOpts(is_show=False),
        #是否显示阴影
        #areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
        y_axis=df['low'].values,
    )
    .set_global_opts(
    tooltip_opts=opts.TooltipOpts(
        is_show=True, trigger="axis", axis_pointer_type="cross"
    ),
    yaxis_opts=opts.AxisOpts(
        type_="value",
        axistick_opts=opts.AxisTickOpts(is_show=True),
        splitline_opts=opts.SplitLineOpts(is_show=True),
    ),
    xaxis_opts=opts.AxisOpts(
        type_="category",
        boundary_gap=False,
        axispointer_opts=opts.AxisPointerOpts(is_show=True, type_="shadow"),
    ),
  )
)
#line.render_notebook()
bar.overlap(line).render_notebook()

效果图见最开始的图示。这里混使用主机使用bar.overlap(line)这样的用法。不过上图只是简单的展示，并没有标题，也没有y轴的单位名称，同时在鼠标移动时，也没有参考线，这些也可以参考官方示例进行配置，具体可以根据如下代码进行修改：



<br />

.set_global_opts(
    tooltip_opts=opts.TooltipOpts(
        is_show=True, trigger="axis", axis_pointer_type="cross"
    ),
    xaxis_opts=opts.AxisOpts(
        type_="category",
        axispointer_opts=opts.AxisPointerOpts(is_show=True, type_="shadow"),
    ),
    yaxis_opts=opts.AxisOpts(
        name="水量",
        type_="value",
        min_=0,
        max_=250,
        interval=50,
        axislabel_opts=opts.LabelOpts(formatter="{value} ml"),
        axistick_opts=opts.AxisTickOpts(is_show=True),
        splitline_opts=opts.SplitLineOpts(is_show=True),
    ),
)

<br />



<br />