zoukankan      html  css  js  c++  java
  • echarts饼图指示线文字换行

    var get=function(e){//使饼图标签换行显示的函数

              var newStr=" ";

              var start=0;//开始截取位置

              var end=0;//截取结束位置

              var name_len=e.name.length; //每个内容名称的长度

              var max_name=5;//每行显示的最大长度

              var new_row=Math.ceil(name_len/max_name);//显示行数

              if(name_len>max_name){//如果名称长度大于每行最大显示长度,则

                  for(var i=0;i<new_row;i++){//循环行数

                    var old='';//每次截取的字符

                    start=i*max_name;//截取的起点

                    end=start+max_name;//截取的终点

                    if(i==new_row-1){//如果是最后一行

                      old=e.name.substring(start);

                    }else{

                      old=e.name.substring(start,end)+" ";//截取内容加换行

                    }

                    newStr+=old;//拼接字符串

                  }

              }else{//否则不变显示

                  newStr=e.name;

              }

              return newStr;

              }

    option = {

        title: {

            text: '某站点用户访问来源',

            subtext: '纯属虚构',

            left: 'center'

        },

        tooltip: {

            trigger: 'item',

            formatter: '{a} <br/>{b} : {c} ({d}%)'

        },

       

        series: [

            {

                name: '访问来源',

                type: 'pie',

                radius: '55%',

                center: ['50%', '60%'],

                data: [

                    {value: 100910, name: '参加职工养老保险'},

                    {value: 37520, name: '农村种养家'},

                    {value: 22503, name: '帮扶基地、助残增收、职康站安置'}

                ],

                label: {

                                  normal: {

                                          formatter: get,

                                          fontSize:14,

                                          lineHeight: 18,

                                          }

                         },

                    /*labelLine:{

                        length:10,

                        length2:5,

                    },*/

                emphasis: {

                    itemStyle: {

                        shadowBlur: 10,

                        shadowOffsetX: 0,

                        shadowColor: 'rgba(0, 0, 0, 0.5)'

                    }

                }

            }

        ]

    };

  • 相关阅读:
    Foxit 出mac 版本啦
    mac 上的latex (有很多链接,侵权请通知,一定删除)
    集合转数组
    select2搜索框查询加遍历
    下拉框回显
    柱状堆积图Echarts
    echarts X轴数据显示不全问题
    Map静态键值对
    如何配置pl/sql (本地客户端)连接远程oracle服务器
    自定义验证jquery.validate
  • 原文地址:https://www.cnblogs.com/hjLu/p/12673119.html
Copyright © 2011-2022 走看看