前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Echarts设置y轴值间隔

Echarts设置y轴值间隔

作者头像
王小婷
发布于 2019-03-22 03:33:13
发布于 2019-03-22 03:33:13
9.3K00
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些。

其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚的,主要是设置这段代码,max(设置y轴最大值)和splitNumber

总结一下公式就是,

max/ splitNumber=y轴值间隔

(比如将y轴200平均成5个点,每个点的间距就是40)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yAxis : [ { // 纵轴标尺固定
            type : 'value',
            scale : true,
            max : 200,
            min : 0,
            splitNumber : 5,
            boundaryGap : [ 0.2, 0.2 ]
        } ],

可以看一下修改之后的结果:比之前好很多。


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.03.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
echarts同一页面四个图表切换的js数据交互
需求:点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中。 图片.png 其余的就不多说,直接上js代码了 $(function() { $("#heart").
王小婷
2018/07/04
1.7K0
Echarts设置背景的网格线为虚线
用Echarts写了一个折线图之后,现在不太喜欢背景网格线的实线 需要改成虚线 Echarts设置背景的网格线为虚线的关键属性 yAxis: { splitLine: {
王小婷
2021/04/09
4.2K0
Echarts设置背景的网格线为虚线
Echarts统计图自适应
之前做折线图的时候,y轴数据都是写成固定了的,如果是统计步数的话,y轴坐标就要根据走了多少步来自适应了,如果没写的话,就会出现以下的这种情况,折线超出了整个坐标抽,就是一个bug了,只要修改一下属性即可,今天写一下Echarts统计图自适应。
王小婷
2019/11/27
9870
Echarts隐藏背景的网格线
网格线未处理之前,默认是这样的,这个背景的网格线,我们现在如果不需要,就去掉吧。 Echarts隐藏背景的网格线属性 yAxis: { splitLine: {show: false}, }, 示例代
王小婷
2021/04/09
1.6K0
Echarts隐藏背景的网格线
【前端统计图】echarts实现单条折线图
五分钟上手: 图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五
王小婷
2018/05/31
1.6K0
ECharts折线图渲染json格式数据(格式为数组)
ECharts折线图渲染json格式数据(json格式,为数组) 需要对数组进行循环取值,将取到的值分别赋值给x轴和y轴
王小婷
2021/04/09
3.2K0
ECharts折线图渲染json格式数据(格式为数组)
【前端统计图】echarts实现简单柱状图项目地址下载:
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <script src="js/jquery-1.11.3.js"></script> </
王小婷
2018/05/31
1.4K0
Echarts请求不同格式的json数据处理
在前面已经说到过关于Echarts请求json数据处理: 【前端统计图】echart折线图ajax请求json数据: https://www.jianshu.com/p/9e5c7e2cff05
王小婷
2019/10/15
3.1K0
Echarts请求不同格式的json数据处理
【前端统计图】echart折线图ajax请求json数据
先上图,写了一个echart折线图ajax请求json数据的小demo,帮助自己更好的理解图表知识。
王小婷
2019/07/16
1.4K0
【前端统计图】echart折线图ajax请求json数据
浅谈Echarts 使用配置
官方文档 一、Echarts折线图的配置 (1)去掉折线图的边框线及其加入阴影效果 lineStyle: { normal: { type: 'solid', /*color:"#28a5fc",*/ color:"red", opacity :"0.5" } } 如下图所示: ---- (2)设置移动折线图的 “上下左右” 的位置 代码片段: grid:{ x:40, y:20, x2:20, y2:6
White feathe
2021/12/08
8830
浅谈Echarts 使用配置
echarts设置折线图点的样式(echarts折线图拐点样式)
用在有类目轴的折线图表中:鼠标放哪个拐点上,就只显示当前拐点的信息,设置symbol: ‘none’,的没有拐点,不显示提示框
全栈程序员站长
2022/08/02
7.1K0
echarts设置折线图点的样式(echarts折线图拐点样式)
ajax+json实现echarts多个统计图显示
前端时常会遇到这样的问题,有一个单独的模块用作统计图,将多个折线或者柱状图,混合使用,下面的例子是用ajax+json模拟了调用接口实现echarts多个统计图显示。 样式布局暂时就不放在上面了,以下是从项目里面复制过来的一个小的demo,代码仅供参考。
王小婷
2019/09/19
2.7K0
echarts在react中的引入使用(俩种方法)
一.第一步 先看看你的echarts版本。 小于5.0版本的可以使用以下方法: 先安装: npm i echarts@4.0.4 --save npm i echarts-for-react --save 1.原始echarts 导入 import React from 'react' // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入饼图 import 'echarts/lib/chart/bar' // 引入提示框和标题组
biaoblog.cn 个人博客
2022/08/11
13.6K0
Echarts多Y轴探索
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
孟君
2019/09/24
4.9K0
Echarts多Y轴探索
ECharts 配置语法
ECharts 配置语法
Java架构师必看
2021/05/14
2.6K0
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完善,最终做出可读性很高的可视化图表。
蒋川
2022/03/29
13.4K0
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
【数据可视化】Echarts官方文档及常用组件
前面介绍了柱状图、折线图、饼图3种最为常见图表的绘制和使用:【数据可视化】Echarts最常用图表,但是没有介绍在遇到问题时如何寻求帮助,也没有详细介绍图表中组件的使用。这次来介绍ECharts中官方文档、常用组件的使用方法,可以更加快捷地创建清晰明了、实用的图表。 以下代码均在VScode中使用。
zxctscl
2024/03/21
2.5K0
【数据可视化】Echarts官方文档及常用组件
ECharts x轴设置成时间间隔
xAxis.type string [ default: ‘category’ ] 坐标轴类型。
kirin
2021/03/15
4K0
记录--Echart配置参数介绍
最近项目又用到了echarts来绘制图表。这里就记录一下,部分参数样式、x轴,y轴等参数的设置含义。同时也分享一下,我的使用心得。
china马斯克
2024/08/15
3190
Echarts数据可视化全解注释
github地址:https://github.com/626626cdllp/echarts
全栈程序员站长
2022/09/09
11.3K0
推荐阅读
相关推荐
echarts同一页面四个图表切换的js数据交互
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验