echarts 柱状图 X(Y)轴数据过多时,滑动以及内置缩放的问题
前言:在开发中碰到的情况(菜鸟出门)。
在使用echarts 图表的时候发现要展示的数据过多,但是系统留的展示框太小,造成数据都挤压在一块(不好看而且新感觉很不专业)。
在网上找了下发现写的都很乱,就自己整理下。
-------------------------------------------------------------------------------------------------------------------
注: 自己调试的时候发现两种使用的情况,可以根据做自己的需求来
一 . 在数据不是太多,并且要全部展示的情况下
上图:

代码:
yAxis: {
type: 'category',
data: ['张小勇1','李思思2','张明明3'],
axisLabel:{
//数据全部展示
interval:0,
//45度角倾斜
rotate:45,
},
},
这种情况就是改变要展示数据的倾斜角度(在Y不明细,在X上很适用),如果要展示全部数据的话很好用
二 . 在数据过多,要加滑动的情况
上图:

代码:Y滑动框
// Y滑动框
dataZoom: [
//Y轴滑动条
{
type: 'slider', //滑动条
show: true, //开启
yAxisIndex: [0],
left: '93%', //滑动条位置
start: 1, //初始化时,滑动条宽度开始标度
end: 50 //初始化时,滑动条宽度结束标度
},
//y轴内置滑动
{
type: 'inside', //内置滑动,随鼠标滚轮展示
yAxisIndex: [0],
start: 1,//初始化时,滑动条宽度开始标度
end: 50 //初始化时,滑动条宽度结束标度
} ],
代码:X滑动框
// X滑动框
dataZoom: [
//X轴滑动条
{
type: 'slider', //滑动条
show: true, //开启
xAxisIndex: [0],
left: '93%', //滑动条位置
start: 1, //初始化时,滑动条宽度开始标度
end: 50 //初始化时,滑动条宽度结束标度
},
//X轴内置滑动
{
type: 'inside', //内置滑动,随鼠标滚轮展示
xAxisIndex: [0],
start: 1,//初始化时,滑动条宽度开始标度
end: 50 //初始化时,滑动条宽度结束标度
} ],
如X,Y轴都要开启的话,将上面所有的都复制就好。如需单独一个,选择性复制就可以正常使用。
附录:借鉴文档
echarts滑动实例 : https://www.echartsjs.com/examples/en/editor.html?c=doc-example/scatter-dataZoom-all
echarts文档: https://www.echartsjs.com/zh/option.html#dataZoom
echarts 柱状图 X(Y)轴数据过多时,滑动以及内置缩放的问题的更多相关文章
- Echarts在手机端y轴数据过大,显示不全
解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据
1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- Chart.js Y轴数据以百分比展示
新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽 ...
- echarts修改X,Y轴上的颜色
分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...
- Echarts 折线图y轴标签值过长 显示
参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...
- highcharts 柱状图在柱子顶部显示y轴数据
var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...
随机推荐
- vue将页面导出成pdf
npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...
- Harbor安装(docker-compose) -- 企业级Registry仓库
根据Harbor官方描述: Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docker Distri ...
- 2018-2019-2 20175126谢文航 实验三《敏捷开发与XP实践》实验报告
一.实验报告封面 课程:Java程序设计 班级:1751 班 姓名:谢文航 学号:20175126 指导教师:娄嘉鹏 实验日期:2019年5月2日 实验时间:--- 实验序号:实验三 实验名称:敏捷开 ...
- python装饰器参数那些事_接受参数的装饰器
# -*- coding: utf-8 -*- #coding=utf-8 ''' @author: tomcat @license: (C) Copyright 2017-2019, Persona ...
- spring boot 尚桂谷学习笔记04 ---Web开始
------web开发------ 1.创建spring boot 应用 选中我们需要的模块 2.spring boot 已经默认将这些场景配置好了 @EnableAutoConfiguration ...
- Codeforces #576 Rectangle Painting 1 | div1D | div2F | DP | Rustlang
原题链接 大意 n*n正方形 有黑有白 每次可以选择一个 矩形把它全变成白色,代价是max(长,宽) 求吧 整个正方形 全变白 的最小代价 数据范围 n <= 50 题解 首先如果 我们刷了两个 ...
- 最长回文子串 —— Manacher (马拉车) 算法
最长回文子串 回文串就是原串和反转字符串相同的字符串.比如 aba,acca.前一个是奇数长度的回文串,后一个是偶数长度的回文串. 最长回文子串就是一个字符串的所有子串中,是回文串且长度最长的子串. ...
- Java 课程总结
学到了什么 本学期通过老师的教导与自学,在Java课程具体学到了以下知识: 1.面向对象编程 1.1 类与对象(匿名对象) 类是由方法与属性组成,其定义了一个基本的模板,代表一个共性.其中属性也可以是 ...
- Swift——(六)Swift中的值类型
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/twlkyao/article/details/34855597 在Swift中,结构体和枚举 ...
- vue 实现active点击图片切换
循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...