<template>
  <view class="charts-box" :style="{ width: width, height: height }">
    <qiun-data-charts
      type="line"
      canvas2d
      :opts="opts"
      :chartData="chartData"
      ontouch
      tooltip-format="tooltipExer"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface SeriesType {
  name: string;
  date: any[];
  color?: string;
}
interface ChartDataType {
  categories: any[];
  series: SeriesType[];
}
const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    chartData: any;
    tooltipFormatType?: string;
  }>(),
  { height: '420rpx', categories: () => [] },
);

const chartData = ref(props.chartData);
const opts = ref({
  padding: [15, 20, 0, 15],
  enableScroll: false,
  dataLabel: false,
  dataPointShape: false,
  legend: { position: 'top', padding: 2 },
  xAxis: {
    disableGrid: true,
    labelCount: 6, // 标签数
    format: 'xAixsHoursMin',
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    calibration: true,
  },
  extra: {
    line: {
      type: 'curve',
      width: 2,
      activeType: 'none',
    },
    tooltip: {
      bgColor: '#21D17A',
      fontColor: '#fff',
      bgOpacity: 1,
      borderRadius: 8,
      gridColor: '#21D17A',
      labelFontColor: '#333',
      legendShow: false,
      borderOpacity: 1,
      labelBgOpacity: 1,
    },
  },
});
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
}
</style>
