echarts-X轴不从0刻度开始

最新推荐文章于 2024-04-24 11:05:32 发布
最新推荐文章于 2024-04-24 11:05:32 发布
阅读量2.9k 收藏 1
点赞数 1
文章标签： javascript ViewUI

1、问题背景

统一一周内植树的数量，利用柱状图来实现


2、实现源码

（1）X轴从零刻度开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-X轴不从0刻度开始</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		<style>
			body,html{
				width: 99%;
				height: 99%;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			#bar{
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
			$(function(){
				var chart = document.getElementById('bar');  
                var echart = echarts.init(chart); 
                
                var option = {
				    title: {
				        text: ''
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['植树数量']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: ['周一','周二','周三','周四','周五','周六','周日']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name:'植树数量',
				            type:'bar',
				            stack: '植树数量',
				            data:[34, 12, 56, 27, 42, 87, 62]
				        }
				    ]
				};
                  
                echart.setOption(option);  
			});
		</script>
	</head>
	<body>
		<div id="bar"></div>
	</body>
</html>

（2） X轴不从零刻度开始 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-X轴不从0刻度开始</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		<style>
			body,html{
				width: 99%;
				height: 99%;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			#bar{
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
			$(function(){
				var chart = document.getElementById('bar');  
                var echart = echarts.init(chart); 
                
                var option = {
				    title: {
				        text: ''
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['植树数量']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: true,
				        data: ['周一','周二','周三','周四','周五','周六','周日']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name:'植树数量',
				            type:'bar',
				            stack: '植树数量',
				            data:[34, 12, 56, 27, 42, 87, 62]
				        }
				    ]
				};
                  
                echart.setOption(option);  
			});
		</script>
	</head>
	<body>
		<div id="bar"></div>
	</body>
</html>

3、实现结果

（1）X轴从零刻度开始


（2）X轴不从零刻度开始


4、问题说明

在xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离

iteye_8264
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts折线图x轴不从0开始
qq_41451744的博客
08-25 8914
在xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离。使用折线图展示相关数量时，发现在x轴上，折线不是从0开始的，结束的时候也不是在x最后。在echarts图表x轴配置信息中有一个属性来控制是不是从0开始的。修改过该属性后，就可以看到x轴就从0开始了。
让echarts折线图X轴不从0刻度开始
cc1314_工作、学习有感
11-12 9279
让echarts折线图X轴不从0刻度开始，有两种处理。
echarts-X轴不从0刻度开始 代码实现
腾讯全栈-ITCJF
03-09 6364
boundaryGap: true, //xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离 xAxis: [ { name: this.xunit, type: "category", offset: 4, ...
echarts自定义x轴-分时天月年自定义
09-27
完全小白就不要看了，容易看迷，涉及到公司的一些东西，里面代码有删减，但是整理一下肯定是能用的，方法抽...这个实现的功能就是echarts x轴自定义时间段显示，自适应分时天月年显示，其他类似根据时间合并也可以用
Echarts时间轴的刻度优化和自适应
09-13
尤其是在数据量大、时间粒度变化复杂的情况下，Echarts的时间轴刻度可能会显得不清晰或者不直观。 描述中提到的问题是Echarts在处理时间轴刻度时可能存在的不足。默认情况下，Echarts会根据数据范围自动选择合适的...
echarts x轴文字过长悬浮显示.rar
08-02
x轴文字显示过长会影响柱状图显示不全，需要对文字进行处理，为了美观，限定文字只显示在一行，文字长度为4；当长度大于4时将第四个文字替换为"..."；当鼠标悬浮在"..."时，显示全部内容，其它长度为4的文字正常显示...
echarts时间轴demo，内含两种实现方式。1.X轴为数值轴(type=value)；2.X轴为时间轴(type=time)
07-11
echarts时间轴demo，内含两种实现方式...1.X轴为数值轴(type=value)； 2.X轴为时间轴(type=time)。 下载后可直接打开看到效果。 如果对demo有疑问，如无法加载，无法使用，报错等，可添加资源中的联系方式，免费解答。
echarts实现获取datazoom的起始值(包括x轴和y轴)
10-15
这里的`myChart`是ECharts的实例，`startValue`和`endValue`分别表示x轴DataZoom的开始和结束比例值，范围在0到100之间。 对于x轴上的实际数据点，我们可以使用`xAxis`配置中的`data`数组来映射比例值。例如，如果`...
【echarts】数据起点不从X轴的原点开始【不从0开始】
galaxyJING的博客
04-24 1184
boundaryGap: false 默认是true，是指坐标轴两边留白。改为false：不留白即从原点开始。为什么有些图是这样的。
echarts x 起始_echarts-X轴不从0刻度开始
weixin_33812391的博客
12-31 5186
1、问题背景统一一周内植树的数量，利用柱状图来实现2、实现源码(1)X轴从零刻度开始echarts-X轴不从0刻度开始body,html{width: 99%;height: 99%;font-family: "微软雅黑";font-size: 12px;}#bar{width: 100%;height: 100%;}$(function(){var chart = document.getEle...
echarts 柱状图 x轴数据为0占位情况 多X轴展示
weixin_44718234的博客
07-03 4833
echarts 柱状图 x轴多维度显示不同数据源 echarts 柱状图 x轴数据某个值为空时就会出现柱状图不显示并且占位现象，如上图，那怎么解决呢？ 想了两天终于想到了办法，那就是添加多个X轴的数据就可以，在这记录一下，如果哪位有更好的办法，请告知： 效果图： 代码： app.configParameters = { rotate: { min: -90, max: 90 }, align: { options:
echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题
ya_nan_zhang的博客
08-30 6028
echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题 1、遇到的问题 双Y轴刻度不对齐以及x轴不在底部问题 2、解决方法 1）解决x轴线不在底部问题 在axisLine里面设置onZero属性 2）解决对齐问题 问题描述： 1、这里已经强制设置了min max 以及interval为5但是人不对齐 发现是最大值和倒数第二个值间隔不均匀导致的 所以这里的max要通过计算来获取 2、这里柱子对应左侧y轴 两条折线对应右侧y轴 所以这里要求出两条折线的最大值和最小值进而比较出最终的最小值和最大值 解决
折线图x轴从原点开始
暮眼蝶
04-12 7120
都可以： 1. CategoryAxis categoryaxis = categoryplot.getDomainAxis(); categoryaxis.setLowerMargin(0); 2. ValueAxis valueAxis = plot.getDomainAxis();  valueAxis.setLowerMargin(0);
ECharts柱状图实现从y轴指定数渲染，而不是始终从y=0处渲染
Hyanl的博客
07-28 1034
（ps：之前翻看了echarts GitHub上的问题记录， 5.5.0版本以后可以使用barSeries.startValue设置起始值，但是貌似目前这个版本还未发布，具体问题自行参考：https://github.com/apache/echarts/pull/17078）看看是什么版本的，高于4.0版本的很有可能也是无法达到这个效果的。使用了axisLine.onZero = false但是达不到效果的话，可以直接引用以下版本看看能否实现，若能达到效果，八成是echarts版本问题了。
echarts使用：X轴不从0开始
热门推荐
JxiaoZhang的博客
11-23 2万+
只需要设置xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离 ... xAxis: { type: 'category', boundaryGap: false, data: dateList }, ...  ...
ECharts柱状图或柱状堆叠图使用对数坐标系时，坐标轴不从0开始及数据展示异常的相关问题解决方案
和居然一样迷茫的博客
04-13 9765
问题描述： 当使用echarts柱状图或者柱状堆叠图时，使用对数坐标系引发的纵坐标不从0开始；以及当存在数据为0或1时，柱状图显示异常的相关问题解决。 问题一：当数据中不包含0时，纵坐标不从0展示 问题2：当数据中存在0或者存在1时，数据展示存在问题 解决方案： 第1步：手动修改值为0或值为1的数据，例如： data.forEach(element1 => { dataTemp.push(element1 == 0 ? 1.0000001 : (element1 == 1
echarts柱状图不展示x轴刻度
最新发布
07-04
ECharts是一款非常流行的JavaScript图表库，用于创建交互式的数据可视化。如果你想在柱状图中不显示X轴刻度，可以通过设置配置项来实现。具体步骤如下： 1. 在初始化ECharts实例时，找到`xAxis`部分，它是控制X轴设置的部分。 ```javascript var myChart = echarts.init(document.getElementById('main')); // 假设你的数据和系列（bar series）已经准备好了 var option = { xAxis: { // 关闭X轴刻度 show: false, // 设置为false表示不显示 type: 'category', // 如果是时间轴类型，记得保持type不变 data: [] // 这里填入你的X轴数据 }, yAxis: {}, // 对Y轴的设置（如果需要的话） series: [{ name: '数据', type: 'bar', // 栏状图 data: [] }] }; ``` 2. 将`option`设置给你的图表实例： ```javascript myChart.setOption(option); ``` 这样，ECharts柱状图就不会显示X轴刻度了。如果你想要在某些情况下动态切换是否显示刻度，可以在`option`中添加一个布尔值判断条件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值