var labelData = []; var labelData1 = []; for (var i = 0; i < 150; ++i) { labelData.push({ value: 1, name: i, itemStyle: { normal: { color: 'rgba(0,209,228,0)', } } }); } for (var i = 0; i < labelData.length; ++i) { if (labelData[i].name < 50) { labelData[i].itemStyle = { normal: { color: new echarts.graphic.LinearGradient( 0, 1, 0, 0, [{ offset: 0, color: '#6dfbff' }, { offset: 1, color: '#02aeff' } ] ) }, } } } for (var i = 0; i < 150; ++i) { labelData1.push({ value: 1, name: i, itemStyle: { normal: { color: 'rgba(0,209,228,0)', } } }); } for (var i = 0; i < labelData1.length; ++i) { if (labelData1[i].name < 150) { labelData1[i].itemStyle = { normal: { color: '#464451', }, } } } function Pie() { let dataArr = []; for (var i = 0; i < 100; i++) { if (i % 10 === 0) { dataArr.push({ name: (i + 1).toString(), value: 30, itemStyle: { normal: { color: "rgba(0,255,255,1)", borderWidth: 0, borderColor: "rgba(0,0,0,0)", } } }) } else { dataArr.push({ name: (i + 1).toString(), value: 100, itemStyle: { normal: { color: "rgba(0,0,0,0)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } } return dataArr } function Pie1() { let dataArr = []; for (var i = 0; i < 100; i++) { if (i % 5 === 0) { dataArr.push({ name: (i + 1).toString(), value: 20, itemStyle: { normal: { color: "rgba(0,255,255,1)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } else { dataArr.push({ name: (i + 1).toString(), value: 100, itemStyle: { normal: { color: "rgba(0,0,0,0)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } } return dataArr } function Pie2() { let dataArr = []; for (var i = 0; i < 100; i++) { if (i % 5 === 0) { dataArr.push({ name: (i + 1).toString(), value: 20, itemStyle: { normal: { color: "rgba(0,255,255,.3)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } else { dataArr.push({ name: (i + 1).toString(), value: 100, itemStyle: { normal: { color: "rgba(0,0,0,0)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } } return dataArr } function Pie3() { let dataArr = []; for (var i = 0; i < 100; i++) { if (i % 10 === 0) { dataArr.push({ name: (i + 1).toString(), value: 30, itemStyle: { normal: { color: "rgba(0,255,255,.5)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } else { dataArr.push({ name: (i + 1).toString(), value: 100, itemStyle: { normal: { color: "rgba(0,0,0,0)", borderWidth: 0, borderColor: "rgba(0,0,0,0)" } } }) } } return dataArr } option = { backgroundColor: '#1f1e26', title: [{ text: '75%', x: '50%', y: '37%', textAlign: 'center', textStyle: { fontSize: '70', fontWeight: '100', color: '#79ffff', textAlign: 'center', }, }, { text: 'DESIGN ELEMENTS', left: '50%', top: '52%', textAlign: 'center', textStyle: { fontSize: '18', fontWeight: '400', color: '#5c5a68', textAlign: 'center', }, }, { text: 'DONUT CHART', left: '50%', top: '57%', textAlign: 'center', textStyle: { fontSize: '14', fontWeight: '400', color: '#484556', textAlign: 'center', }, }, ], polar: { radius: ['51%', '47%'], center: ['50%', '50%'], }, angleAxis: { max: 100, show: false, startAngle: 0, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false }, }, series: [{ name: '', type: 'bar', roundCap: true, barWidth: 60, showBackground: true, backgroundStyle: { color: '#464451', }, data: [75], coordinateSystem: 'polar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#0ff' }, { offset: 1, color: '#02aeff' }]), } } }, { hoverAnimation: false, type: 'pie', z: 2, data: labelData, radius: ['52%', '59%'], zlevel: -2, itemStyle: { normal: { borderColor: '#1f1e26', borderWidth: 4, } }, label: { normal: { position: 'inside', show: false, } }, }, { hoverAnimation: false, type: 'pie', z: 1, data: labelData1, radius: ['52%', '59%'], zlevel: -2, itemStyle: { normal: { borderColor: '#1f1e26', borderWidth: 4, } }, label: { normal: { position: 'inside', show: false, } }, }, { type: 'pie', radius: ['42%', '43%'], center: ['50%', '50%'], data: [{ hoverOffset: 1, value: 100, name: '', itemStyle: { color: '#ff6189', }, label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, { label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, value: 100 - 75, hoverAnimation: false, itemStyle: { color: '#3c3a48', }, } ] }, { type: 'pie', zlevel: 0, silent: true, radius: ['67%', '65.5%'], z: 1, label: { normal: { show: false }, }, labelLine: { normal: { show: false } }, data: Pie() }, { type: 'pie', zlevel: 0, silent: true, startAngle: -150, radius: ['65%', '63.5%'], z: 1, label: { normal: { show: false }, }, labelLine: { normal: { show: false } }, data: Pie3() }, { type: 'pie', zlevel: 0, silent: true, startAngle: -140, radius: ['68%', '66.5%'], z: 1, label: { normal: { show: false }, }, labelLine: { normal: { show: false } }, data: Pie() }, { type: 'pie', zlevel: 0, silent: true, radius: ['61%', '60%'], z: 1, label: { normal: { show: false }, }, labelLine: { normal: { show: false } }, data: Pie1() }, { type: 'pie', zlevel: 0, silent: true, startAngle: -140, radius: ['61%', '60%'], z: 1, label: { normal: { show: false }, }, labelLine: { normal: { show: false } }, data: Pie2() }, { type: 'pie', zlevel: 0, silent: true, startAngle: -147.5, radius: ['61%', '60%'], z: 1, label: { normal: { show: false }, }, labelLine: { normal: { show: false } }, data: Pie2() }, ] };

Echarts在线免费图表