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

    效果图:

  • 相关阅读:
    软件构造 第七章第三节 断言和防御性编程
    软件构造 第七章第二节 错误与异常处理
    软件构造 第七章第一节 健壮性和正确性的区别
    软件构造 第六章第三节 面向可维护的构造技术
    软件构造 第六章第二节 可维护的设计模式
    欧拉函数代码实现及扩展--快速矩阵幂
    编译原理
    算法设计与分析总结
    人工智能简答总结
    感想
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/7605918.html
Copyright © 2020-2023  润新知