Echarts饼图更改颜色、显示数据且换行

var option = {
   title : {
       text: '数据来源',
       x:'center'
   },
   tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
       orient: 'vertical',
       left: 'left',
       data: ['文章','论坛','漏洞','微博','知乎']
   },
   series : [
       {
           name: '数据来源',
           type: 'pie',
           radius : '55%',
           center: ['50%', '60%'],
           data:[
               {value:sum_article, name:'文章'},
               {value:sum_bbs, name:'论坛'},
               {value:sum_vul, name:'漏洞'},
               {value:sum_weibo, name:'微博'},
               {value:sum_zhihu, name:'知乎'}
           ],
           itemStyle: {
           normal:{
            label:{
            show:true,
            formatter: '{b} : {c} \n ({d}%)'
            },
            labelLine:{
            show:true
            }

            },
               emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       }
   ],
   color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']

};


红色部分的代码是用来在echarts鼠标不hover在扇形上的时候显示数据的,其中/n用来换行。

绿色部分是改变扇形的颜色,每一个rgb对应data里的一项数据,也可以用十六进制表示颜色。

效果图:


  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值