pyecharts+Vue在显示图表

pyechart

pyecharts是与python对接的，一个用于生成 Echarts 图表的类库。

为什么用pycharts

说到vue中加图表，大部门肯定是用echarts。我用pyecharts是因为pyecharts中的Timeline：时间线轮播多图真的很好用。它可以将多张图表放到时间线轮播图中实现图表动态化。

废话就不说了，上代码

我先是定义了三个折线图:
我展示其中一个折线图的代码，实际应用按照自己的需要，可以参考 pyecharts文档
代码：

def line_markpoint(str) -> Line:
    yieldlist0 = pd.read_json(test.yield_line(str))
    # x轴
    xline1 = []
    for value in yieldlist0.datatime.values:
        xline1.append(value)
    ylin1_1 = []
    for value in yieldlist0.装配计划量.values:
        ylin1_1.append(int(value))
    ylin1_2 = []
    for value in yieldlist0.装配点胶.values:
        ylin1_2.append(int(value))
    ylin1_3 = []
    for value in yieldlist0.后道点胶.values:
        ylin1_3.append(int(value))
    ylin1_4 = []
    for value in yieldlist0.当日包装数.values:
        ylin1_4.append(int(value))

    c = (
        Line(init_opts=opts.InitOpts(theme=ThemeType.MACARONS,
                                     width='800px',
                                     height='600px',
                                     ))
        .add_xaxis(xline1)
        .add_yaxis(
            '装配计划量',
            ylin1_1,
            is_connect_nones=True,
            label_opts=opts.LabelOpts(is_show=True),
        )
        .add_yaxis(
            '装配点胶',
            ylin1_2,
            is_connect_nones=True,
            label_opts=opts.LabelOpts(is_show=True,font_size=8),
        )
        .add_yaxis(
            '后道点胶',
            ylin1_3,
            is_connect_nones=True,
            label_opts=opts.LabelOpts(is_show=True,font_size=8),
        )
        .add_yaxis(
            '当日包装数',
            ylin1_4,
            is_connect_nones=True,
            label_opts=opts.LabelOpts(is_show=True, font_size=8),
        )
        .set_global_opts(title_opts=opts.TitleOpts(title="Line-MarkPoint"))
        .set_global_opts(
            title_opts=opts.TitleOpts(title="产量达标情况",pos_bottom=0,),
        )
    )
    return c

然后定义时间线轮播图，将三个折线图加入到时间线轮播图中：

def timeline_line_play(str):
    timeline = Timeline(init_opts=opts.InitOpts(theme=ThemeType.WALDEN,
                                                width='1800px',
                                                height='600px',
                                                bg_color="#f0f0f4"))
    timeline.add_schema(is_auto_play=True,  # 自动播放
                        is_loop_play=True,  # 循环播放
                        pos_left="300px",
                        pos_right="50px",
                        )
    timeline.add(lineYield.line_markpoint(str), '产量达标情况')
    timeline.add(lineYield.line_markpoint1(str), '触点不导通')
    timeline.add(lineYield.line_markpoint2(str), '断线')
    return timeline

具体的时间线轮播图的属性设置可以参考pyecharts文档

然后写一个接口，当前端调用方法请求轮播图数据是将时间线轮播图数据返回给前端：

@app.route("/try",methods=['POST', 'GET'])
def tyeline():
    str = request.args.get("str")
    result = timeline_line_play(str)
    return result.dump_options_with_quotes()

前端怎么请求呢。先是定义一个div设置长宽用户显示图表

 <div id="timeline" style="width:1300px; height:600px;background-color: white;"></div>

然后写请求方法

    getTimeLine () {
      const that = this
      var chart = echarts.init(document.getElementById('timeline'), 'white', { renderer: 'canvas' })
      this.$axios.get('http://127.0.0.1:5000/try?str=xxxx')
        .then(function (response) {
          that.timelinelist = response.data
          chart.setOption(that.timelinelist)
          console.log(that.timelinelist)
        },
        function (error) {
          console.log(error)
        }
        )
    }

在vue的生命周期钩子函数Mounted出调用该方法

  mounted () {
    this.getTimeLine()
    }

这样时间线轮播图就成功在页面上显示了