炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 极坐标系下的堆叠柱状图(多重环形图)

极坐标系下的堆叠柱状图(多重环形图)

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

效果图如下:

如何配置

坐标系配置:

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="https://www.shulanxt.com/visualization/echarts/bar-polar/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></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>

炫意HTML5 » ECharts – 极坐标系下的堆叠柱状图(多重环形图)

Java基础教程Android基础教程