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

Posted 2020-10-08 大桥的前端日志

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

效果图：