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

其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚的,主要是设置这段代码,max(设置y轴最大值)和splitNumber
总结一下公式就是,
max/ splitNumber=y轴值间隔
(比如将y轴200平均成5个点,每个点的间距就是40)
yAxis : [ { // 纵轴标尺固定
type : 'value',
scale : true,
max : 200,
min : 0,
splitNumber : 5,
boundaryGap : [ 0.2, 0.2 ]
} ],
可以看一下修改之后的结果:比之前好很多。

series : [
{
name:'做市',
type:'bar',
stack: '总量',
/*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
data:serieszs
},
{
name:'协议',
type:'bar',
stack: '总量',
barWidth : 30,//柱图宽度
/*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
data:seriesyx
}
]
Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度的更多相关文章
- echarts设置y轴值间隔
其中min.max可以自定义可以动态获取数据 yAxis : [ { type : 'value', axi ...
- echarts 修改y轴刻度间隔问题
其中min.max可以自定义可以动态获取数据 yAxis : [ { type : 'value', axi ...
- Echarts-柱状图柱图宽度设置
先看两张图 图中柱图只需要设置series中的坐标系属性barWidth就可以, 这种图柱状图,折叠柱状图都适应 eg: /** * 堆积柱状图 * @param xaxisdata x轴:标签(数组 ...
- echarts统计图Y轴(或X轴)文字过长问题解决
echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...
- echarts使用记录(二)legend翻页,事件,数据集,设置y轴最大/小值,让series图形从右侧出往左移动
1.有时候legend比较多的时候,需要做翻页比较好,有个属性legend的type属性设置为scroll,然后animation可以控制动画,官方文档均可查. 再就是scrollDataIndex, ...
- 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
本文链接:https://blog.csdn.net/qq_26909801/article/details/96966372数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语前言因实习的公司 ...
- python matplotlib 设置x轴文本间隔显示(数字的话可以转为字符之后处理)
一个国际友人绘图遇到的问题,查了一手资料.主要参考的是这个老哥的做法(https://blog.csdn.net/wyquin/article/details/80508260) #totalSeed ...
- highcharts设置Y轴范围及根据Y轴范围设置不同颜色
yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...
- matlab画图:设置y轴位置,使y轴在x轴的中间
sigmoid函数图像 x=-10:0.1:10; y=sigmf(x,[1 0]); plot(x,y) 画出的图像如下所示: 怎么将Y轴放在中间呢,而不是在左边? 即如何得到这种效果呢? 方法 ...
随机推荐
- C字符贪吃蛇
算法参照Perl字符贪吃蛇,源码: #include <stdio.h> #include <windows.h> #define WIDTH 12 // 宽 #define ...
- fdconnection自动重连
fdconnection自动重连 1)设置 FDConnection1.ResourceOptions.AutoReconnect := True; 控制自动连接的恢复. 使用AutoReconnec ...
- delphi 运算符重载
譬如上面的 record 可以这样声明: type TMyRec = record name: string; age: Word; class operator Grea ...
- Oracle 查询表分区相关信息
Oracle 查询表分区相关信息 --表分区 --1,分区表信息 -- (1)显示数据库所有分区表的信息 select * from DBA_PART_TABLES a where a.owner=u ...
- flutter PopupMenuButton弹出式菜单列表
import 'package:flutter/material.dart'; class PopupMenuButtonDemo extends StatefulWidget { @override ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- 123457123456#2#----com.ppGame.XueYingYu76--前拼后广--儿童英语_pp
com.ppGame.XueYingYu76--前拼后广--儿童英语_pp
- Swift4.0复习特性、编译标志和检查API的可用性
1.Swift中的特性: @引出,后面紧跟特性名,圆括号带参数即可. @attribute(args) avaiable: 指明对象,函数,类型的可用性. @available(iOS 10.0, m ...
- CSS3 《3D骰子 压大小》
游戏在线预览地址:http://dtdxrk.github.io/game/3d-dice/index.html js判断一个随机数大小的游戏. 本来想用canvas做的,平面的生产一个点数,感觉没啥 ...