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

    效果图:

     
  • 相关阅读:
    转载JGTM' 2004[MVP]有关AOP的三篇精彩文章
    新增Skin
    发表文章的要求
    自定义UserControl的属性为什么不能在设计时显示在属性窗口中
    .Text学习笔记(一)
    访问类的private或internal成员[转载]
    博客园对发表文章的一些要求
    博客园成立了管理团队
    推荐一篇介绍.NET MetaData的文章
    让大家久等了:终于完成了AOP尝鲜系列之第三部[JGTM'2004 [MVP]文章转载]
  • 原文地址:https://www.cnblogs.com/amylis_chen/p/7402827.html
Copyright © 2020-2023  润新知