EChartsビスケットインタフェースデータが空の場合、指定した色を表示する方法
1776 ワード
需要:円グラフを取得するために表示するデータが空の場合、円グラフにはデフォルトのデータと指定した色が表示されます.
最初は誤りを犯して、itemStyleの中に直接colorを設置しました.このcolorは餅図全体を制御しています.つまり、私が後でデータを取得した後、表示された餅図はすべて1つの色で、需要と一致しません.次は修正後のコードのために、私は黙認したデータを表示するときに指定の色を表示します.データを取得してから異なる色を表示します.
次のコードは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: [100],//
type: 'pie',
itemStyle: {
color: '#ccc',
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
最初は誤りを犯して、itemStyleの中に直接colorを設置しました.このcolorは餅図全体を制御しています.つまり、私が後でデータを取得した後、表示された餅図はすべて1つの色で、需要と一致しません.次は修正後のコードのために、私は黙認したデータを表示するときに指定の色を表示します.データを取得してから異なる色を表示します.
次のコードは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)'
}
}
}]
});