var funPie= function (myChart, dataObj,is1366) {
var data = [];
for (var i = 0; i < dataObj.dataArr.length; i++) {
data.push({
value: dataObj.dataArr[i].value,
name: dataObj.dataArr[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 20,
borderColor: dataObj.color[i],
shadowColor: dataObj.color[i]
}
}
}, {
value: 2,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
});
}
var seriesOption = [{
name: '',
type: 'pie',
clockWise: true,//饼图的扇区是否是顺时针排布。
center:['50%','23%'],
radius: ['40%', '40%'],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false,
position: 'outside',
color: '#ddd',
formatter: function (params) {
var percent = 0;
var total = 0;
for (var i = 0; i < dataObj.dataArr.length; i++) {
total += dataObj.dataArr[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== '') {
return '开门记录:' + params.name + '\n' + '\n' + '占百分比:' + percent + '%';
} else {
return '';
}
},
},
labelLine: {
length: 30,
length2: 100,
show: false,
color: '#00ffff'
}
}
},
data: data
}];
var sum = 0;
for (var j = 0; j < data.length; j++) {
sum += parseFloat(data[j].value);
}
var objData = array2obj(data, 'name');
option = {
// backgroundColor: ,
color: dataObj.color,
title: {
text: dataObj.tit,
top: '23%',
textAlign: "center",
left: "49%",
textStyle: {
//设置标题的样式
}
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{b} : {c}" + dataObj.unit + " ({d}%)"
},
legend: {
icon: "emptycircle",//设置成空心圆,circle是实心圆
itemWidth:12,
itemHeight:12,
orient: 'horizontal',
// x: 'left',
data: dataObj.legendData,
// right: 0,
width:'100%',
top: '47%',
align: 'left',//icon居左
textStyle: {
//设置legend的字体样式
rich: {
percent: {
color: 'rgba(16,34,92,1)',
}
}
},
itemGap: 10,
formatter:function (name) {
var per = ((objData[name].value / sum) * 100).toFixed(2);
var result;
if (name.length >= 3) {
result = name + '\t\t\t\t' +"{percent|" + per + "%}";
} else {
result = name + '\t\t\t\t\t\t\t\t\t\t\t' +"{percent|" + per + "%}";
}
return result;
}
},
toolbox: {
show: false
},
series: seriesOption
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
if(is1366){//1366下显示的样式
}
//监听window变化,重画图表
$(window).resize(function () {
myChart.resize();
});
return myChart;
}
使用时
let id= echarts.init(document.getElementById('pieId'));
//这里需要定义需要的数据
this.getData();
let data = [];
data = {
tit: '饼图中间的标题',
unit: '单位',
dataArr: [{
name: 'xxx',
value: 40
}, {
name: 'yyyy',
value: 10
}, {
name: 'zzzz',
value: 30
}, {
name: 'mmmm',
value: 40
}, {
name: 'nnn',
value: 40
}],
legendData: ['xxx', 'yyyy', 'zzzz', 'mmmm', 'nnn'],
color: ['#00B1F1', '#7CBF32', '#C10000', '#0070C1', '#6699FF']
};
funPie(id, data, this.is1366);//this.is1366判断屏幕宽度是不是1366
效果如下: