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 };

    这是借助官网上的列子。

  • 相关阅读:
    php实现cookie加密解密
    三个php加密解密算法
    一个经典的PHP加密解密算法
    Webpack 核心模块 tapable 解析(转)
    详解基于vue,vue-router, vuex以及addRoutes进行权限控制
    编写一个插件
    详解css3 pointer-events(阻止hover、active、onclick等触发事件来
    Dockerfile HEALTHCHECK详解
    Dockerfile 指令 WORKDIR介绍
    NPM私有包部署到私有仓库
  • 原文地址:https://www.cnblogs.com/mxyr/p/9334512.html
Copyright © 2011-2022 走看看