<template>
  <view class="w-full box-border h-[1120rpx] px-4 pt-8 pb-4">
    <view id="chart" style="width: 100%; height: 1120rpx"></view>
  </view>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { ref } from 'vue'
  import { onLoad, onReady } from '@dcloudio/uni-app'

  defineOptions({
    name: 'HEcharts',
  })

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

  // const unit = defineModel('unit')
  const yAxisData = defineModel('yAxisData')
  const xAxisData = defineModel('xAxisData')

  const option = ref({
    grid: {
      left: '10%', // 左侧间距
      right: 0, // 右侧间距
    },
    title: {
      subtext: props.unit, // 图表标题下方显示单位
      // subtext: unit.value, // 图表标题下方显示单位
      subtextStyle: {
        fontSize: 12,
        color: '#666',
      },
    },
    tooltip: {
      trigger: 'axis', // 鼠标移到或触摸时显示的内容
      // trigger: 'item', // 鼠标移到或触摸时显示的内容
      axisPointer: {
        type: 'line', // 设置指示器类型为“十字”线
        lineStyle: {
          type: 'dashed', // 虚线
          color: '#FFAC78', // 虚线颜色
          width: 1, // 虚线宽度
        },
      },
      formatter: function (params) {
        // // 格式化显示百分比数据
        // let result = ''
        // params.forEach(function (item) {
        //   let percentage = ((item.value / 1320) * 100).toFixed(2) + '%' // 假设最大值为1320，计算百分比
        //   result += item.seriesName + ': ' + percentage + '<br>'
        // })
        // return result
      },
    },
    xAxis: {
      type: 'category',
      // ['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁']
      // data: xAxisData.value,
      data: [...props.xAxisData],
      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',
      // axisLine: {
      //   show: true, // 隐藏 X 轴的线
      // },
      // data: [...props.yAxisData], // 手动设置 Y 轴的刻度
      data: [0, 10, 20, 30, 40, 50], // 手动设置 Y 轴的刻度
      // min: 0, // 设置 Y 轴的最小值
      // max: 100, // 设置 Y 轴的最大值
      // interval: 20, // 设置 Y 轴的间隔

      gridIndex: 0,
    },
    series: [
      {
        // coordinateSystem: 'polar',
        // data: [55, 65, 75, 85, 85, 88, 90],
        type: 'line',
        lineStyle: {
          color: '#FF928A', // 设置线条颜色为红色
        },
        itemStyle: {
          color: '#FF928A', // 设置点的颜色为红色，与线条颜色一致
        },
        smooth: true,
        symbolSize: 5, // 设置点的大小为 5
        // 手动控制贝塞尔曲线，设置为 `true` 启用贝塞尔曲线
        bezierCurve: true,
        // emphasis: { focus: 'series' },//淡出其他线
        data: [
          // { type: 'max', name: '最大值' },   // 标记最大值
          // { type: 'min', name: '最小值' },   // 标记最小值
          ...[55, 65, 75, 85, 85, 88, 90].map((value, index) => ({
            name: '数量',
            coord: value,
            value: value,
            label: {
              show: true, // 显示文本
              position: 'top', // 文本显示位置
              formatter: `{c}`, // 显示为 '数据点X: Y值'
            },
          })),
        ],
      },
      {
        data: [30, 45, 25, 65, 45, 35, 68],
        type: 'line',
        smooth: true,
        // emphasis: { focus: 'series' },
        symbolSize: 5, // 设置点的大小为 5
        // markPoint: {
        //   data: [
        //     { type: 'max', name: 'Max Value' }, // 标注最大值点
        //     { type: 'min', name: 'Min Value' }, // 标注最小值点
        //   ],
        // },
      },
      {
        data: [25, 66, 44, 33, 22, 77, 44],
        type: 'line',
        smooth: true,
        symbolSize: 5, // 设置点的大小为 5
        // emphasis: { focus: 'series' },
        // markPoint: {
        //   data: [
        //     { type: 'max', name: 'Max Value' }, // 标注最大值点
        //     { type: 'min', name: 'Min Value' }, // 标注最小值点
        //   ],
        // },
      },
    ],
  })
  function initChart() {
    // 获取 DOM 元素
    const chartDom = document.getElementById('chart')
    // 初始化 Echarts 实例
    const myChart = echarts.init(chartDom)
    // 指定图表的配置项和数据

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

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

<style lang="scss" scoped></style>
