解决echarts中横坐标值显示不全(自动隐藏)问题


Posted in Javascript onJuly 20, 2020

echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整。

如下图,当横轴时间为13天时,echarts会自动隔天显示

解决echarts中横坐标值显示不全(自动隐藏)问题

如果我们想显示全,则需要在xAxis 属性加上axisLabel:{interval: 0}

"xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16","2015-5-17","2015-5-18","2015-5-19","2015-5-20","2015-5-21","2015-5-22","2015-5-23","2015-5-24","2015-5-25"],
 "type":"category",
 "axisLabel":{
 interval: 0
 }
}],

效果如下:

解决echarts中横坐标值显示不全(自动隐藏)问题

查看echarts官网的文档,可以得知:

解决echarts中横坐标值显示不全(自动隐藏)问题

补充知识:Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部

使用echarts图表做页面展示的时候,当X轴内容过长时,之前一直用的 '\n' 换行(将字符串根据需要分成两行来展示),这样有很大的局限性(如内容过长的话 分成两行也放不下,而且也会影响美观),后来发现可以通过设置自动隐藏,鼠标移动上去显示全部名称的方法 来做,效果会更好。

1. 首先在 x轴上添加 triggerEvent: true。如下红色部分:

xAxis: {
data: result.nameList,
silent: false,
triggerEvent: true,
axisLine: {
onZero: true,
show: true,
lineStyle: {
color: '#90979c' // x 轴线最下面的横坐标线的颜色
}
},
splitLine: {show: false},
splitArea: {show: false},
axisLabel: {
interval: 0,//设置横坐标为斜
rotate: 30,//文字倾斜角度
formatter: function (value) {
if (value.length > 10) {
value = value.substring(0, 9) + "..";
}
return value;
},
textStyle: {
color: '#666',
fontSize: '12'
}
},
},

2. 自定义x轴上显示的内容长度。如上面代码段中的蓝色部分。

3. 自定义一个 鼠标悬浮事件方法,并调用。

function extensionOne(myChart) {
 var id = document.getElementById("extensionOne");
 //判断是否创建过div框,如果没有创建过,则创建。(创建时,默认隐藏)
 if (!id) {
  var div = "<div id = 'extensionOne' sytle=\"display:none\"></div>";
  $('html').append(div);
 }

 var arrow_left = '20px';
 //鼠标悬浮事件
 myChart.on('mouseover', function (params) {
  if (params.componentType != "xAxis") {
   return;
  }

  //设置div框样式,并为其填充值。
  $('#extensionOne').css({
   "position": "absolute",
   "color": "#90979c",
   // "border": "solid 0px white",
   "font-family": "Arial",
   "font-size": "14px",
   "padding": "5px",
   "display": "inline"
  }).text(params.value);
  var xx_text = params.event.offsetX - 35;
  arrow_left = xx_text;

  $("#talentDemandDistribution").mousemove(function (event) {
   // console.log("X轴坐标:" + event.pageX + " Y轴坐标:" + event.pageY);
   var xx = event.pageX - 30;
   var yy = event.pageY + 10;
   $('#extensionOne').css('top', yy).css('left', xx);
  });
 });

 myChart.on('mouseout', function (params) {
  $('#extensionOne').css('display', 'none');
 });
}
{
 ...
 ...
 var chart = echarts.init(document.getElementById('talentDemandDistribution'));
 chart.setOption(option);

 //在echarts 初始化完成后,调用自定义的鼠标悬浮事件方法
 extensionOne(chart);
}

到此结束!

以上这篇解决echarts中横坐标值显示不全(自动隐藏)问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 #Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 #Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 #Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 #Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 #Javascript
jquery实现简单拖拽效果
Jul 20 #jQuery
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 #Javascript
You might like
Track Image Loading效果代码分析
2007/08/13 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python使用OpenCV进行标定
2018/05/08 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
服务之星获奖感言
2014/01/21 职场文书
党支部公开承诺书
2014/03/28 职场文书
买卖合同协议书范本
2014/10/18 职场文书
亲属关系公证书样本
2015/01/23 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python