# 柱状图(bar)示例

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '自定义柱状图',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['运行中', '关机', '其他'] // 每个柱子的X轴名称
    // 设置X周文字显示旋转
    // axisLabel: {
    //   rotate: 30
    // }
  },
  // 设置不显示Y轴信息
  yAxis: { type: 'value', show: false },
  series: [
    {
      type: 'bar',
      data: [
        { value: 120, name: '运行中', itemStyle: { color: '#FF6384' } },
        { value: 200, name: '关机', itemStyle: { color: '#36A2EB' } },
        { value: 150, name: '其他', itemStyle: { color: '#FFCE56' } }
      ],
      // 在柱子顶部显示数值
      label: {
        show: true,
        position: 'top',
        formatter: '{c}' // 显示数据值
      },
      // 柱子宽度
      barWidth: '40%'
    }
  ]
};

option && myChart.setOption(option);

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['已用', '可用']
  },
  yAxis: {
    type: 'value'
  },
  color: ['#b8741a', '#c280ff'],
  series: [
    {
      name: '数据卷',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [47804, 24230],
      // 柱子宽度
      barWidth: '30%'
    },
    {
      name: '系统盘',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [54651, 37200]
    }
  ]
};
option && myChart.setOption(option);