echart-X轴标签文字方向

1. rotate斜体:

axisLabel:{interval:0,rotate:45,
margin:2,
textStyle:{
            color:"#222"
     }2.
formatter:function(val){
    return val.split("").join("\n");
}3.
/**
 * <li>Echarts 中axisLabel中值太长自动换行处理;经测试:360、IE7-IE11、google、火狐  * 均能正常换行显示</li>
 * <li>处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示</li>
 * @param title             将要换行处理x轴值
 * @param data
 * @param fontSize          x轴数据字体大小,根据图片字体大小设置而定,此处内部默认为12
 * @param barContainerWidth         柱状图初始化所在的外层容器的宽度
 * @param xWidth            柱状图x轴左边的空白间隙 x 的值,详见echarts文档中grid属性,默认80
 * @param x2Width           柱状图x轴邮编的空白间隙 x2 的值,详见echarts文档中grid属性,默认80
 * @param insertContent     每次截取后要拼接插入的内容, 不传则默认为换行符:\n
 * @returns titleStr        截取拼接指定内容后的完整字符串
 * @author lixin
 */
function getEchartBarXAxisTitle(title, datas, fontSize, barContainerWidth, xWidth, x2Width, insertContent){

    if(!title || title.length == 0) {
        alert("截取拼接的参数值不能为空!");return false;
    }
    if(!datas || datas.length == 0) {
        alert("用于计算柱状图柱子个数的参数datas不合法!"); return false;
    }
    if(isNaN(barContainerWidth)) {
        alert("柱状图初始化所在的容器的宽度不是一个数字");return false;
    }
    if(!fontSize){
        fontSize = 12;
    }
    if(isNaN(xWidth)) {
        xWidth = 80;//默认与echarts的默认值一致
    }
    if(isNaN(x2Width)) {
        xWidth = 80;//默认与echarts的默认值一致
    }
    if(!insertContent) {
        insertContent = "\n";
    }

    var xAxisWidth =  parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width));//柱状图x轴宽度=统计页面宽度-柱状图x轴的空白间隙(x + x2)
    var barCount = datas.length;                                //x轴单元格的个数(即为获取x轴的数据的条数)
    var preBarWidth = Math.floor(xAxisWidth / barCount);        //统计x轴每个单元格的间隔
    var preBarFontCount = Math.floor(preBarWidth / fontSize) ;  //柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子 x 轴间隔宽度 / 每个字的宽度(12px)
    if(preBarFontCount > 3) {    //为了x轴标题显示美观,每个标题显示留两个字的间隙,如:原本一个格能一样显示5个字,处理后一行就只显示3个字
        preBarFontCount -= 2;
    } else if(preBarFontCount <= 3 && preBarFontCount >= 2) {//若每个间隔距离刚好能放两个或者字符时,则让其只放一个字符
        preBarFontCount -= 1;
    }

    var newTitle = "";      //拼接每次截取的内容,直到最后为完整的值
    var titleSuf = "";      //用于存放每次截取后剩下的部分
    var rowCount = Math.ceil(title.length / preBarFontCount);   //标题显示需要换行的次数
    if(rowCount > 1) {       //标题字数大于柱状图每个柱子x轴间隔所能容纳的字数,则将标题换行
        for(var j = 1; j <= rowCount; j++) {
            if(j == 1) {

                newTitle += title.substring(0, preBarFontCount) + insertContent;
                titleSuf = title.substring(preBarFontCount);    //存放将截取后剩下的部分,便于下次循环从这剩下的部分中又从头截取固定长度
            } else {

                var startIndex = 0;
                var endIndex = preBarFontCount;
                if(titleSuf.length > preBarFontCount) {  //检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数

                    newTitle += titleSuf.substring(startIndex, endIndex) + insertContent;
                    titleSuf = titleSuf.substring(endIndex);    //更新截取后剩下的部分,便于下次继续从这剩下的部分中截取固定长度
                } else if(titleSuf.length > 0){
                    newTitle += titleSuf.substring(startIndex);
                }
            }
        }
    } else {
        newTitle = title;
    }
    return newTitle;
}

/**
 * 滚动瀑布加载函数
 * @param opts{selector: "#id"(需要滚动瀑布加载的元素选择器), fn: getUserInfo(瀑布加载时的回调函数方法名), fnParams: param(参数)}
 */
function scrollLoad(opts){

    var options = {
        selector: null,
        fn: null,
        fnParams: null
    };

    options =$.extend(true, options, opts);

    var selector = options.selector;
    var callbackFn = options.fn;
    var fnParams = options.fnParams;

    if(selector == null || selector == "" || selector == "undefined") {
        console.info("瀑布加载元素选择器不能为空!");return false;
    }
    if(callbackFn == null || callbackFn == "" || callbackFn == "undefined") {
        console.info("瀑布加载回调函数不能为空!");return false;
    }

    var loadCompleted = true;   //当前元素是否已经加载完成,true:未完成,false:完成
    $(top.window).scroll(function(){

        var winheight = $(top.window).height();
        var scheight = $(top.window).scrollTop();

        if ($(selector).offset().top <= (winheight + scheight) && loadCompleted) {
//          console.info($(selector).offset().top+"===winH="+(winheight + scheight)+"====t="+new Date().getTime());

            loadCompleted = false;
            if(typeof(callbackFn) == "function") {
//              console.info("load " + callbackFn.name + "!!!");//~

                if(fnParams) {
                    callbackFn(fnParams);
                } else {
                    callbackFn();
                }
            } else if(callbackFn instanceof Array) {    //若回调函数指定了多个方法
                for(var i = 0; i< callbackFn.length; i++) {
//                  console.info("load " + callbackFn[i].name + "!!!");//~

                    if(fnParams) {
                        callbackFn[i](fnParams);
                    } else {
                        callbackFn[i]();
                    }
                }
            }
        }
    });
}
 
时间: 2024-10-28 23:04:44

echart-X轴标签文字方向的相关文章

echart的label标签文字过长显示不全怎么办?

echart的官方只提供label标签文字过长是斜着显示的方式,并且文字显示不全重叠等现象.那么只能自己的方式来实现. option = { title : { text: '世界人口总量', subtext: '数据来自网络' }, tooltip : { trigger: 'axis' }, legend: { data:['2011年', '2012年'] }, toolbox: { show : true, feature : { mark : {show: true}, dataVie

学习5 地址/文字方向/斜体字 标签

<!doctype html> <html> <body style="background-color:#55EBED"> <p>一个<dfn title="This Is A Apple">TIAA</dfn>是比较前沿的东西,成立于1994.</p> <hr/> <p><cite>生活就像海洋,只有意志坚强的人,才能到达彼岸.</cit

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示: 后来查资料,发现这个标签的文字是可以自定义的,定义方式如下: 1 formatter: function(text){ 2 var strlength = text.length; 3 if(strlength % 2 == 1){ 4 text = text.replace(/\S

解决QPainter::drawText修改文字方向

今天在绘制双坐标曲线的时候需要修改y轴文字提示 QPainter的drawText()函数提供了绘制文本的功能. 它有几种重载形式,我们使用了其中的一种,即制定文本的坐标然后绘制 正常我们的文字书写方向是水平方向,现在需要调整为竖直方向. 百度了下没找到自己想要的结果,不得不吐槽百度搜索准确度 后来看了看帮助,可以进行文字旋转再绘制, 尝试了下实现了功能,这里记录下 源码 void pie::paintEvent(QPaintEvent *e) { QPainter painter(this);

android中自定义view---实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色

android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如android的自带的TextView强大,只是继承于view,而不是textview. 主要用途:电话本的侧边快速导航等 效果图:(自定义字符串 “#ABCDEFGHIJKLMN),可以实现自定义任意字符串 view的实现: 1 import cn.carbs.verticalstraighttextview

UILabel标签文字过长时的显示方式

lineBreakMode:设置标签文字过长时的显示方式. label.lineBreakMode = NSLineBreakByCharWrapping;    //以字符为显示单位显示,后面部分省略不显示. label.lineBreakMode = NSLineBreakByClipping;        //剪切与文本宽度相同的内容长度,后半部分被删除. label.lineBreakMode = NSLineBreakByTruncatingHead;  //前面部分文字以……方式省

excel 作图中次横坐标及次纵坐标的调试,以及excel自定义轴标签的步骤方法

在工作中除了要做一些常用的图表之外,不时还会有一切奇怪图表的制作需求. 今天的内容主要记录的是如何对excle图表的次横坐标及次纵坐标进行调试,以及如何自定义调整轴标签 首先看下如何做次纵坐标,工作中总有两个相关数据但是单位不一致或数量级不一致的状况,这时候要将两组数据整合到一起就要用到次级纵坐标了. 下图为一组购买数据,要将购买人数及购买金额放在一个表格内 首先选中作图数据,然后插入数据图表 选择插入组合图 然后右键图表,选择更改数据图表类型 然后勾选一个数据为次坐标 更改后的数据表 还有一种

写的一个段落标签文字内容两端对齐的代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

3-html 缩写-地址-文字方向-引用块-题注的格式

HTML Quotation and Citation Elements Tag Description <abbr> Defines an abbreviation or acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a section