解决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中横坐标值显示不全(自动隐藏)问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决echarts图表使用v-show控制图表显示不全的问题

    最近做echarts图表时,因为涉及到使用开关变量控制不同图表的显示隐藏,用 v-if 时会出现没有获取到dom结构而报错,所以改用 v-show,但是 v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况,就像下图: 还折腾了半天,其实就是当数据请求出来后,调用绘制ehcarts时图表的时候,用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表,使之强制

  • 基于VUE的v-charts的曲线显示功能

    1. 应用背景 在做一个某路灯管理处的物联网项目时,需要统计8个电表的电能曲线(时间-电能),需求就是能生成日报(24个点,间隔1小时,实时),月报(30个点,间隔1天,取每天的凌晨1点数据),年报(每个月,1号凌晨1点数据开始间隔9天,每个月取3个点,总共36个点). 2. 分析数据生产者生成 首先采集服务每隔一段时间会去采集电表的电能数据,模拟历史表会利用存储过程将实时数据写入his_aic表里. 3. 取出数据消费者 30天 aic数据4万条记录左右 日报,月报可以直接在历史数据表中取 日

  • 解决Echarts2竖直datazoom滑动后显示数据不全的问题

    垂直datazoom拖动后第一个和最后一个往往显示不出来,这可能是echart2的bug. 解决方法: 把dataZoom中的handleSize设置小一些可以了.默认值8,可设为4 补充知识:echarts踩坑,dataZoom和X坐标系文字重叠解决方法 找到echarts中的 grid 配置 : 代码写入bottom属性: grid:{ bottom: "70px" } 完成效果: 以上这篇解决Echarts2竖直datazoom滑动后显示数据不全的问题就是小编分享给大家的全部内容

  • 解决Echarts 显示隐藏后宽度高度变小的问题

    Echarts 是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状图出现了问题,它变得特别小,根本不能用,然后,就此,我找了下原因 原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小. 解决:将初始化放在click事件里,给一个flag 控制显示

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

    echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴时间为13天时,echarts会自动隔天显示 如果我们想显示全,则需要在xAxis 属性加上axisLabel:{interval: 0} "xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16"

  • 解决echarts 一条柱状图显示两个值,类似进度条的问题

    我就废话不多说说了,大家还是直接看代码吧~ var allUseDayChartTwo; function allUseDayChartTwoFun(obj,xdata,ydata,zdata){ allUseDayChartTwo = echarts.init(obj); var category = xdata; var lineData = zdata; var barData = ydata; option = { // backgroundColor:'#F00', tooltip:

  • javascript实时获取鼠标坐标值并显示的方法

    本文实例讲述了javascript实时获取鼠标坐标值并显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • Android中ScrollView嵌套GridView显示不全解决方法

    Android中ScrollView嵌套GridView显示不全解决方法

    Android中ScrollView嵌套GridView显示不全解决方法 由于ScrollView和GridView这两款控件都自带滚动条,一起使用GridView会显示不全 解决方法:自定义gridview 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 解决layUI的页面显示不全的问题

    在做项目时页面显示不全 可以在layui的css中直接改属性 layui-tab-item 找到这个属性,直接修改高度,如果是谷歌浏览器的话记得清缓存. 还有就是在嵌入时修改属性 <iframe scrolling="no" frameborder="0" src=" " width="99%" height="99%"></iframe> 将scrolling的属性改为yes 这样

  • 解决pycharm最左侧Tool Buttons显示不全的问题

    问题描述如下: 解决方案如下: 下图中字体调整为18及以上 效果如下: 以上这篇解决pycharm最左侧Tool Buttons显示不全的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决jupyter notebook显示不全出现框框或者乱码问题

    在开头加入以下设置即可解决 %matplotlib inline plt.rcParams['figure.figsize'] = (12.0, 8.0) # 调整大小,可根据自实际情况进行设置 plt.rcParams['image.interpolation'] = 'nearest' plt.rcParams['image.cmap'] = 'gray' plt.rcParams['font.sans-serif']=['SimHei'] # 下面这两个是设置乱码的 plt.rcParam

  • 解决Python spyder显示不全df列和行的问题

    python中有的df列比较长head的时候会出现省略号,现在数据分析常用的就是基于anaconda的notebook和sypder,在spyder下head的时候就会比较明显的遇到显示不全.这时候我们就需要用到pandas下的一个函数set_option 我们直接来看代码: 这是正常情况spyder下head()的样子 import numpy as np import pandas as pd df=pd.DataFrame(np.random.rand(2,10)) #创建一个2行10列的

随机推荐