解决echarts图形由于label过长导致文字显示不全问题

摘要:
使用echarts打印饼图,在pc没问题,但一到移动端问题就来了,由于屏幕过小,导致label部分被遮挡一、问题分析如上图这个就尴尬了,囧么办呢?silent:true,        //图形是否不响应和触发鼠标事件center:['50%','55%'],radius:['20%','45%'],labelLine:{//设置指示线的长度normal:{length:12,length2:8}},label:{normal:{formatter:'{b|{b}}{c}{per|{d}%}',rich:{b:{fontSize:12,height:60,lineHeight:20,align:'center'//设置文字居中},per:{color:'#eee',backgroundColor:'#334455',padding:[2,4],borderRadius:2,align:'center',}}}},data:dataArray||[{value:0,name:'存量导入数据'},{value:0,name:'异构导入数据'},{value:0,name:'互联网导入数据'},]}]三、修改label中的normallabel:{normal:{formatter{lettext=v.name;letvalue_format=v.value;letpercent_format=Math.round+'%';if{return`${text}${value_format}${percent_format}`;}elseif{returntext=`${text.slice(0,6)}${text.slice}${value_format}${percent_format}`}elseif{returntext=`${text.slice(0,6)}${text.slice}${text.slice}${value_format}${percent_format}`}elseif{returntext=`${text.slice(0,6)}${text.slice}${text.slice}${text.slice}${value_format}${percent_format}`}elseif{returntext=`${text.slice(0,6)}${text.slice}${text.slice}${text.slice}${text.slice}${value_format}${percent_format}`}elseif{returntext=`${text.slice(0,6)}${text.slice}${text.slice}${text.slice}${text.slice}${text.slice}${value_format}${percent_format}`}},textStyle:{fontSize:14}}},四、预览OK完美解决。

使用echarts 打印饼图,在pc没问题,但一到移动端问题就来了,由于屏幕过小,导致label部分被遮挡

一、问题分析

在这里插入图片描述
如上图这个就尴尬了,囧么办呢?
还好echarts 提供了formatter方法
在这里插入图片描述

二、修改前代码块

series: [
      {
        name: seriesName || '数据来源',
        type: 'pie',
        clickable: false,       //是否开启点击
        minAngle: 15,              //最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互
        avoidLabelOverlap: true,   //是否启用防止标签重叠策略
        hoverAnimation: false,    //是否开启 hover 在扇区上的放大动画效果。
        silent: true,        //图形是否不响应和触发鼠标事件
        center: ['50%', '55%'],
        radius: ['20%', '45%'],
        labelLine: { //设置指示线的长度
normal: {
            length: 12,
            length2: 8}
        },
        label: {
          normal: {
            formatter: '{b|{b}}
{c}
{per|{d}%}  ',
            rich: {
              b: {
                fontSize: 12,
                height: 60,
                lineHeight: 20,
                align: 'center' //设置文字居中
},
              per: {
                color: '#eee',
                backgroundColor: '#334455',
                padding: [2, 4],
                borderRadius: 2,
                align: 'center',
              }
            }
          }
        },
        data: dataArray ||[
          { value: 0, name: '存量导入数据'},
          { value: 0, name: '异构导入数据'},
          { value: 0, name: '互联网导入数据'},
        ]
      }
    ]

三、修改label 中的normal

label: {
    normal: {
      formatter(v) {
        let text =v.name;
        let value_format =v.value;
        let percent_format = Math.round(v.percent) + '%';
        if (text.length <= 6) {
          return`${text}
${value_format}
${percent_format}`;
        } else if (text.length > 6 && text.length <= 12) {
          return text = `${text.slice(0, 6)}
${text.slice(6)}
${value_format}
${percent_format}`
        } else if (text.length > 12 && text.length <= 18) {
          return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12)}
${value_format}
${percent_format}`
        } else if (text.length > 18 && text.length <= 24) {
          return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12, 18)}
${text.slice(18)}
${value_format}
${percent_format}`
        } else if (text.length > 24 && text.length <= 30) {
          return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12, 18)}
${text.slice(18, 24)}
${text.slice(24)}
${value_format}
${percent_format}`
        } else if (text.length > 30) {
          return text = `${text.slice(0, 6)}
${text.slice(6, 12)}
${text.slice(12, 18)}
${text.slice(18, 24)}
${text.slice(24, 30)}
${text.slice(30)}
${value_format}
${percent_format}`
        }
      },
      textStyle: {
        fontSize: 14}
    }
  },

四、预览

在这里插入图片描述
OK完美解决。

免责声明:文章转载自《解决echarts图形由于label过长导致文字显示不全问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇windows mediasoup-demo 公网部署 解决部署后无法看到对方的视频复杂对象类型的WebService高级部分下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Liunx之Centos系统无人值守全自动化安装

  作者:邓聪聪 定制centos6.8自动安装ISO光盘 安装系统为centos6.8 (base server),安装方式为全新安装 使用ext4分区格式 安装前可以交互输入root密码,主机名,分区大小,然后安装过程自动化 关闭防火墙,selinux 网络为dhcp方式获取 时区为Asia/Shanghai 分区表类型为mbr 默认设置三个分区,b...

vue+element-ui el-table表格(含表头)内容溢出省略,鼠标悬浮提示

第一种:参考:https://my.oschina.net/u/3455362/blog/4674804 <template> <div class="test"> <el-table :data="gridData" border stripe style=" 100%"> &...

input标签与label标签的“合作关系”

一直忽略了input和label的关系。一次在做自定义单选框的时候又重新捡起来这对“兄弟”。 label的for属性和input的id值一致的话,input和label就会组成一个组。例如: <label for="test"> <input type="checkbox" id="test" abc="1111" /> &...

python 下五子棋

import math import tkinter from tkinter import * root = Tk() root.title('helloWorld') # 窗口尺寸 # root.geometry('500x500') # 固定尺寸 root.resizable(0, 0) # 棋盘中一格边长 boxSize = 60 # 横向格...

使用matplotlib画出log的图像

以下内容是学习笔记,若有侵权,立即删除! import math import matplotlib.pyplot as plt import numpy as np if __name__ == '__main__': #获得浮点类型numpy数组 x = np.arange(0.05,3,0.05) #获得函数结果 y1...

html5表单验证(Bootstrap)

html5表单验证(Bootstrap) 邮箱验证: <input name="email" type="text" placeholder="必填项"   required pattern="^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$" title="邮箱正确格式...