Echarts 文字太长用省略号代替

这篇具有很好参考价值的文章主要介绍了Echarts 文字太长用省略号代替。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Echarts 文字太长用省略号代替,echarts,前端,javascript

  xAxis: [
      {
        type: 'category',

        data: [
          materialUserEchartsDate.value[0] ? materialUserEchartsDate.value[0].name : '',
          materialUserEchartsDate.value[1] ? materialUserEchartsDate.value[1].name : '',
          materialUserEchartsDate.value[2] ? materialUserEchartsDate.value[2].name : '',
          materialUserEchartsDate.value[3] ? materialUserEchartsDate.value[3].name : '',
          materialUserEchartsDate.value[4] ? materialUserEchartsDate.value[4].name : ''
        ],
        axisLabel: {
          interval: 0,
          // rotate: -10,
          textStyle: {
            fontSize: 10
          },
          formatter: function (value) {
            let maxLength = 5 //每项显示文字个数
            if (value.length > maxLength) {
              value = value.substring(0, maxLength) + '...' // 用省略号代替多余的字
            }
            return value
          }
        },
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          show: false // 隐藏x轴的刻度
        }
      }
    ],

Echarts 文字太长用省略号代替,echarts,前端,javascript

 legend: {
      orient: 'vertical',
      left: 190, // 图例位置
      y: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 10
      },
      itemHeight: 10,
      itemWidth: 10,
      formatter: function (name) { // 图例后显示值
        var data = option.series[0].data //获取series中的data
        var total = 0
        var tarValue
        for (var i = 0, l = data.length; i < l; i++) {
          total += data[i].value
          if (data[i].name == name) {
            tarValue = data[i].value
          }
        }

        if (name.length > 5) { // 如果长度大于5则用省略号代替
          name = name.slice(0, 5) + '...'
        }
        return name + ' ' + ' ' + tarValue
      }
    },

如果想要以上echarts图形完整代码,可以访问
https://gitee.com/abcdfdewrw/echarts_library文章来源地址https://www.toymoban.com/news/detail-618586.html

到了这里,关于Echarts 文字太长用省略号代替的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js超过的文字用省略号显示

    省略多余字符,用...显示。 js方法: export function ellipsis(value, len) {   if (!value) return \\\'\\\'   if (value.length len) {     return value.slice(0, len) + \\\'...\\\'   }   return value } css方法 1、文字超出一行,省略超出部分,显示’…’,加宽度width属来兼容部分浏览,用text-overflow:ellipsis属性来。  

    2024年02月12日
    浏览(59)
  • flutter中文字长度溢出时如何显示省略号?

    经常在绘画UI的时候遇到这种问题,依据场景不同,说下我自己的常用方案: 1. 第一种就是给Text标签外层嵌套一层Container,并指定width宽度 2.第二种是自动适配模式,我常用于Text外层嵌套了Row和Column以及一些布局控件中

    2024年02月15日
    浏览(48)
  • css 实现超出两行、多行文字省略号显示

    在我们日常使用文字超出省略号显示,一般使用下面的方式实现,但是当有需求需要实现两行乃至多行时,该怎么实现呢。 单行省略: 多行省略: ps:需要注意的是,记得控制元素width。

    2024年02月11日
    浏览(57)
  • CSS设置文本不换行多余文字显示省略号

    文章目录 一、使用步骤 代码如下(示例): 代码如下(示例):

    2024年02月12日
    浏览(40)
  • CSS:实现文字溢出显示省略号且悬浮显示tooltip完整信息

    组件: element ui中的tooltip组件 思路:通过ref获取宽度进行判断,当子级宽度大于对应标签/父级宽度显示tooltip组件

    2024年02月09日
    浏览(53)
  • 微信小程序——CSS限制文字宽度和行数(溢出显示省略号)

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 监听页面滑动 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 判断用户上滑还是下滑 https://blog

    2024年02月10日
    浏览(62)
  • element-plus中的tooltip组件实现文字溢出显示省略号,悬浮显示tooltip完整信息

    需求:要求单行显示文字,溢出部分需要显示省略号,但鼠标悬浮时需要显示 tooltip 完整信息。 关键点:文字溢出显示省略号就不说了,主要是如何判断什么时候需要显示 tooltip,什么时候不显示。 思路:如果文字省略时,子元素的宽度势必小于父元素的宽度,则可通过监听

    2024年02月12日
    浏览(58)
  • css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧

    目录 3.CSS三角  4.CSS 用户界面样式 4.1什么是界面样式  4.2轮廓线 outline  4.3 防止拖拽文本域 resize  5.vertical-align 属性 5.1图片,表单都属于行内块元素,默认的vertical-align 是基线对齐。 5.2解决图片底部默认空白缝隙问题 6.溢出的文字省略号显示 1.单行文本溢出显示省略号--必须

    2023年04月09日
    浏览(50)
  • css文本超长显示省略号,鼠标hover省略号展示全部内容

    有时候我们会发现鼠标hover到文字省略号上,会展示出全部内容,效果如下: 首先,文字过长展示省略号 再借助鼠标悬停标签展示其 title 内容的特性,为标签加上 title属性,实现我们想要的效果 有关 title 属性的介绍:

    2024年02月11日
    浏览(56)
  • CSS-设置省略号

    写前端页面的时候很多情况下需要省略号, 单行文本 溢出省略号 设置 单行文本省略号 的写法  : 先设置宽固定的宽度  :width: 300px;      必须要的    设置不换行 :white-space:nowrap; 设置省略号:text-overflow: ellipsis; 裁剪多余的内容/溢出的内容:overflow: hidden;  

    2024年02月12日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包