关于echarts x轴为年月日 超出线的左端、数据量少时的x轴展示不居中、y轴垂直方向展示不居中 解决方案

原因是因为UI的原型图去掉了y轴的显示轴线 ,提出下列问题
如图一所示 2019超出了一点点在这里插入图片描述
在这里插入图片描述
解决方案

 xAxis: [
        type: 'category',
        min:function(value){
            return value.min -7
        },
    ],

改完之后发现数据量少时 会出现如下图的问题
在这里插入图片描述
解决代码:

xAxis: [
        type: 'category',
        min:function(value){
        if(value.max>130){ 
        return value.min -7
        } else if (value.max<130){
            "dataMin"
		  }
        },
    ],

x轴的问题解决后 还出现了一个y轴数据展示 有点“顶天立地”
如下图所示
在这里插入图片描述


yAxis: [
        type: 'value',
        min:(value)=>{
        return (value.min -0.2)
        },
        max:(value)=>{
        if(value.max>130){
         'dataMin'
        } else if (value.max<130){
		return (value.max+0.2)
          }
        },
    ],

问题解决
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,可以使用 ECharts 提供的 dataZoom 组件。dataZoom 组件用于区域缩放和拖动。在 ECharts 中,dataZoom 分为两种类型,一种是基于 x 的 dataZoom,另一种是基于 y 的 dataZoom。 下面是一个基于 x 的 dataZoom 的示例代码: ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }], dataZoom: [{ type: 'slider', // 滑动条型 dataZoom 组件 start: 0, // 起始位置 end: 100, // 结束位置 xAxisIndex: [0], // 需要控制的 x 的索引 filterMode: 'filter' // 过滤模式,数据范围外的数据将被过滤掉 }] }; ``` 在这个示例代码中,我们使用了 `dataZoom` 配置项来配置基于 x 的 dataZoom 组件。其中,`type` 属性设置为 `slider`,表示使用滑动条型的 dataZoom 组件。`start` 和 `end` 属性分别设置了 dataZoom 的起始位置和结束位置,范围是 0 到 100,表示可视化区域的百分比。`xAxisIndex` 属性指定了需要控制的 x 的索引,这里我们只有一个 x ,所以设置为 `[0]` 即可。`filterMode` 属性设置为 `filter`,表示数据范围外的数据将被过滤掉,而不是显示在图表的两侧。 当图表的 x 数据超出可视化区域,就在 x 底部出现一个滑动条,可以通过拖动滑动条来控制可视化区域的范围。这样就可以实现 x 超出可左右滑动的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值