问题如下图所示:
可以看到图例上的颜色与图的颜色明细不符~~检查了很久才发现是series中的name值的问题。下面贴出源代码:
// 饼状图
var option = {
tooltip:{
backgroundColor:'#D5D3E4',
textStyle:{
color:'#3B357B'
}
},
legend: {
orient: 'vertical',
right: '15%',
bottom:'40%',
textStyle:{
color:'#fff'
},
data: ["收益率", "三年投资收益率", "本年投资收益率"]
},
series : [{
name:'收益率',
type: 'pie',
center : ['24%', '45%'],
radius : ['10%', '15%'],
startAngle:'0',
label: {
normal: {
show: false,
formatter: '{b}'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false,
length2: 1,
},
emphasis: {
show: false
}
},
data:[
{
value:'1360',
name:'收益率',
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color:'#2AC251'
}, {
offset: 1,
color:'#ADF354'
}])
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 1)',
normal: {
color: '#dc1439'
}
},
barBorderRadius:50
}
},{
value:'500',
itemStyle: {
normal: {
color: 'rgba(201,196,227,0.2)',
label: {
show: false
},
labelLine: {
show: false
},
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 1)',
normal: {
color: '#dc1439'
}
}
}
}
]
}, {
name: '三年投资收益率',
type: 'pie',
center : ['24%', '45%'],
radius : ['20%', '25%'],
startAngle:'0',
label: {
normal: {
show: false,
formatter: '{b}'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false,
length2: 1,
},
emphasis: {
show: false
}
},
data:[
{
value:'1825',
name:'三年投资收益率',
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color:'#603AD9'
}, {
offset: 1,
color: '#BC60DF'
}])
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 1)',
normal: {
color: '#dc1439'
}
},
barBorderRadius:50
}
},{
value:'500',
itemStyle: {
normal: {
color: 'rgba(201,196,227,0.2)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 1)',
normal: {
color: '#dc1439'
}
}
}
}
]
}, {
name: '本年投资收益率',
type: 'pie',
center : ['24%', '45%'],
radius : ['30%', '35%'],
startAngle:'0',
label: {
normal: {
show: false,
formatter: '{b}'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false,
length2: 1,
},
emphasis: {
show: false
}
},
data:[
// {value:877, name:'历史'}
{
value:'177',
name:'本年投资收益率',
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color:'#C2285A'
}, {
offset: 1,
color:'#C78DA3'
}])
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 1)',
normal: {
color: '#dc1439'
}
},
barBorderRadius:50
}
},{
value:'300',
itemStyle: {
normal: {
color: 'rgba(201,196,227,0.2)',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255, 255, 255, 1)',
normal: {
color: '#dc1439'
}
}
}
}
]
}]
};
可以看到我的series里的name值和data里的name值写成一样了~~当把三个series下的name值改为饼图的名称时,页面就好了。效果如下图所示:
可以看到饼图和图例一样成渐变色了~~