EChartsビスケットインタフェースデータが空の場合、指定した色を表示する方法

1776 ワード

需要:円グラフを取得するために表示するデータが空の場合、円グラフにはデフォルトのデータと指定した色が表示されます.
 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)'
             }
         }
     }]
 });