Echarts資料視覺化--特殊餅圖1
阿新 • • 發佈:2019-01-25
資料視覺化開發過程中,經常會遇到比較特殊的圖表。現在簡單介紹遇到過的特殊餅圖-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、效果圖: