<!--
 * @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: {},
      // option: {
      //   data: [
      //     {
      //       name: "收费系统",
      //       color: "#00baff",
      //     },
      //     {
      //       name: "监控系统",
      //       color: "#ff5ca9",
      //     },
      //     {
      //       name: "通信系统",
      //       color: "#3de7c9",
      //     },
      //     {
      //       name: "供配电系统",
      //       color: "#f5d94e",
      //     },
      //   ],
      //   textStyle: {
      //     fill: "#fff",
      //   },

      //   xAxis: {
      //     data: ["10/01", "10/02", "10/03", "10/04", "10/05", "10/06", "10/07"],
      //     axisLine: {
      //       style: {
      //         stroke: "#999",
      //       },
      //     },
      //     axisLabel: {
      //       style: {
      //         fill: "#999",
      //       },
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //   },
      //   yAxis: {
      //     data: "value",
      //     splitLine: {
      //       show: false,
      //     },
      //     axisLine: {
      //       style: {
      //         stroke: "#999",
      //       },
      //     },
      //     axisLabel: {
      //       style: {
      //         fill: "#999",
      //       },
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //     min: 0,
      //     max: 8,
      //   },
      //   series: [
      //     {
      //       name: "收费系统",
      //       data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
      //       type: "bar",
      //       barStyle: {
      //         fill: "rgba(0, 186, 255, 0.4)",
      //       },
      //     },
      //     {
      //       name: "监控系统",
      //       data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
      //       type: "line",
      //       lineStyle: {
      //         stroke: "#ff5ca9",
      //       },
      //       linePoint: {
      //         radius: 4,
      //         style: {
      //           fill: "#ff5ca9",
      //           stroke: "transparent",
      //         },
      //       },
      //     },
      //     {
      //       name: "通信系统",
      //       data: [1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3],
      //       type: "line",
      //       smooth: true,
      //       lineArea: {
      //         show: true,
      //         gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],
      //       },
      //       lineStyle: {
      //         lineDash: [5, 5],
      //       },
      //       linePoint: {
      //         radius: 4,
      //         style: {
      //           fill: "#00db95",
      //         },
      //       },
      //     },
      //     {
      //       data: [0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2],
      //       type: "line",
      //       name: "供配电系统",
      //       lineArea: {
      //         show: true,
      //         gradient: ["rgba(245, 217, 79, 0.8)", "rgba(245, 217, 79, 0.2)"],
      //       },
      //       lineStyle: {
      //         stroke: "#f5d94e",
      //       },
      //       linePoint: {
      //         radius: 4,
      //         style: {
      //           fill: "#f5d94e",
      //           stroke: "transparent",
      //         },
      //       },
      //     },
      //   ],
      // },
    };
  },
  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>
