echarts柱状图

1、先展示效果图

2、直接上代码，copy代码进行调试便会懂（导入echarts插件看之前的文章）

<template>
  <div class="antigen-container">
    <div class="top-content">
      <span class="top-title">抗原检测统计</span>
      <el-select v-model="value" placeholder="请选择" @change="getData(value)">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div id="antigen-detection-statistics"></div>
  </div>

</template>
<script>
  import {
    getAntigenRecord
  } from '@/api/auth'
  import {
    getTheSpecifiedDate
  } from '@/utils/data.js'
  export default {
    name: 'AntigenDetectionStatistics',
    data() {
      return {
        options: [{
          value: '0',
          label: '今天'
        }, {
          value: '1',
          label: '昨天'
        }, {
          value: '6',
          label: '最近7天'
        }, {
          value: '29',
          label: '最近30天'
        }],
        value: '6',
        dateAbscissa: [], // 横坐标的日期
        negativeData: [], // 阴性数据
        PositiveWithoutSymptoms: [], // 阳性无症状
        PositiveWithSymptoms: [], // 阳性有症状
        ToBeTested: [], // 待检测
        total: null,
        chartBox: null // 将echarts赋值给他
      };
    },
    created() {
      this.getData(6)
    },
    mounted() {
      setTimeout(() => {
        this.echart()
      }, 500);
    },
    methods: {
      // 获取列表数据
      async getData(dateNumber) {
        let time = new Date()
        let currentDate = time.toLocaleDateString().split('/').join('-')
        let timeBegin = getTheSpecifiedDate(time.toLocaleDateString(), dateNumber) + ' 00:00'
        let timeEnd = currentDate + ' 23:59'
        let data = {
          sampleTimeBegin: timeBegin,
          sampleTimeEnd: timeEnd,
          pageNo: 1,
          pageSize: 10
        }
        await getAntigenRecord(data).then(res => {
          this.total = res.data.list[0].items[0].totalQuantity
          this.dateAbscissa = []
          this.negativeData = []
          this.PositiveWithoutSymptoms = []
          this.PositiveWithSymptoms = []
          this.ToBeTested = []
          res.data.list.forEach(item => {
            this.dateAbscissa.push(item.dayValue)
            item.items.forEach(item2 => {
              if (item2.resultStatus == 10) {
                this.negativeData.push(item2.quantity)
              } else if (item2.resultStatus == 20) {
                this.PositiveWithoutSymptoms.push(item2.quantity)
              } else if (item2.resultStatus == 30) {
                this.PositiveWithSymptoms.push(item2.quantity)
              } else if (item2.resultStatus == 40) {
                this.ToBeTested.push(item2.quantity)
              }
            })
          })
          this.echart()
        }).catch(err => {
          console.log(err);
        })
      },
      // 2. echart图表
      echart() {
        const total = this.total
        if (this.chartBox != null && this.chartBox != "" && this.chartBox != undefined) {
          this.chartBox.dispose() //销毁
        }
        this.chartBox = this.$echarts.init(document.getElementById("antigen-detection-statistics"));
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: this.dateAbscissa
          },
          color: ['#77bc21', '#fcca00', '#c82323', '#d8d8d8'],
          series: [{
              name: '阴性',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                fontSize: 14,
                formatter: function (val) {
                  if (val.value == 0) {
                    return ""
                  }
                  let proportion = ((val.value / total) * 100).toFixed(0) + '%'
                  return val.value + '\n' + proportion
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.negativeData
            },
            {
              name: '阳性无症状',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                fontSize: 14,
                formatter: function (val) {
                  if (val.value == 0) {
                    return ""
                  }
                  let proportion = ((val.value / total) * 100).toFixed(0) + '%'
                  return val.value + '\n' + proportion
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.PositiveWithoutSymptoms
            },
            {
              name: '阳性有症状(发烧等)',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                fontSize: 14,
                formatter: function (val) {
                  if (val.value == 0) {
                    return ""
                  }
                  let proportion = ((val.value / total) * 100).toFixed(0) + '%'
                  return val.value + '\n' + proportion
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.PositiveWithSymptoms
            },
            {
              name: '未检测',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                fontSize: 14,
                formatter: function (val) {
                  if (val.value == 0) {
                    return ""
                  }
                  let proportion = ((val.value / total) * 100).toFixed(0) + '%'
                  return val.value + '\n' + proportion
                },
              },
              emphasis: {
                focus: 'series'
              },
              data: this.ToBeTested
            }
          ]
        };
        this.chartBox.setOption(option);
        // 根据页面大小自动响应图表大小
        // window.addEventListener("resize", function () {
        //   this.chartBox.resize();
        // });
      },

    },
  };
</script>

<style lang="scss" scoped>
  .antigen-container {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 40px;

      .top-title {
        margin-left: 30px;
        letter-spacing: 2px;
        font-size: 24px;
      }

      .el-select {
        width: 120px;
        margin-right: 30px;
      }
    }

    #antigen-detection-statistics {
      width: 900px;
      height: 500px;
    }
  }
</style>