解决echarts中X轴文字过长的问题。【转】

axisLabel: {
                                     interval: 0,
                                     formatter:function(value)
                                     {
                                         debugger
                                         var ret = "";//拼接加\n返回的类目项
                                         var maxLength = 2;//每项显示文字个数
                                         var valLength = value.length;//X轴类目项的文字个数
                                         var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                         if (rowN > 1)//如果类目项的文字大于3,
                                         {
                                             for (var i = 0; i < rowN; i++) {
                                                 var temp = "";//每次截取的字符串
                                                 var start = i * maxLength;//开始截取的位置
                                                 var end = start + maxLength;//结束截取的位置
                                                 //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
                                                 temp = value.substring(start, end) + "\n";
                                                 ret += temp; //凭借最终的字符串
                                             }
                                             return ret;
                                         }
                                         else {
                                             return value;
                                         }
                                     }
                                 }  

转自:http://blog.csdn.net/kebi007/article/details/68488694

时间: 2024-11-07 20:18:26

解决echarts中X轴文字过长的问题。【转】的相关文章

highcharts中X轴描述过长问题

如: var opt_chart=({    chart: {        renderTo: 'div',        type: 'bar'    },    title: {        text: ''    },    colors: ['#4db3a4'],    xAxis: {        categories: ['1222222222221212121212121212121212','34556789-0987654323456789'],        title

echarts图表里label文字过长换行的方法

在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样 而echarts没有提供换行的方法,但是可以使用fomatter方法进行设置,代码如下 formatter: function(val) { var strs = val.split(''); //字符串数组 var str = '' for(var i = 0, s; s = strs[i++];) { //遍历字符串数组 str += s; if(!(i % 2)) str += '\n'; //按需要求余

echarts图表x轴文字显示不全问题及柱状图颜色调整

var myChart= echarts.init(document.getElementById('myChart')); option = { title: { // text: '纯属虚构', }, tooltip: { trigger: 'axis' }, grid: { left: '5%',//左边距 right: '5%',//走边距 top: 10,//上边距 bottom: 50,//下边距 containLabel: true }, xAxis: [ { type: 'cat

解决echarts中的点击事件点击后走多次接口

使用echarts图点击图之后,走了很多次接口,后来发现添加一个off事件就可以解决了,具体如下: 原文地址:https://www.cnblogs.com/whdaichengxu/p/11978299.html

Echarts中axislabel文字过长导致显示不全或重叠

最近在使用Echarts的时候,遇到点问题就是xAxis文字过长导致x轴的文字显示不全. 解决方案如下: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> 2 <HEAD> 3 <TITLE>my_echarts</TITLE> 4 <META HTTP-EQUIV="Content-Type" CONTEN

echarts x轴名称太长

echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 1 function extension(mychart, type) { 2 let extension = document.getElementById("extension"); 3 mychart.on('mouseover', function (params) { 4 if (params.componentType == type) { 5 extension.innerHTML = params.v

label.lineBreakMode设置lable中文字过长时的显示格式,其中可以有末尾以省略号显示。

iOS4.0版本: label.lineBreakMode = NSLineBreakByCharWrapping;以字符为显示单位显示,后面部分省略不显示. label.lineBreakMode = NSLineBreakByClipping;剪切与文本宽度相同的内容长度,后半部分被删除. label.lineBreakMode = NSLineBreakByTruncatingHead;前面部分文字以……方式省略,显示尾部文字内容. label.lineBreakMode = NSLine

Echarts中线状图的X轴坐标标签倾斜样式

在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的 http://www.cnblogs.com/phpgcs 比如下面的例子中 X轴是常用的日期格式 20140508 这样子 而经过简单的配置,可以达到一个理想的效果,如下 其中相关的需要配置的option参数为: ? 1 2 3 4 formatDate:function(datestring){     if(datestring.length!=8

批量解决 word/wps 中公式和文字不对齐的问题

完美解决Word或wps中中公式和文字对不齐的问题 在 word 的各个版本中,当公式和字符同时出现时,尤其是发生公式的拷贝粘贴时,公式往往会出现上飘或下移的情况,这里给出一个简单易行的解决方案: 全选 ? 字体 ? 字符间距 ? 位置 ? 标准: 段落 ? 中文版式 ? 文本对齐方式 ? 居中: 再分享一下我老师大神的人工智能教程吧.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 原文地址:ht