当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. HDU-6534-Chika and Friendly Pairs (莫队算法,树状数组,离散化)

    链接: https://vjudge.net/contest/308446#problem/C 题意: Chika gives you an integer sequence a1,a2,-,an a ...

  2. linux运维、架构之路-nfs网络文件系统

    一.nfs介绍  NFS是Network File System的缩写,是网络文件系统,它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录,主要存储用户上传的图片附件等信息. ...

  3. CSS3实现三角形和对话框

    这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形  总结: ...

  4. mysql DISTINCT语句 语法

    mysql DISTINCT语句 语法 作用:用于返回唯一不同的值. 语法:SELECT DISTINCT 列名称 FROM 表名称.扬州大理石量具 mysql DISTINCT语句 示例 //从表中 ...

  5. Oracle In子句

    Oracle In子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle IN运算符来确定值是否与列表或子查询中的任 ...

  6. Oracle-SQL程序优化案例二

    有时候写得不规范的SQL语句真的是占用很多时间 以下是我在工作中发现的规律,如果字段过多的使用函数,尽量不要将这些字段串联在一起做匹配或查询条件,比如红色注释部分,在执行红色部分的时候 这个SQL程序 ...

  7. Python发送邮件（常见四种邮件内容）

    Python发送邮件(常见四种邮件内容) 转载 2017年03月03日 17:17:04   转自:http://lizhenliang.blog.51cto.com/7876557/1875330 ...

  8. React Native商城项目实战12 - 首页头部内容

    1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, ...

  9. 爬虫 ---- BeautifulSoup的基础使用

    #BeautifulSoup的基础使用from bs4 import BeautifulSoup #导入bs4库 html = "<p class='stylecss'>< ...

  10. Apache2.4常用编译参数

    转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...