Echarts数据可视化--特殊饼图1

数据可视化开发过程中，经常会遇到比较特殊的图表。现在简单介绍遇到过的特殊饼图-1的做法：

1、HTML代码：

<div class="wrap">
    <div id="echarts"></div>
</div>

2、CSS代码：

.wrap {
    height: 800px;
    position: relative;
    width: 800px;
}
#echarts {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

3、JS代码：

var myChart = echarts.init(document.getElementById('echarts'));
var data = [];
var labelData = [];
for (var i = 0; i < 24; ++i) {
    data.push({
        'value': Math.random() * 10 + 10 - Math.abs(i - 12),
        'name': i + ':00'
    });
    labelData.push({
        'value': 1,
	'name': ''
    });
}

var option = {
    'title': {
        'text': '',
        'left': '50%',
        'textAlign': 'center',
        'top': '20%'
    },
    'color': ['#22C3AA'],
    'series': [ {
        'type': 'pie',
        'hoverAnimation': false,
        'data': labelData,
        'radius': ['75%', '100%'],
        'zlevel': -2,
        'itemStyle': {
            'normal': {
	        'color': '#22C3AA',
		'borderColor': '#fff',
	        'borderWidth': 20
            },
            'emphasis': {
                'color': '#22c3aa',
		'borderColor': '#fff',
		'borderWidth': 20
            }
	},
	'label': {
            'normal': {
                'position': 'inside'
	    }
        }
    }]
};
myChart.setOption(option);

4、效果图：