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

    效果图:

     
  • 相关阅读:
    1130 Infix Expression (25分)
    1131 Subway Map (30分)
    1132 Cut Integer (20分)
    1133 Splitting A Linked List (25分)
    1134 Vertex Cover (25分)
    1135 Is It A Red-Black Tree (30分)
    tensorflow 1.0的部分项目配置匹配
    1136 A Delayed Palindrome (20分)
    谷粒商城Redisson分布式锁(二十四)
    谷粒商城缓存(二十三)
  • 原文地址:https://www.cnblogs.com/amylis_chen/p/7402827.html
Copyright © 2020-2023  润新知