解决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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
解决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
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php英文单词统计器
2016/06/23 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python迭代器的使用方法实例
2013/11/21 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python学习入门细节知识点
2018/03/29 Python
图解Python变量与赋值
2018/04/03 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python找出完数的方法
2018/11/12 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
详解Python中第三方库Faker
2020/09/25 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
公司清洁工岗位职责
2015/04/15 职场文书
2015年班组建设工作总结
2015/05/13 职场文书