<template>
  <div style="width: 100%; height: 100%">
    <div class="chart-style" style="width: 100%; height: 100%">
      <vue-chart :option="chartOption" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import VueChart from "./VueChart.vue";
// import * as echarts from "echarts";

import { computed } from "vue";

const props = defineProps({
  month_data: {
    type: Array,
    default: () => []
  },
  day_data: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  }
});

const total_data = computed(() => {
  if (!props.data || props.data.length === 0) {
    return 0;
  } else {
    return props.data.reduce(function (sum, item: any) {
      return sum + item.value;
    }, 0);
  }
});
// function customLabelFormatter(params) {
//   const text = params.value.toString();
//   const coloredText = text.replace(
//     /\d+/g,
//     '<span style="color: blue;">$&</span>'
//   ); // 正则表达式匹配数字并设置为蓝色
//   return coloredText;
// }

const chartOption = computed(() => {
  return {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar"
      }
    ]
  };
});
</script>
