极坐标系下的堆叠柱状图（多重环形图）

柱状图与极坐标系结合会是什么样的呢？

效果图如下：

如何配置

坐标系配置：

polar 极坐标属性配置：

    polar: {},

polar内属性值不设置代表polar内的属性使用默认值：如

center:[‘50%’, ‘50%’], 圆心的位置距离上和左为容器高和宽的50%（即正中央）
radius:[‘0%’,’80%’], 设置内圆半径为容器的大小的0%，外圆半径为容器的80%

angleAxis 极坐标系的角度轴配置:

    angleAxis: {
     max:12,
    },

max:12, 坐标刻度最大值为12
clockwise:true, 刻度增长是否按顺时针，默认顺时针。

radiusAxis 极坐标系的径向轴配置:

radiusAxis: {
     type: 'category',
     data: ['周一', '周二', '周三', '周四'],
     z: 10
    },

category’ 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
data : [‘周一’, ‘周二’, ‘周三’, ‘周四’,], 类目数据，在类目轴（type: ‘category’）中有效。
z:0, X 轴组件的所有图形的z值

实现环形柱状图

    series: [{
     type: 'bar',
     data: [4, 2, 3, 1],
     coordinateSystem: 'polar',
     name: '早上访问',
     stack: 'a'
    }, {
     type: 'bar',
     data: [2, 3, 6, 4],
     coordinateSystem: 'polar',
     name: '下午访问',
     stack: 'a'
    }, {
     type: 'bar',
     data: [3, 2, 1, 4],
     coordinateSystem: 'polar',
     name: '晚上访问',
     stack: 'a'
    }],

series-bar. coordinateSystem = ‘cartesian2d‘

指定该系列使用的坐标系，可选：
‘cartesian2d’
- 使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
‘polar’
- 使用极坐标系

完整代码如下：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="echarts.min.js"></script>
 </head>

 <body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));
   var option;
   option = {
    title :{
     text:'树懒课堂访问时间分析',
     subtext:'单位：千',
    },
    angleAxis: {
     max:12,
    },
    radiusAxis: {
     type: 'category',
     data: ['周一', '周二', '周三', '周四'],
     z: 10
    },
    polar: {
    },
    series: [{
     type: 'bar',
     data: [4, 2, 3, 1],
     coordinateSystem: 'polar',
     name: '早上访问',
     stack: 'a'
    }, {
     type: 'bar',
     data: [2, 3, 6, 4],
     coordinateSystem: 'polar',
     name: '下午访问',
     stack: 'a'
    }, {
     type: 'bar',
     data: [3, 2, 1, 4],
     coordinateSystem: 'polar',
     name: '晚上访问',
     stack: 'a'
    }],
    legend: {
     show: true,
     data: ['早上访问', '下午访问', '晚上访问'],
     right:'15%',
    }
   };
   myChart.setOption(option);
  </script>
 </body>
</html>

echarts改变柱状图每个柱子的颜色柱形图代码实例及其注释详解