pie渐变色echarts 饼配置项内容和展示
比例展示
配置项如下
let demo = [
{
"x": "生效裁判",
"y": 0.61078,
"unit":""
}
];
let datayy = _Data();
option = {
backgroundColor:'#041F34',
graphic:{
type:"text",
left:"center",
top:"35%",
z:4,
zlevel:6,
style:{
text:datayy[0].unit?(datayy[0].value + datayy[0].unit):(parseInt(datayy[0].value*100) + '%'),
fill:"#fff",
textFont: 'normal 30px Roboto-Medium',
textAlign:"center"
}
},
series: [
{
type: 'pie',
zlevel:1,
silent:true,
radius: ['96%', '97%'],
hoverAnimation:false,
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie1()
},
{
type: 'pie',
zlevel:2,
silent:true,
radius: ['95%', '98%'],
startAngle: -65,
//hoverAnimation:false,
//animation:false,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie2()
},
{
type: 'pie',
zlevel:1,
silent:true,
radius: ['65%', '70%'],
hoverAnimation:false,
// animation:false,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: 'pie1',
value: 20,
itemStyle:{
normal:{
color: "#588ec5",
borderWidth:0,
borderColor:"rgba(0,0,0,0)"
}
}
}]
},
{
type: 'pie',
zlevel:2,
silent:true,
radius: ['0%', '65%'],
hoverAnimation:false,
// animation:false,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: 'pie1',
value: 20,
itemStyle:{
normal:{
color: "rgba(0,0,0,0.4)",
}
}
}]
},
{
type: 'pie',
zlevel:4,
silent:true,
radius: ['0', '70%'],
// hoverAnimation:false,
//animation:false,
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pieData(datayy)
}
]
}
function _pie1(){
let dataArr = [];
for(var i=0;i<8;i++){
dataArr.push({
name: (i+1).toString(),
value: 20,
itemStyle:{
normal:{
color: "rgba(88,142,197,0.4)",
borderWidth:0,
borderColor:"rgba(0,0,0,0)"
}
}
})
}
return dataArr
}
function _pie2(){
let dataArr = [];
for(var i=0;i<8;i++){
if(i%2 === 0){
dataArr.push({
name: (i+1).toString(),
value: 25,
itemStyle:{
normal:{
color: "rgba(88,142,197,0.5)",
borderWidth:0,
borderColor:"rgba(0,0,0,0)"
}
}
})
}else{
dataArr.push({
name: (i+1).toString(),
value: 20,
itemStyle:{
normal:{
color: "rgba(0,0,0,0)",
borderWidth:0,
borderColor:"rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function _pieData(data){
let _data = data;
let dataArr = [];
for(var i=0;i<5;i++){
if(i === 2 ){
let dt = (data[0].unit)?25:(Number(data[0].value));
dataArr.push({
name: (i+1).toString(),
value: dt,
itemStyle:{
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
offset: 0,
color: 'rgb(147,187,216)'
}, {
offset: 1,
color: '#588ec5'
}]),
borderWidth:0,
borderColor:"rgba(0,0,0,0.4)"
}
}
})
}else{
let dta = (data[0].unit)?25:(1-Number(data[0].value))/4;
dataArr.push({
name: (i+1).toString(),
value: dta,
itemStyle:{
normal:{
color: "rgba(0,0,0,0)",
borderWidth:0,
borderColor:"rgba(0,0,0,0)"
}
}
})
}
}
//console.log(dataArr)
return dataArr
}
function _Data() {
let yData = [];
if (demo) {
demo.map(item => {
yData.push({
name: "",
value: item.y,
unit:item.unit
})
})
}
return yData;
}
截图如下
