当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. cookie、session和中间件

    目录 cookie和session cookie与session原理 cookie Google浏览器查看cookie Django操作cookie 获取cookie 设置cookie 删除cooki ...

  2. React Native 之TouchableOpacity组件

    使用TouchableOpacity组件 实现单击事件只需要声明onPress属性即可,其他同理,实现onPressIn,onPressOut,onLongPress constructor(prop ...

  3. ASP.net 能写一个上传整个文件夹的东东

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  4. [USACO10HOL]牛的政治Cow Politics

    农夫约翰的奶牛住在N ( <= N <= ,)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向道路,用各种各样的方法连接这些草地.而且从每片草地出发都可以抵达其他所有草地.也就是 ...

  5. 常用的JAVA第三方工具类

    转自:https://www.jianshu.com/u/9c5cb1ee4c46 一. org.apache.commons.io.IOUtils 注解 说明 closeQuietly 关闭一个IO ...

  6. 「JOISC 2016 Day 3」回转寿司

    https://loj.ac/problem/2736 题解 挺有意思的题. 考虑这种操作不好直接维护,还有时限比较长,所以考虑分块. 考虑一个操作对整个块的影响,无非就是可能把最大的拿走,再把新的元 ...

  7. AC自动机再加强版

    AC自动机 拓扑排序优化,注意拓扑排序前要把所有入度为零的点都加进去 #include<bits/stdc++.h> using namespace std; #define maxn 1 ...

  8. 通过java反射机制，修改年龄字段的值

    需求:将生日转为年龄 /** * 获取年龄值 */ public List getAgeInfo(List list) throws Exception { if (null == list || l ...

  9. 170929-关于md5加密

    在各种应用系统中,如果需要设置账户,那么就会涉及到储存用户账户信息的问题,为了保证所储存账户信息的安全,通常会采用MD5加密的方式来,进行储存.首先,简单得介绍一下,什么是MD5加密. MD5的全称是 ...

  10. [CSP-S模拟测试]:毛二琛（DP）

    题目描述 $MYC$在$NOI2018$中,遇到了$day1T2$这样一个题,题目是让你求有多少“好”的排列.$MYC$此题没有获得高分,感到非常惭愧,于是回去专心研究排列了.如今数排列的题对$MYC ...