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
    评论
引用中提到了echarts饼图图例样式的修改。可以通过对legend对象进行修改来改变图例的样式。在legend中可以设置orient属性来确定图例的方向,可以设置x属性来确定图例的位置。可以使用data属性来设置图例的数据项,可以使用icon属性来设置图例的图标样式。可以使用formatter属性来自定义图例的文本格式,通过修改formatter函数中的代码,可以实现对图例文本的自定义样式。可以使用textStyle属性来设置图例文本的样式,可以使用rich属性来进一步设置富文本样式。根据需求可以根据以上属性来调整echarts饼图的图例样式。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Axure8.0基于Echarts的动态图表元件库,实用版本](https://download.csdn.net/download/weixin_54626591/85812795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Echarts 饼图 图例修改,legend样式修改](https://blog.csdn.net/qq_41954585/article/details/122585663)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值