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'
        }
      ],
目录
相关文章
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
332 0
|
JavaScript 前端开发
【曹操】echarts图例legend选中状态动态设置
曹操项目语音质量分析功能前端页面展示,需要对所有指标的图例默认选中状态只显示前两个,其他指标的图例状态默认为灰色。
4623 0
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
255 2
|
索引
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) ...
4165 0
|
7月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
625 0
echarts 图表解决X轴加滚动条之后文字过多不显示问题
echarts 图表解决X轴加滚动条之后文字过多不显示问题
200 0
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
227 1
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
119 0
|
数据可视化 JavaScript
echarts饼装图自定义图例和扇形区的文字
最近因为工作需要,需要开发一个大屏,后台给的数据是这个的,echarts是默认将数据data例的name属性作为图例和扇形图上展示文本,这里我需要自定义图例信息和内容,通过这篇文章,记录下如何修改这些内容,基于js和vue2,datav
348 2
|
定位技术
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
166 0