echarts科技饼图
中间饼图，外部加装饰图片，再加360度旋转动画即可实现
var xdata = 60; //接收x数据
var ydata = 85; //接收y数据
var myChart = echarts.init(document.getElementById('chart'));
var datas_outer = []; //存放外层颜色小块
var datas_inner = []; //存放内层颜色小块
var num = 20; //定义小块个数
var rate = xdata / ydata; //完成率
for (var i = num; i >= 0; i--) {
if (i <= rate * 20) {
datas_outer.push({
value: 1,
name: '已完成',
itemStyle: {
color: '#57EC70', //浅绿色
borderWidth: 4,
borderColor: '#023151', //背景色 融入
}
});
datas_inner.push({
value: 1,
name: '已完成',
itemStyle: {
color: '#185972', //深绿色
borderWidth: 4,
borderColor: '#023151', //背景色 融入
}
})
} else {
datas_outer.push({
value: 1, //占位用
name: '未完成',
itemStyle: {color: 'rgba(41,232,233,0)'}
});
datas_inner.push({
value: 1, //占位用
name: '未完成',
itemStyle: {color: 'rgba(41,232,233,0)'}
})
}
}
//定义图表option
var option = {
tooltip: {
show: false
},
title: {
text: xdata + '/' + ydata, //中间标题
x: 'center',
y: 'center',
textStyle: {
color: '#FFFFFF',
fontSize: '130%' //中间标题文字大小设置
}
},
series: [{
name: '完成情况外层',
type: 'pie',
radius: ['60%', '40%'],
center: ['50%', '50%'],
clockwise: false,
data: datas_outer,
startAngle: 0,
hoverAnimation: false,
legendHoverLink: false,
label: {
show: false,
},
labelLine: {
show: false
},
},
{
name: '完成情况内层',
type: 'pie',
radius: ['38%', '30%'],
center: ['50%', '50%'],
clockwise: false,
data: datas_inner,
startAngle: 180,
hoverAnimation: false,
legendHoverLink: false,
label: {
show: false,
},
labelLine: {
show: false
},
}]
};
myChart.setOption(option);
window.onresize = function (){ //窗口适应
myChart.resize();
}
