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

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值