(pyecharts+flask) + (vue + ECharts.js)实现web表格Demo

炼丹去了

已于 2022-07-07 09:46:57 修改

阅读量1.9k

点赞数

分类专栏： vue 文章标签： echarts vue flask

于 2022-04-24 20:36:16 首次发布

本文链接：https://blog.csdn.net/djj199301111/article/details/124390970

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.环境

echarts：4.9.0
vue：2.6.14

python 3.6
flask 1.1.1
pyecharts 1.9.1

二.后端代码

from random import randrange
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar


app = Flask(__name__,
    static_folder='./dist',  #设置静态文件夹目录
    template_folder = "./dist",
    static_url_path="")  #设置vue编译输出目录dist文件夹，为Flask模板文件目录


def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫22", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("销量", [randrange(0, 100) for _ in range(6)])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    print('aaaaaa')
    return c


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/barChart",methods=['POST', 'GET'])
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()

if __name__ == "__main__":
    app.run()

三.前端代码

<template>
  <div id="app">
    <div id="main" style="width: 1000px; height: 600px"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {};
      this.$http.get("/barChart").then((res) => {
        option = res.data;
      });
      // let option = {
      // title: {
      //   text: "ECharts 入门示例",
      // },
      // tooltip: {},
      // legend: {
      //   data: ["销量"],
      // },
      // xAxis: {
      //   data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      // },
      // yAxis: {},
      // series: [
      //   {
      //     name: "销量",
      //     type: "bar",
      //     data: [5, 20, 36, 10, 10, 20],
      //   },
      // ],
      // };
      setTimeout(() => {
        console.log(option);
        myChart.setOption(option);
      }, 500);
    },
  },
};
</script>