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)'

                    }

                }

            }

        ]

    };

  • 相关阅读:
    linux驱动---等待队列、工作队列、Tasklets【转】
    Pinctrl子系统之一了解基础概念【转】
    Linux内存管理(最透彻的一篇)【转】
    linux驱动学习笔记---实现中断下半部以及驱动编写规范(七)【转】
    一些网址下载【转】
    Linux /proc/$pid部分内容详解【转】
    Linux kernel workqueue机制分析【转】
    Linux进程核心调度器之主调度器schedule--Linux进程的管理与调度(十九)【转】
    Linux Kernel PANIC(三)--Soft Panic/Oops调试及实例分析【转】
    Linux内核调试的方式以及工具集锦【转】
  • 原文地址:https://www.cnblogs.com/hjLu/p/12673119.html
Copyright © 2011-2022 走看看