Echarts #2 柱状图 bar

一、Echarts 柱状图绘制

1、柱状图

2、代码

<div id="echartsDiv" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

      //初始化echarts实例
      var myChart = echarts.init(document.getElementById('echartsDiv'));

      //指定图表的配置项
      var option = {
        title: {
			text: 'echarts 单项柱状图实例'
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: []
          }
        ]
      };
      
	  //填充数据
      option.xAxis.data = ['一月', '三月', '五月', '七月', '九月', '十一月'];
      option.series[0].data = [20, 27, 39, 13, 17, 30];
      myChart.setOption(option);
    </script>

二、Echarts 柱状图配置项

这里只记录常见配置项，完整配置项可去官网查看。

1、title 标题

标题组件，包含主标题和副标题。

在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

1.1、标题位置

根据 top、left、right、bottom 四个参数可以去设置 title 的位置。比如常见的：

• 横向居中

	title: {
		left:'center'
	}

• 底部显示

	title: {
		bottom: '5px'
	}

2、legend 图例

图例组件。

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。

当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平）。

2.1、图例定义

        legend: {
          data: ['销量']
        },

legend 中 data 的个数需与 series 中项的个数保持一致，且 series 项的 name 值要与 legend 一致。

2.2、图例颜色

legend 颜色与 series 项的颜色是保持一致的。而这两者可通过 option.color 属性来配置。

	color: ['#8B008B']

定义好 option.color 后 echarts 会根据定义的顺序来渲染 legend 和 series 项的颜色。

除此之外，还可以通过另外一种方式来配置 legend 颜色，那就是不设置 option.color 。
此时，只需单独设置每个 series 项的颜色，然后 echarts 会自动渲染出对应 legend 的颜色，单独设置 series 项的配置如下：

    series: [
		{
			name: '销量',
			type: 'bar',
			//单独设置项的颜色
			itemStyle: {
				color: '#4B0082'
			},
			data: []
		}
	]

2.3、图例位置

根据 top、left、right、bottom 四个参数可以去设置 legend 的位置。

2.4、图例方向

根据 orient 参数可以设置图例列表的布局朝向。可选值为 ‘horizontal’ 和 ‘vertical’。默认 ‘horizontal’ ，即水平布局。

    legend: {
    	orient: 'vertical'
    }

3、grid 网格

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

3.1、网格位置

根据 top、left、right、bottom 四个参数可以去设置 grid 的位置。

3.2、网格背景

根据 backgroundColor 参数可以去设置 grid 的背景色。

4、xAxis x轴

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

4.1、x轴位置

可选值：‘top’ 和 ‘bottom’，默认 ‘bottom’ 底部。

    xAxis: {
    	position: 'top'
    }

4.2、x轴类型

可选：

‘value’ 数值轴，适用于连续数据。

‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。（默认且常用）

‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

‘log’ 对数轴。适用于对数数据。

    xAxis: {
    	type: 'category'
    }

4.3、x轴刻度

axisTick 可对坐标轴刻度进行相关设置。

    xAxis: {
		axisTick: {
			//刻度与标签对齐
			alignWithLabel: true
		}
    }

4.4、x轴标签

axisLabel 可对坐标轴标签进行相关设置。

4.4.1、旋转

    xAxis: {
		axisLabel: {
			rotate: 60
		}
    }

4.4.2、间隔

如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

    xAxis: {
		axisLabel: {
			interval: 1
		}
    }

4.4.3、内容格式

    xAxis: {
		axisLabel: {
			//字符串模板方式
 			formatter: '{value} D'
 			//回调函数方式
    		//formatter: function (value, index) {
			//    return value + ' D';
			//}
		}
    }

5、yAxis y轴

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

5.1、y轴位置

可选值：‘left’和‘right’，默认 ‘left’ 左边。

    yAxis: {
		position: 'right'
    }

5.2、y轴类型

坐标轴类型。

可选：

‘value’ 数值轴，适用于连续数据。

‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。

‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

‘log’ 对数轴。适用于对数数据。

    yAxis: {
    	type: 'value'
    }

5.3、y轴最小(大)值

参数 min 和 max 分别代表 y轴坐标刻度的最小值和最大值。当不指定时，echarts 会根据数据自动给出合适的最小刻度和最大刻度。当没有强制规定时，不设置反而看起来会更加美观。

    yAxis: {
		min: 0,
		max: 50
    }