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

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


问题描述

今天是第一次修改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'
        }
      ],
目录
相关文章
|
Java Android开发
EventBus简单介绍
EventBus简单介绍
269 0
|
索引
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) ...
4507 0
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
780 5
|
Java Spring
NoClassDefFoundError: com/fasterxml/jackson/annotation/JsonMerge【已解决】
NoClassDefFoundError: com/fasterxml/jackson/annotation/JsonMerge【已解决】
300 0
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
JavaScript 前端开发 数据处理
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
【React/Vue2】 使用Element UI 高度封装Select 下拉框创建条目(Ant Design更为简单)
|
移动开发 前端开发 开发者
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
1157 0