ECharts饼图接口数据为空时如何显示指定颜色

需求:获取饼图需要展示的数据为空时,饼图显示默认数据和指定颜色

 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)'
             }
         }
     }]
 });

 

你可能感兴趣的:(ECharts饼图接口数据为空时如何显示指定颜色)