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             }         ]

原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/11294323.html

时间: 2024-10-18 15:47:57

Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度的相关文章

highcharts设置Y轴范围及根据Y轴范围设置不同颜色

yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: 30, //最小 tickInterval: 10, //步长 max:150,//最大 // 不同Y轴范围设置不同颜色 begin plotBands: [{ from: 30, to: 60, color: 'rgba(168, 255, 213, 0.3)', label: { text:

echarts 隐藏Y轴最大最小值label及分割线 ----障眼大发好使

需求图 1====>label 最大最小值还好弄, yAxis{ axisLabel{ showMinLabel: false, showMaxLabel: false, }} 2====>Y轴分割线处理 这里用了障眼法:将最大最小值分割线颜色设置与背景色一致就可以了 color: ['#F3F3F3','#ddd','#ddd','#ddd','#ddd','#ddd','#ddd','#F3F3F3' ] note :如果color两个值 就可以实现间隔显示 yAxis: { type :

echarts自定义y轴刻度信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.common.min.js"></script> </head> <body> <!-- 为

百度echarts使用--y轴label数字太长难以全部显示

问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就很大,所以导致显示不下,那么只要我们将显示的值按比例缩小,应该就可以了. 原始值很大: var map = data.map; for (var key in map){ var stockCode = key; option.legend.data.push(stockCode); var ind

Hightcharts设置Y轴最大最小值

有两种方法: 1:是在控件初始化时预设, yAxis: [{ max:100}] 2:在程序运行中动态更新设置 thChart.yAxis[0].update({ min: 0, max: 500 });

highcharts设置Y轴固定高度

yAxis: {     tickPositions: [0, 20, 50, 100] // 指定竖轴坐标点的值 }

在Height标签中如何可以设置其中的值为浮点数

今天来为大家说一说在我最近做的一个项目中遇到的一个比较有意思的东西. 先说一下,这个项目的需求是要在前端显示界面提供信息整合分析的图表,这里我们选择了使用柱形图. 以一个镇子里面的每一个村子有多少人为例: 首先要先确定Y轴的数据的间隔是多少,我们在这里设置的为20px; 因为在前端浏览器Height标签获取相应数据的时候采用的是取整,但是这里在显示的时候是明显不能够用整数值的: 假如我们设置Y轴大概每一个20px的间距就是100个人口,那么如果是99个人的话实际的柱形图的高度应为99/100*2

图表部件设置X轴的旋转显示

在实际的项目开发中,也许会遇到图表部件X轴节点值过长,导致图表节点值显示重叠,分不清节点值. 如图 因此度量快速开发平台封装了下列方法: 图表X轴值旋转显示方法:XLableAngle 作用 设置X轴标签的旋转角度[饼图和漏斗图除外].设置值 int类型,旋转角度(-360至360).示例图表部件. XLableAngle=-45 效果: 只需在数据刷新代码之后添加:图表部件. XLableAngle=-45 即可. [size=13.3333px]注:-45是旋转角度值,范围在-360至360

第一次Grafana使用心得(X轴与Y轴、SqlServer)

1.图表在鼠标放上去不显示Y轴具体值:由图中的“字符串”改成“none”. 2.图中的decimal可以设置成整数 3.图中的rotate表示y轴的倾斜度,可以设置.例如:30 4.图中的format可以设置y轴的数据值 5.第一次用SQL server的设置 原文地址:https://www.cnblogs.com/gao109214/p/11535980.html