当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. CSS3——制作正在加载页面loading...

    今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. 使用Hybris Commerce User API读取用户信息时，电话字段没有返回

    在使用Hybris Commerce User API读取一个user信息时,我遇到一个问题,在API返回的结构里没有包含期望看到的Phone字段. 仔细观察Swagger里对response结构的说 ...

  3. weighted choice in python

    对列表按概率采样 Input: a collection C of elements and a probability distribution p over C; Output: an eleme ...

  4. 面试题常考&必考之--js闭包特性和优缺点 （外加小例子）

    当内部函数被返回到外部并保存时,一定会产生闭包.闭包会产生原来的作用域链,不释放. 闭包,可以理解为,写一个函数,然后产生闭包的这种现象. 概念: 基础: 主要是:add    reduce  被返回 ...

  5. 交互输入与for语句

    交互输入与for语句 1.   交互输入 read命令可以同时定义多个变量值:输入的内容默认以空格为分隔符,将值输入到对应的变量中:read尽量避免交互 如果默认值过多,最后所有的值会被赋予给最有一个 ...

  6. css3 中的2D转换

    一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...

  7. Go实现分布式外部排序

    Go实现分布式外部排序 项目路径: https://github.com/Draymonders/go_external_sort 默认读入文件: small.in 默认输出文件:small.out ...

  8. 把图片画到画布上，适应PC和移动端

    画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...

  9. RabbitMQ幂等性概念（七）

    幂等性是什么? 我们可以借鉴数据库的乐观锁机制 比如我们执行一条更新库存的sql语句update user set count=count-1,version=version+1 where vers ...

  10. andriod工程项目总结

    1,胡萝卜农场项目 (1)图片缓存项目 (2)android开源框架的尝试 2,智能厨房项目 (1)将所有网络请求防止到一个service中的思路 (2)左右导航的实现 (3)fragment的使用 ...