需求:获取饼图需要展示的数据为空时,饼图显示默认数据和指定颜色
let PicChart = this.$echarts.init(document.getElementById(PicChart))
PicChart.setOption({
title: {text:‘标题’,left:'center'},
tooltip: {},
series: [{
radius : '80%',
center: ['50%', '50%'],
label: {
normal: {
position: 'inner',
show : false
}
},
data: [100],//这里设置了默认值
type: 'pie',
itemStyle: {
color: '#ccc',
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
一开始走了误区,直接在itemStyle里面设了个color,这个color是控制整个饼图的,就是说我后面获取到数据之后,展示出来的饼图都是一个颜色,跟需求不一致,下面为修改之后的代码,我只给默认的数据展示的时候显示指定颜色,获取到数据之后再显示不同颜色
下面代码单独给data数据设置了个颜色,如果数据请求回来了,根据条件显示默认数据还是请求到的数据
let PicChart = this.$echarts.init(document.getElementById(PicChart))
PicChart.setOption({
title: {text:‘标题’,left:'center'},
tooltip: {},
series: [{
radius : '80%',
center: ['50%', '50%'],
label: {
normal: {
position: 'inner',
show : false
}
},
data: [{value:100,itemStyle:{color:"#ccc"}],//这里设置了默认值
type: 'pie',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});