1、来源
http://gallery.echartsjs.com/editor.html?c=xHkCjtI1Bm
2、源码
var scaleData = [{ //series data
'name': '工程建设',
'value': 10
},
{
'name': '产权交易',
'value': 10
},
{
'name': '土地交易',
'value': 10
},
{
'name': '其他交易',
'value': 10
},
{
'name': '土地交易',
'value': 10
},
{
'name': '其他交易',
'value': 10
},
];
// label setting
var rich = {
white: {
color: '#ddd',
align: 'center',
padding: [3, 0]
}
};
// space setting between the two elements
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
};
// original data
var data = [];
// 7 colors
var color = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple'] //7色
// use for function to push data
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
name: scaleData[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 20,
borderColor: color[i],
shadowColor: color[i]
}
}
}, {
// space setting
value: 2,
name: '',
itemStyle: placeHolderStyle
});
}
// basic setting of the series
var seriesObj = [{
name: '',
type: 'pie',
clockWise: true,
radius: [195, 200],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
color: '#ddd',
// show value at the outside place
formatter: function(params) {
var percent = 0;
var total = 0;
for (var i = 0; i < scaleData.length; i++) {
total += scaleData[i].value;
}
// Keep two decimal places
percent = ((params.value / total) * 100).toFixed(2);
if (params.name !== '') {
// custom style
return params.name + '\n{white|' + '占比' + percent + '%}';
} else {
return '';
}
},
rich: rich
},
labelLine: {
length: 30, //视觉引导线第一段的长度。
length2: 100, //视觉引导项第二段的长度。
show: true,
color: '#00ffff',
}
}
},
data: data
}];
option = {
backgroundColor: '#04243E',
tooltip: {
show: false
},
legend: {
show: false
},
toolbox: {
show: false
},
series: seriesObj
}