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

onMounted(()=>{
  const myChart = echarts.init(document.getElementById('barEcharts'));
  const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    top:10,
    right:0,
    icon: 'circle',
    orient: 'horizontal',
    itemGap: 10,
    itemWidth: 10,
    itemHeight: 14,
    textStyle: {
      fontSize: 14,
      color: '#858585',
      fontWeight: 400,
    },

  },
  data: ['任务一', '任务二', '任务三', '任务四'],
  color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
  grid: {
    left: '10%',
    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: '任务四',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        color: '#FFFFFF',
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0],
      },
      barWidth: 12,
      data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
    },
    {
      name: '任务三',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        color: '#FFFFFF',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
    },
    {
      name: '任务二',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        color: '#FFFFFF',
      },
      data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
    },
    {
      name: '任务一',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        color: '#FFFFFF',
      },
      itemStyle: {
        borderRadius: [0, 0, 0, 0],
      },
      data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
    },
  ],
};

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