<template>
  <div ref="chart" style="width: 100%;min-width:150px; height: 50px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'BarChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        color: ['#3398DB', '#FF5722', '#67C23A'], // 设置系列颜色
        // 不显示图例
        legend: {
          show: false
        },
        // 不显示x轴和y轴的坐标信息
        xAxis: {
          show: false,
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            name: '系列1',
            data: [120, 200, 150, 80, 70, 110, 130, 90, 75, 100],
            type: 'bar',
            barWidth: '30%' // 设置柱子的宽度
          },
          {
            name: '系列2',
            data: [60, 110, 90, 50, 40, 80, 100, 60, 45, 70],
            type: 'bar',
            barWidth: '30%'
          },
          {
            name: '系列3',
            data: [90, 150, 120, 70, 65, 90, 110, 80, 65, 85],
            type: 'bar',
            barWidth: '30%'
          }
        ]
      };
      chart.setOption(option);
    }
  }
};
</script>

<style>
/* 这里可以添加一些样式 */
</style>
