<template>
  <div class="box" ref="chartDom"></div>
</template>
<script setup>
import { ref, onMounted,watch } from "vue";
import * as echarts from "echarts";
let chartDom = ref(null); //注意变量名 和 ref名字要对应
const props = defineProps({
  title: {
    type: String,
    default: '2023年1月1日至2023年12月31日'
  },
  xAxisData: {
    type: Array,
    default: () => ['A', 'B', 'C', 'D', 'E', 'F']
  },
  seriesData: {
    type: Array,
    default: () => [[2549], [12421], [2637],[ 3146],[ 15189], [9562]]
  },
  // yAxisData: {
  //   type: Array,
  //   default: () => [2549, 12421, 2637, 3146, 15189, 9562]
  // },
})
const chartInstance = ref(null);
onMounted(() => {

  initChart();
});
watch([
  () => props.seriesData,
  () => props.xAxisData,
], () => {
  initChart();
});
const initChart = () => {
  chartInstance.value = props.seriesData.map((item, index) => {
    console.log(item,"xxxxxxxx");

    return {
        name: props.xAxisData[index],
        data: item,
        type: "bar",
        barWidth: "20",
        // barGap: 20,           // 系列之间的间距
        barCategoryGap: 100, // 类别之间的间距
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            // 值为0或null时不显示
            if (params.value === 0 || params.value === null) {
              return '';
            }
            // 格式化数值显示
            return params.value.toLocaleString();
          },
          color: '#2c3e50',
          fontSize: 12,
          fontWeight: 'bold',
          distance: 10 // 标签与柱子的距离
        },
    }
  })
  console.log(chartInstance.value);

  var myChart = echarts.init(chartDom.value);
  var option = {
    title: {
      text: props.title,
      left: 'center'
    },
    tooltip: {
      // 鼠标悬浮提示数据
      trigger: "axis",
      backgroundColor: "rgba(32, 33, 36,.7)",
      borderColor: "rgba(32, 33, 36,0.20)",
      borderWidth: 15,
      textStyle: {
        // 文字提示样式
        color: "#fff",
        fontSize: "12",
      },
      axisPointer: {
        // 坐标轴虚线
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      right: 0
    },
    // },
    grid: {
      // 控制图表的位置
      left: "5%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      data: props.xAxisData,
    },
    yAxis: {
      // axisLabel: {
      //   // y轴线 标签修改
      //   textStyle: {
      //     color: "white", //坐标值得具体的颜色
      //   },
      // },
      // data: props.xAxisData,
    },
    series: chartInstance.value
  };
  option && myChart.setOption(option);
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 60vh;
  /* background-color: #031a67; */
}
</style>
