<!--
 * @Author: gaojikai gaojikai@fehorizon.com
 * @Date: 2023-09-11 14:03:09
 * @LastEditors: gaojikai gaojikai@fehorizon.com
 * @LastEditTime: 2023-09-11 21:23:37
 * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="left-chart-4">
    <dv-charts class="lc2-chart" :option="option" />
  </div>
</template>

<script>
export default {
  name: "LeftChart4",
  data() {
    return {
      option: {
        xAxis: {
          // name: "第一周",
          data: ["周一"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
              rotate: 0,
            },
          },
        },
        grid: {
          top: 30,
          bottom: 20,
        },
        yAxis: {
          // name: "销售额",
          data: "value",
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [10],
            type: "bar",
            barWidth: 10,
          },
        ],
      },
    };
  },
  mounted() {
    // this.initData();
  },
  methods: {
    // initData() {
    //   const option1 = {
    //     xAxis: {
    //       name: "第一周",
    //       data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    //     },
    //     yAxis: {
    //       name: "销售额",
    //       data: "value",
    //     },
    //     series: [
    //       {
    //         data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
    //         type: "bar",
    //       },
    //     ],
    //   };
    //   this.option = option1;
    // },
  },
};
</script>

<style lang="less">
.left-chart-4 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .lc2-header {
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-indent: 20px;
    margin-top: 10px;
  }

  .lc2-chart {
    height: calc(~"100% - 80px");
    position: relative;
  }
}
</style>
