<template>
  <div class="home-trace-charts">
    <custom-echart-bar-line :chart-data="chartsData.valData" :option="chartsData.option" height="100%" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const chartsData = ref({
  option: {
    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
    title: {
      text: ' ',
      textStyle: {
        color: '#333',
      },
    },
    legend: {
      data: ['赋码', '扫码'],
    },
    yAxis: [
      {
        type: 'value',
        name: '赋码',
        axisLabel: {
          formatter: '{value}',
        },
        splitLine: {
          show: true, // 显示分割线
          lineStyle: {
            type: 'dashed', // 设置为虚线
            color: '#ccc', // 分割线颜色
            width: 0.5, // 分割线宽度
          },
        },
      },
      // {
      //   type: 'value',
      //   name: '扫码',
      //   yAxisIndex: 1,
      //   axisLabel: {
      //     formatter: '{value}',
      //   },
      // },
    ],
  },
  valData: [
    {
      name: '1月',
      value: 40,
      type: '赋码',
      seriesType: 'bar',
      barWidth: 10,
      itemStyle: {
        color: {
          type: 'linear', // 线性渐变
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#ff6666' },
            { offset: 1, color: '#ffcc66' },
          ],
          global: false, // 默认为 false
        },
      },
    },
    { name: '1月', value: 60, type: '扫码', seriesType: 'line' },
    { name: '2月', value: 20, type: '赋码', seriesType: 'bar' },
    { name: '2月', value: 100, type: '扫码', seriesType: 'line' },
    { name: '3月', value: 80, type: '赋码', seriesType: 'bar' },
    { name: '3月', value: 100, type: '扫码', seriesType: 'line' },
    { name: '4月', value: 40, type: '赋码', seriesType: 'bar' },
    { name: '4月', value: 120, type: '扫码', seriesType: 'line' },
    { name: '5月', value: 50, type: '赋码', seriesType: 'bar' },
    { name: '5月', value: 60, type: '扫码', seriesType: 'line' },
  ],
});

onMounted(() => {
  if (chartsData.value.valData && chartsData.value.valData.length) {
    chartsData.value.valData.forEach((m, index) => {
      let num = 100;
      m.value = (m.value + Math.random() + num).toFixed(0);
    });
  }
});
</script>
<style lang="scss" scoped>
.home-trace-charts {
  height: 100%;
}
</style>
