当echarts柱状图个数多，横坐标名称过长时横坐标名称显示不全，网上并没有搜到太好的方法，于是自己加工了下，将横坐标名称显示前六位，当鼠标放到上面的时候显示全名，下面是示例代码，可以直接拷贝测试

代码解读：

HTML:

<div class="mychartBlock" style="width:33%;float:left;position:relative;border-right:5px solid #FAFAFA">

    <div class="pie1xWrap" style="width:100%;height:60px;margin:0 auto;position:absolute;bottom:-6px;"></div>

    <div class="pie1xLine" style="width:100%;height:10px;margin:0 auto;position:absolute;bottom:43px;z-index:10000;"></div>

    <div id="main" style="width:98%;min-height:300px;margin:0px auto 0;z-index:1000;"></div>

</div>

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>

</head>

<body>

<div class="mychartBlock" style="width:33%;float:left;position:relative;border-right:5px solid #FAFAFA">

    <div class="pie1xWrap" style="width:100%;height:60px;margin:0 auto;position:absolute;bottom:-6px;"></div>

    <div class="pie1xLine" style="width:100%;height:10px;margin:0 auto;position:absolute;bottom:43px;z-index:10000;"></div>

    <div id="main" style="width:98%;min-height:300px;margin:0px auto 0;z-index:1000;"></div>

</div>

<div class="tip" style="display:none;height:30px;line-height:30px;padding:0 5px;position:absolute;background:rgba(0,0,0,0.6);border-radius:3px;color:#fff;z-index:10000;"></div>

<script>

    var indexdata=[];

    var dataAll=['HTML5与CSS3权威指南', 'JavaScript高级程序设计', 'JavaScript DOM编程艺术', '超实用的jQuery代码段', '锋利的jQuery', '深入理解Bootstrap', 'AngularJS权威教程'];

    var myChart=echarts.init(document.getElementById('main'));

    var option = {

        title: {

            text: '前端书籍使用人数',

            subtext:'',

            x:'center'

        },

        tooltip: {

            trigger: 'axis',

            axisPointer:{

                clickable:true,

                type : 'line',        // 默认为直线，可选为：'line' | 'shadow'

                lineStyle:{

                    color:'rgba(0,0,0,0)',

                }

            },

            formatter: function (params) {

                var res="";

                for (var i = 0, l = params.length; i < l; i++) {

                    var index1=params[i].dataIndex;

                    res =dataAll[index1]+"<br>"+ (option.title.text).replace("(%)","")+' : ' + params[i].value+"%";

                }

                return res;

            }

        },

        legend: {

            data: []

        },

         grid: {

            left: '23',

            right: '40',

            bottom: '28',

            top: '65',

            containLabel: true

        },

        yAxis: {

            name:"数量",

            nameGap:"8",

            type: 'value',

            min:0,

        },

        xAxis: {

            type: 'category',

            name: '书名',

            nameGap:8,

            triggerEvent:true,

            axisLabel:{

                clickable:true,

                interval:0,

                rotate:30

            },

            data : [],

            splitLine: {

                show: true,

            }

        },

        series: [

            {

                type: 'bar',

                name: '',

                data:[10, 52, 200, 334, 390, 330, 220],

                barMinHeight: 15,

                barWidth:'30%',

                barMaxWidth:25,

                label:{

                    normal:{

                        show:true,

                        position:'top',

                        textStyle: {

                             color: '#000',

                        }

                    }

                }

            },

        ]

    };

    indexdata=[];

    for(var i=0;i<dataAll.length;i++){

        var obj=[];

        obj.push(i);

        obj.push(dataAll[i]);

        indexdata.push(obj);

        obj=[];

        option.xAxis.data[i]=dataAll[i].substring(0,6);

    }

    myChart.setOption(option);

    myChart.on("mousemove",function(params){

        if(params.componentType=="xAxis" && params.targetType=="axisLabel"){

            for(var i=0;i<indexdata.length;i++){

                var xAxisIndex=params.event.target.anid.split("_")[1];

                if(indexdata[i][0]==xAxisIndex){

                    Manufactermove=indexdata[i][1];

                    jQuery(".tip").html(indexdata[i][1]);

                }

            }

            var obj=getMousePos(event);

            jQuery(".tip").show();

            jQuery(".tip").css("top",obj.y-40);

            jQuery(".tip").css("left",obj.x+5);

            jQuery(".tip").mouseover(function(){

                var obj=getMousePos(event);

                jQuery(".tip").css("display","");

                jQuery(".tip").css("top",obj.y-60);

                jQuery(".tip").css("left",obj.x+5);

            })

        }else{

            jQuery(".tip").css("display","none");

        }

    });

//获取鼠标位置

function getMousePos(event) {

    var e = event || window.event;

    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;

    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

    var x = e.pageX || e.clientX + scrollX;

    var y = e.pageY || e.clientY + scrollY;

    //alert('x: ' + x + '\ny: ' + y);

    return { 'x': x, 'y': y };

}

jQuery(".pie1xWrap").unbind("mouseout");

    jQuery(".pie1xWrap").mouseout(function(){

        jQuery(".tip").css("display","none");

    });

    jQuery(".pie1xLine").unbind("mouseout");

    jQuery(".pie1xLine").mouseout(function(){

        jQuery(".tip").css("display","none");

    });

</script>

</body>

</html>

echarts柱状图个数多，横坐标名称过长显示不全解决方法的更多相关文章

  1. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  2. Springmvc+Hibernate在Eclipse启动Tomcat需要很长时间的解决方法

    最近在学习SpringMvc开发,有一个提问困扰了很久,就是在Eclipse启动Tomcat需要很长时间,大概要1分多钟. 启动日志: 九月 08, 2016 8:59:01 下午 org.apach ...

  3. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  4. css实现文字过长显示省略号的方法

    <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...

  5. Updating Homebrew... 长时间不动解决方法

    确保你已安装Homebrew 依次输入下面的命令(注意:不要管重置部分的命令,这里原作者贴出来.我也贴出来是以防需要重置的时候有参考操作命令) 替换brew.git: cd "$(brew ...

  6. java.sql.SQLException: [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称而且未指定默认驱动程序解决方法

    开发程序须要登录功能 .就不想用大数据库.直接用java连接access.     在自己机器上一切正常,  url直连 和配置数据源都没有问题.  公布到windows server2008 上 , ...

  7. group_concat用法以及字符串太长显示不全

    由于group_concat默认的长度是1024,所以要将最大长度修改 首先执行 SET SESSION group_concat_max_len = 10240;#一次查询有效 然后再进行拼接 se ...

  8. Echarts 曲线数少于图例数解决方法

    在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...

  9. MATLAB 画柱状图（/直方图）修改横坐标名称并使其横着显示

    使用MATLAB 画柱状图 ,即bar (x,y),其横坐标是默认 1.2.3.4.……的 % --v1 y1=[asum1,asum2,asum3,asum4,asum5,asum6,asum7,a ...

随机推荐

  1. kali安装docker以及配置阿里云镜像加速

    1.需求 最近需要用到docker比较多,遂安装使用下,第一次用docker搭建测试环境,不得不说,docker真香.期间遇到了比较多奇奇怪怪的问题,网上的教程也比较多比较乱,遂记录一下. 2.安装d ...

  2. 【leetcode】1175. Prime Arrangements

    题目如下: Return the number of permutations of 1 to n so that prime numbers are at prime indices (1-inde ...

  3. 7，HashMap

    一,HashMap简介 1,HashMap 是一个散列表,它存储的内容是键值对(key-value)映射. 2,HashMap 继承于AbstractMap,实现了Map.Cloneable.java ...

  4. 超好用json转excel工具

    给大家安利一个超实用的json数据转excel工具:http://www.yzcopen.com/doc/jsonexcel

  5. input 禁止删除部分文字

    用label和所需的input链接,label部分就是禁止删除的部分.<input type="text" name="city" value=" ...

  6. django-rest-swagger 使用【转】

    转自:https://www.cnblogs.com/delav/p/10242017.html Swagger是一个API开发者的工具框架,用于生成.描述.调用和可视化RESTful风格的Web服务 ...

  7. 如何快速优雅的解决：ORA-02290: 违反检查约束条件 异常问题

    在向oracle保存数据时,控制台报错如下: 很明显是保存时,该表的设计不允许某个字段非空导致的,但由于该表的数量较多,采用断点的方式有太过麻烦, 这里笔者采用 oracle 的客户端连接工具orac ...

  8. 微信小程序image组件

    image组件:是小程序专门针对图片的组件,功能强大 image组件的属性: src:类型 字符串 图片资源的路径 mode:类型 字符串 图片裁剪缩放模式 lazy-load:类型 布尔 图片的懒加 ...

  9. Ubuntu 系统搭建LNMP环境

    当前Linux版本:Ubuntu16.04 一.安装Nginx 在终端中输入命令 " sudo apt-get install nginx ",在确认安装完成后,在浏览器中访问 l ...

  10. GMM demo

    # GMM model # // library(mvtnorm) ) n1 = n2 = mu1 = c(,) mu2 = c(-,-) sigma1 = matrix(c(,.,.,),nrow= ...