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

    效果图:

  • 相关阅读:
    php中的list()用法中要注意的地方
    怎么让小白理解intel处理器(CPU)的分类
    CPU的历史
    【主板上各种接口和附属部件科普】
    NVMe SSD是什么?
    带你认识SATA、mSATA 、PCIe和M.2四种接口
    那些长短不一的PCI-E插槽都有什么不一样?
    ceph 指定OSD创建pool
    ceph cache pool配置
    搭建ceph集群(单节点)
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/7605918.html
Copyright © 2011-2022 走看看