yyky_web/src/views/test/LeftChart4.vue

<!--
 * @Author: gaojikai gaojikai@fehorizon.com
 * @Date: 2023-09-11 14:03:09
 * @LastEditors: gaojikai gaojikai@fehorizon.com
 * @LastEditTime: 2023-09-13 15:40:20
 * @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: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],

      //     axisTick: {
      //       show: false,
      //     },
      //     axisLine: {
      //       show: true,
      //     },
      //     axisLabel: {
      //       show: false,
      //     },
      //     nameTextStyle: {
      //       fill: "red",
      //       fontSize: 10,
      //     },
      //   },
      //   yAxis: {
      //     name: "销售额",
      //     data: "value",
      //     axisTick: {
      //       show: false,
      //     },
      //     axisLine: {
      //       show: true,
      //     },
      //     axisLabel: {
      //       show: true,
      //     },
      //     splitLine: {
      //       show: false,
      //     },
      //   },

      //   grid: {
      //     bottom: 10,
      //     top: 30,
      //   },
      //   series: [
      //     {
      //       data: [0, 2, 3, 4, 5, 6, 7],
      //       type: "bar",
      //       barWidth: "30%",
      //     },
      //   ],
      // },
      option: {
        xAxis: {
          name: "第一周",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          name: "销售额",
          data: "value",
          splitLine: {
            show: false,
          },
        },
        grid: {
          bottom: 10,
          top: 20,
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            barWidth: "30%",
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.left-chart-4 {
  width: 100%;
  height: 100%;
  position: relative;

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