当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. div中放入一个img元素导致div高度会多出几个像素

    在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px.好了,废话不多说,直接给大家上代码. html代码: ...

  2. bullet学习日记

    最近需要bullet用物理引擎做一个测量类的项目,因为半途接手,物理部分其实已经实现,但犹于对bullet基本不了解,导致相关部分完全改不动,这两天静下心来把物理引擎用法了解了一翻,顺便做点笔记,以便 ...

  3. layui jquery ajax,url,type,async,dataType,data

    $.ajax({ url: '/foensys/user/userDelete/'+data[0].id, type:"get", async:true, dataType:&qu ...

  4. 三、angular7登录请求和路由带参传递

    在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from '@angular/common/http'; impo ...

  5. Spring Cloud架构教程 （四）服务网关（路由配置）

    传统路由配置 所谓的传统路由配置方式就是在不依赖于服务发现机制的情况下,通过在配置文件中具体指定每个路由表达式与服务实例的映射关系来实现API网关对外部请求的路由. 没有Eureka和Consul的服 ...

  6. nginx做反向代理时出现302错误（转载）

    现象:nginx在使用非80端口做反向代理时,浏览器访问发现返回302错误 详细现象如下: 浏览器请求登录页: 输入账号密码点击登录: 很明显登录后跳转的地址少了端口号. 原因:proxy.conf文 ...

  7. 大数据笔记（十七）——Pig的安装及环境配置、数据模型

    一.Pig简介和Pig的安装配置 1.最早是由Yahoo开发,后来给了Apache 2.支持语言:PigLatin 类似SQL 3.翻译器 PigLatin ---> MapReduce(Spa ...

  8. 关于 Visual stdio 编译报错：error MSB6006: “CL.exe”已退出

    网上查看,原因有多种. 1,我自己遇到的是这样的: 环境:VS2019,编译项目 image-master,中间自己重整了原来的目录,移动了很多文件.编译报错:error MSB6006: “CL.e ...

  9. MySQL删除外键约束问题

    当我们在一个表中添加字段约束的时候: ALTER TABLE product ADD CONSTRAINT product_fk FOREIGN KEY(category_id) REFERENCES ...

  10. ctrl+r 调用bash曾经的历史命令

    在bash界面 按ctrl+r 可以调出, bash中曾经的历史命令, 光标会停留在 第一次被匹配的字符上, (即使后面你再输入被匹配的字符, 光标也不移动) 然后, 根据你的需要 来进行任何一次的操 ...