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'
        }
      ],
目录
相关文章
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
129 0
|
索引
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) ...
4145 0
|
6月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
570 0
echarts 图表解决X轴加滚动条之后文字过多不显示问题
echarts 图表解决X轴加滚动条之后文字过多不显示问题
160 0
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
109 0
|
数据可视化 JavaScript
echarts饼装图自定义图例和扇形区的文字
最近因为工作需要,需要开发一个大屏,后台给的数据是这个的,echarts是默认将数据data例的name属性作为图例和扇形图上展示文本,这里我需要自定义图例信息和内容,通过这篇文章,记录下如何修改这些内容,基于js和vue2,datav
304 2
|
定位技术
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
140 0
|
编解码 前端开发 PHP
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
160 0
|
前端开发 JavaScript
echarts tooltip设置正常却无法显示被遮挡设置层级堆叠顺序的问题解决方案
echarts tooltip设置正常却无法显示被遮挡设置层级堆叠顺序的问题解决方案
556 0
|
C#
C#-改变表格行颜色
C#改变表格行颜色
303 0