<template>
  <div id="center">
    <dv-border-box-13>
      <div class="dvrow">
        <div>
          <span class="title-span">进出库情况</span>
        </div>
        <div>2023-12-01</div>
      </div>
      <div id="myChart22" :style="{width: '500px', height: '170px'}"></div>
    </dv-border-box-13>

  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "45",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart22"));
      // 绘制图表
      myChart.setOption({
        textStyle: {
          color: "#fff", // 设置文字颜色
          fontSize:'14px'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["原料五", "原料四", "原料三", "原料二", "原料一"],
        },
        series: [
          {
            name: "入库",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            emphasis: {
              focus: "series",
            },
           
            itemStyle: {
              color: "rgba(102, 153, 255, 1)", // 设置入库的颜色
            },
            data: [2000, 4000, 6000, 4000, 6000],
          },
          {
            name: "出库",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: "rgba(51, 204, 153, 1)", // 设置出库的颜色
            },
            data: [4500, 8000, 9800, 10500, 12000],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#center {
  width: 100%;
}
.dv-border-box-13 {
  width: 100%;
  height: 200px;
  padding: 0 20px;
  padding-top: 20px;
  .dvrow {
    height: 5px;
    display: flex;
    justify-content: space-between;
  }
}
</style>