Echarts 横向柱状统计图

效果图：

 

1，首先要引用echarts.js 下载链接:    http://echarts.baidu.com/download.html

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="echarts_cklfb" style="height: 400px;margin-top: 0px;" class="m-b-sm"></div>

2，

<script type="text/javascript">

// 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts_cklfb'));
      // 指定图表的配置项和数据
      myChart.setOption({
          title: {
              text: ' ',

          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              /*  data: [ '2012年']*/
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
          },
          yAxis: {
              type: 'category',
              data: ['思想政治建设', '专题学习教育', '组织力提升', '上党课', '开展谈心谈话', '教育培训', '违纪处理']
          },
          series: [

              {
                  name: '2012年',
                  type: 'bar',

                  itemStyle: {
                      normal: {
                          color: '#a8bcd4'
                      }
                  },
                  data: [10, 20, 31, 14, 11, 67]
              }
          ]
      });

</script>