柱状图echarts

官方地址

https://echarts.apache.org/examples/zh/index.html

写入接口

@echarts_bp.route('/echarts')
def echarts():
    sql = f"select sum(amount) as num, date_format(checkout_time, '%Y-%m-%d') as date from orders group by date"
    orders_list = db.find_all(sql)

    price_list = []
    date_list = []
    for item in orders_list:
        price_list.append(float(item['num']))
        date_list.append(item['date'])

    return jsonify({'price_list':price_list, 'date_list': date_list})

vue使用

1. 安装echarts

npm install echarts -s

如果vue不是最新版本的就安装

npm install [email protected] -s

2. 写入代码

<template>
  <div>
    <div id="main" class="top1">div>
  div>
template>

<script>
// 4.9.0
import * as echarts from "echarts";
export default {
  data() {
    return {
      price_list: [],
      date_list: [],
    };
  },
  methods: {
    top1() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data:  this.date_list,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data:  this.price_list,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 获取数据
    echartsData() {
      this.axios.get("/echarts").then((res) => {
        console.log("获取图片数据的响应：", res);
        this.price_list = res.data.price_list;
        this.date_list = res.data.date_list;
        console.log('>>>>',this.date_list)
        this.top1();
      });
    },
  },
  mounted() {
    this.echartsData();
  },
};
script>

<style>
.top1 {
  width: 550px;
  height: 300px;
  margin: 0 auto;
}
style>