echars 设置文字倾斜图表根据鼠标滑轮自动改变x轴数据

最新推荐文章于 2024-08-16 23:32:06 发布

夏小花花

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量201

点赞数

分类专栏： javascript Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaohua616/article/details/130596313

版权

javascript 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

Vue

27 篇文章 0 订阅

订阅专栏

文章介绍了如何使用Echarts修改图表，使其文字倾斜并添加类似滚动条的功能，通过调整xAxis的axisLabel旋转角度实现文字倾斜，利用dataZoom组件创建动态x轴数据，展示了一个包含slider类型的dataZoom实例来实现图表底部的滚动效果。

摘要由CSDN通过智能技术生成

问题描述

今天是第一次修改Echars图表，当时第一眼一看，咋那么复杂呢，我的需求是将图标中的文字改为倾斜|列表可以根据鼠标滑轮动态改变x轴数据，其实说白了就是在图表底部加个滚动条，下面来看下代码，如何解决的吧！

解决方案

问题1：在你的xAxis标签下，添加如下代码axisLabel，根据rotate调整倾斜的角度

xAxis:[
        {
        	axisLabel: {
              interval:0,
              rotate:30
            }
      	}
      ]

问题2：在xAxis同级下添加如下代码，实现根据鼠标滑轮自动改变x轴数据

dataZoom:[
       {
          type: 'slider',
          show: false,//隐藏图表底部滚动条 设置为true是图表底部就会有滚动条
          height: 5,
          bottom: 0,
          start: 50,
          end: 100,
          textStyle: {
            // color: '#d4ffff',
            fontSize: 0,
          },
        },
        {
          type: 'inside'
        }
      ],