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

 更新时间:2020年07月20日 11:39:10   作者:赶路人儿  
这篇文章主要介绍了解决echarts中横坐标值显示不全(自动隐藏)问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

如下图,当横轴时间为13天时,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 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中横坐标值显示不全(自动隐藏)问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解Vue的watch中的immediate与watch是什么意思

    详解Vue的watch中的immediate与watch是什么意思

    这篇文章主要介绍了详解Vue的watch中的immediate与watch是什么意思,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 解决vue做详情页跳转的时候使用created方法 数据不会更新问题

    解决vue做详情页跳转的时候使用created方法 数据不会更新问题

    这篇文章主要介绍了解决vue做详情页跳转的时候使用created方法 数据不会更新问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue+vite创建项目关于vite.config.js文件的配置方法

    Vue+vite创建项目关于vite.config.js文件的配置方法

    Vue项目创建时,我们见过vue-cli 创建项目和webpack 创建项目等方式,这篇文章主要介绍了Vue+vite创建项目关于vite.config.js文件的配置方法,需要的朋友可以参考下
    2023-06-06
  • 关于Vue中img动态拼接src图片地址的问题

    关于Vue中img动态拼接src图片地址的问题

    这篇文章主要介绍了关于Vue中img动态拼接src图片地址的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue获取页面元素的相对位置的方法示例

    Vue获取页面元素的相对位置的方法示例

    这篇文章主要介绍了Vue获取页面元素的相对位置的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 将Vue组件库更换为按需加载的方法步骤

    将Vue组件库更换为按需加载的方法步骤

    这篇文章主要介绍了将Vue组件库更换为按需加载的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue项目中播放rtmp视频文件流的方法

    vue项目中播放rtmp视频文件流的方法

    这篇文章主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue3封装轮播图组件的方法

    vue3封装轮播图组件的方法

    这篇文章主要为大家详细介绍了vue3封装轮播图组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue调用谷歌授权登录获取用户通讯录的实现示例

    vue调用谷歌授权登录获取用户通讯录的实现示例

    本文主要介绍了vue调用谷歌授权登录获取用户通讯录的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 超详细图解如何运行vue项目

    超详细图解如何运行vue项目

    Vue是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,易于上手,也便于与其他库或已有项目整合,下面这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,需要的朋友可以参考下
    2023-05-05

最新评论