zoukankan      html  css  js  c++  java
  • echarts pie 图表 显示的label 中内容 字体大小自定义

     1 option = {
     2     tooltip: {
     3         trigger: 'item',
     4         formatter: "{a} <br/>{b}: {c} ({d}%)"
     5     },
     6     legend: {
     7         orient: 'vertical',
     8         x: 'left',
     9         data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    10     },
    11     series: [
    12         {
    13             name:'访问来源',
    14             type:'pie',
    15             selectedMode: 'single',
    16             radius: [0, '30%'],
    17 
    18             label: {
    19                 normal: {
    20                     position: 'inner'
    21                 }
    22             },
    23             labelLine: {
    24                 normal: {
    25                     show: false
    26                 }
    27             },
    28             data:[
    29                 {value:335, name:'直达', selected:true},
    30                 {value:679, name:'营销广告'},
    31                 {value:1548, name:'搜索引擎'}
    32             ]
    33         },
    34         {
    35             name:'访问来源',
    36             type:'pie',
    37             radius: ['40%', '55%'],
    38             label: {
    39                 normal: {
    40                     formatter: '{a|{a}}{abg|}
    {hr|}
      {b|{b}:}{c}  {per|{d}%}  ',  //label 的内容
    41                     backgroundColor: '#eee',
    42                     borderColor: '#aaa',
    43                     borderWidth: 1,
    44                     rich: {//定义不同地方的文字的字体大小和颜色
    45                         a: {
    46                             color: '#999',
    47                             lineHeight: 22,
    48                             align: 'center'
    49                         },
    50                         hr: {
    51                             borderColor: '#aaa',
    52                              '100%',
    53                             borderWidth: 0.5,
    54                             height: 0
    55                         },
    56                         b: {
    57                             fontSize: 16,
    58                             lineHeight: 33
    59                         },
    60                         per: {
    61                             color: '#eee',
    62                             backgroundColor: '#334455',
    63                             padding: [2, 4],
    64                             borderRadius: 2
    65                         }
    66                     }
    67                 }
    68             },
    69             data:[
    70                 {value:335, name:'直达'},
    71                 {value:310, name:'邮件营销'},
    72                 {value:234, name:'联盟广告'},
    73                 {value:135, name:'视频广告'},
    74                 {value:1048, name:'百度'},
    75                 {value:251, name:'谷歌'},
    76                 {value:147, name:'必应'},
    77                 {value:102, name:'其他'}
    78             ]
    79         }
    80     ]
    81 };

    这是借助官网上的列子。

  • 相关阅读:
    重学Mybatis从入门到源码之一
    Ribbon的负载均衡策略及使用方法
    SpringCloud之Ribbon的使用及源码解析
    FeignClient spi 调用 短路异常 & 线程池配置
    springboot 中yml配置
    jrebel 启动失败的处理
    使用@Cacheable注解时,Redis连不上,直接调用方法内部的解决方案
    redis scan 命令指南
    正式学习单元测试
    Cannot assign requested address 和 SO_REUSEADDR 参数
  • 原文地址:https://www.cnblogs.com/mxyr/p/9334512.html
Copyright © 2011-2022 走看看