<template>
  <div ref="chartRef" style="width: 600px; height: 150px"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);

onMounted(() => {
  const myChart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'item',
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: {
        show: false, // 隐藏X轴线
      },
      axisTick: {
        show: false, // 隐藏X轴刻度
      },
      axisLabel: {
        color: '#666', // 月份标签颜色
      },
    },
    yAxis: {
      type: 'value',
      show: false, // 完全隐藏Y轴
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110], // 这里替换为你的实际数据
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          color: '#4CAF50', // 绿色柱状条
          borderRadius: [6, 6, 6, 6], // 圆角设置(左上、右上、右下、左下)
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)', // 背景色
          borderRadius: [6, 6, 6, 6], // 背景圆角（与柱子相同）
        },
        label: {
          show: false,
          position: 'top',
          formatter: '', // 你可以根据需要调整或移除
        },
      },
    ],
    grid: {
      left: '-40px',
      right: '3%',
      bottom: '3%',
      top: '15%',
      containLabel: true,
    },
  };

  myChart.setOption(option);

  // 响应式调整
  window.addEventListener('resize', function () {
    myChart.resize();
  });
});
</script>
