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

    效果图:

  • 相关阅读:
    Gulp插件less的使用
    并行与并发的区别
    原生javascript实现异步的7种方式
    原生JS实现bind()函数
    职责链模式
    Nginx如何启用ETag,提高访问速度
    前端性能优化:配置ETag
    迭代器模式
    JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理
    cdn网络加速
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/7605918.html
Copyright © 2011-2022 走看看