解决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 相关文章推荐
Javascript 事件流和事件绑定
Jul 16 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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
PHP 的几个配置文件函数
2006/12/21 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python实现去除代码前行号的方法
2015/03/10 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python 日志增量抓取实现方法
2018/04/28 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python hashlib模块的使用示例
2020/10/09 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
PHP面试题-$message和$$message的区别
2015/12/08 面试题
空字符串(“”)和null的区别
2012/11/13 面试题
远程教育心得体会
2014/01/03 职场文书
小区推广策划方案
2014/06/06 职场文书
啦啦队口号大全
2014/06/16 职场文书
个人年终总结怎么写
2015/03/09 职场文书
七年级作文之雪景
2019/11/18 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏