首页 > 其他 > 详细

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

时间:2017-09-28 12:24:57      阅读:506      评论:0      收藏:0      [点我收藏+]

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里的一项数据,也可以用十六进制表示颜色。

效果图:

技术分享

 

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

原文:http://www.cnblogs.com/qqfontofweb/p/7605918.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!