<template>
<div id="barEcharts" style="width:370px;height:300px"></div>
</template>
<script setup>
import{onMounted} from 'vue';

onMounted(()=>{
  const myChart = echarts.init(document.getElementById('barEcharts'));
  const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {
    icon: 'circle',
    orient: 'horizontal',
    itemGap: 40,
    itemWidth: 14,
    itemHeight: 14,
    textStyle: {
      fontSize: 14,
      color: '#858585',
      fontWeight: 400,
      padding: [4, 0, 0, 0],
    },
    data: ['A', 'B', 'P', 'E'],
  },
  color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
  grid: {
    left: '3%',
    right: '0',
    bottom: '5%',
    containLabel: false,
  },
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#F3F4F5',
      },
    },
  },
  series: [
    {
      name: 'E',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FFFFFF',
        formatter: function (e) {
          return e.value ? e.seriesName : '';
        }
      },
      itemStyle: {
        borderRadius: [0, 0, 4, 4],
      },
      barWidth: 20,
      emphasis: {
        focus: 'series',
      },
      data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
    },
    {
      name: 'P',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FFFFFF',
        formatter: '{a}',
      },
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
    },
    {
      name: 'B',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FFFFFF',
        formatter: '{a}',
      },
      emphasis: {
        focus: 'series',
      },
      data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
    },
    {
      name: 'A',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FFFFFF',
        formatter: '{a}',
      },
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
      },
      emphasis: {
        focus: 'series',
      },
      data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
    },
  ],
};

  myChart.setOption(option);
})
</script>
