echarts柱状图的使用

echarts官方网址

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

vue使用

安装echarts

npm install echarts -s

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

npm install echarts@4.9.0 -s

写入代码
后端:

@data_blue.route('/times',methods=['GET'])
def times():
    req=reqparse.RequestParser()
    req.add_argument('uid',type=int,required=True)
    args=req.parse_args()
    sql3=f"select date_format(time,'%Y-%m') as date,sum(scoure) as score from s_time where uid={args['uid']}  group by date"
    data1=db.find_all(sql3)
    print(data1)
    times=[]
    scoure=[]
    for i in data1:
        a=i['score']
        b=i['date']
        int1=15000/21
        int2=21-int(a)
        int3=str(int2 * int1).split('.')[0]
        scoure.append(int(int3))
        times.append(str(b))
    return jsonify({'code':200,'msg':'成功','data1':times,'data2':scoure})

得到的数据类型是列表

前端:
注：div里指定的id为var chartDom=document.getElementById(“main”);里的main，可以自定义
calss='s’配置样式 height高度width宽度 设置了样式才能在页面中显示出来
data:this.data2,data:this.data4分别为数量跟名字数据，可以前端写好或者后端传递数据

<template>
  <div>
    <div id='mi' class='s'></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      data2: [],
      data4: [],
      id:this.$route.query.id
    };
  },
  mounted() {
    this.getall()
  },

  methods: {
    daa() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: this.data2,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.data4,
            type: "bar",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getall(){
      this.$axios.get('/data/times?uid='+this.id).then((result) => {
        if (result.data.code==200){
          this.data2=result.data.data1
          this.data4=result.data.data2
          this.daa()
        }
      }).catch((err) => {
        console.log(err)
      });
    },
  },
};
</script>
<style>
.s{
  width: 600px;
  height: 300px;
}
</style>

效果图