# 柱状图

基本的柱状图

类目轴
数值轴
series.${item}.type: 'bar'

柱状图常见效果

最大值、最小值： MarkPoint
平均值： MarkLine
数值的显示： label
柱的宽度： barWidth

柱状图特点

描述分类数据，呈现每个分类中有多少
通过柱状图，可以很清晰的看出每个分类的排名情况

# 1. 简单的柱状图

实现：

option = {
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [
    { type: 'bar', /* ... */ },
  ]
}

示例：

<!--02-bar-basic.html-->
<div id="box_02-bar-basic" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_02-bar-basic')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'chinese',
        }
      },
      {
        name: '数学',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'math',
        }
      }
    ]
  });
</script>

# 2. 标记

说明：

在图表上打点、划线

配置：

option = {
  series: [
    {
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' },
        ],
      },
      markLine: {
        data: [
          { type: 'average', name: '平均值' }
        ],
      },
    },
  ]
}

示例：

<!--03-bar-mark.html-->
<div id="box_03-bar-mark" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_03-bar-mark')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' },
          ],
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ],
        },
        encode: {
          x: 'name',
          y: 'chinese',
        }
      },
    ]
  });
</script>

# 3. 显示

# 3.1. 数值

说明：

图形上的文本标签

配置：

option = {
  series: [
    {
      type: 'bar',
      label: {
        show: true,
        position: 'insideTop', // 'inside'
      },
    },
  ]
}

示例：

<!--04-bar-label.html-->
<div id="box_04-bar-label" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_04-bar-label')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        label: {
          show: true,
          position: 'insideTop', // default 'inside'
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' },
          ],
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ],
        },
        encode: {
          x: 'name',
          y: 'chinese',
        }
      },
    ]
  });
</script>

# 3.2. 柱宽度

说明：

柱条的宽度，不设时自适应。
在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。

配置：

option = {
  series: [
    {
      type: 'bar',
      barWidth: '30%',
    },
  ]
};

示例：

<!--05-bar-width.html-->
<div id="box_05-bar-width" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_05-bar-width')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        label: {
          show: true,
          position: 'insideTop', // default 'inside'
        },
        barWidth: '30%',
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' },
          ],
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ],
        },
        encode: {
          x: 'name',
          y: 'chinese',
        }
      },
    ]
  });
</script>

# 3.3. 横向柱状图

说明：

显示横向的柱状图

配置：

交换 x 轴和 y 轴的角色

示例：

<!--06-bar-horizontal.html-->
<div id="box_06-bar-horizontal" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_06-bar-horizontal')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    yAxis: {
      type: 'category',
    },
    xAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        label: {
          show: true,
          position: 'insideTop', // default 'inside'
        },
        barWidth: '30%',
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' },
          ],
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ],
        },
        encode: {
          y: 'name',
          x: 'chinese',
        }
      },
    ]
  });
</script>

本章目录