<template>
  <view class="relative w-full box-border h-[604rpx] p-4">
    <view class="absolute right-4 top-7 z-[10] text-xs text-[#333]">喂奶次数</view>
    <view id="chart" class="w-full box-border" style="height: 100%"></view>
  </view>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { ref } from 'vue'
  import { onLoad, onReady } from '@dcloudio/uni-app'

  defineOptions({
    name: 'REcharts',
  })

  const props = defineProps({
    yAxisData: {
      type: Array,
      default: [],
    },
    seriesData: {
      type: Array,
      default: [],
    },
    xAxisData: {
      type: Array,
      default: [],
    },
    unit: {
      type: String,
      default: '(cm)',
    },
  })

  const colorList = ['#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#F88842']
  // const chart = ref(null)
  const option = ref({
    title: {
      subtext: props.unit, // 图表标题下方显示单位
      // subtext: unit.value, // 图表标题下方显示单位
      subtextStyle: {
        fontSize: 12,
        color: '#666',
      },
    },
    xAxis: {
      type: 'category',
      data: ['3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7'],
      axisLabel: {
        interval: 0, // 每隔一个标签显示一次
        show: true, // 显示 X 轴标签
        color: '#666', // 设置字体颜色为红色
        fontSize: 12, // 设置字体大小
        // fontWeight: 'bold', // 设置字体加粗
      },
      axisLine: {
        // show: false, // 隐藏 X 轴的线
        alignWithLabel: true,
        lineStyle: {
          color: '#f2f2f2', // 设置 X 轴线的颜色为红色
          width: 2, // 设置线的宽度
          type: 'solid', // 设置线的类型，'solid', 'dashed', 'dotted'
        },
      },
      axisTick: {
        show: false, // 隐藏 X 轴的刻度线（短线）
      },
      boundaryGap: true, // 不让第一个和最后一个数据点贴着轴的两端
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 24, // 设置柱子的宽度为 30px

        itemStyle: {
          color: '#FFAC78', // 设置柱子的颜色为绿色
          color: (params) => {
            return colorList[params.dataIndex] // 根据柱子的索引设置不同的颜色
          },
          borderRadius: [16, 16, 0, 0], // 设置柱子的圆角，上两个角为10px，下两个角不圆角
        },
        // barGap: '30%',
      },
    ],
    barCategoryGap: '100%', // 增加系列之间的间隔
    grid: {
      right: 0,
      bottom: '10%',
      // top: '10%',
    },
  })
  function initChart() {
    // 获取 DOM 元素
    const chartDom = document.getElementById('chart')
    // 初始化 Echarts 实例
    const myChart = echarts.init(chartDom)
    // 指定图表的配置项和数据

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option.value)
  }

  onLoad(() => {
    nextTick(() => {
      initChart()
    })
  })
</script>

<style lang="scss" scoped>
  .wd-divider {
    margin: 0;
  }
</style>
