div+css+js实现渐变色根据按百分比显示的横向柱状图

echarts完成不了我的需求，尝试用最原始的方法画一个横向渐变色柱状图 一起加油

前言

echarts完成不了我的需求，尝试用最原始的方法画一个横向渐变色柱状图

提示：以下是本篇文章正文内容，下面案例可供参考

一、目标展示？

没错，又是这张图，可以看到用echarts的话左边图片不好对其而且鼠标悬浮背景色的柱子会出现前面柱子被隐藏的情况，下面用最原始的方法做一下。

二、代码

1.js

代码如下（示例）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
			function rbar(){
				//获取div背景长度
				var rbcwidth = document.getElementById("rbcbar");
				var rmaxlength = rbcwidth.clientWidth||rbcwidth.offsetWidth;
				//设置最大值
				var rmaxvalue = 1000;
				//获取货物数量柱状图id
				var rbar = document.getElementById("rightbar");
				//获取显示货物名称div的id
				var rname = document.getElementById("rightname");
				//获取货物数量库存id
				var rnum = document.getElementById("pronum");
				//显示货物名称给参 
				var rightname = "产品";
				var rightnum =380;
				//输出文字
				rname.innerHTML = rightname;
				rnum.innerHTML = rightnum;
				//规定右边div长度
				var rbarwidth = rightnum/rmaxvalue*rmaxlength;
				alert(rbarwidth);
				//内长度
				rbar.style.width = rbarwidth + 'px';
				//显示货物数量给参
				
				//测试
/*				alert(maxvalue);
				document.getElementById("sss").innerHTML=Date();*/
				//json
				/*var text = '{ "sites" : [' +
    				'{ "name":"Runoob" , "num":"234" },' +
    				'{ "name":"Google" , "num":"122" },' +
    				'{ "name":"Taobao" , "num":"234" } ]}';
    
				obj = JSON.parse(text);
				document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;*/
				
			};

2.html

代码如下（示例）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="rtright" style="float: left;height: 140%;width: 420px;margin-left: 20px;">
							<!--一行柱状图-->
								<div class="barout">
								<!--<div style="width: 32px;height: 32px;background-image: url(test/img/cycle.png);background-size: 100%;background-repeat: no-repeat;float: left;">-->
								<div class="barout-img">
									<p>1</p>
								</div>
								<!--名称-->
								<div id="rightname" class="baroutname"></div>
								<div id="rbcbar" class="bcbar">
									<div id="rightbar" class="barinbar"  style="background-image: linear-gradient(90deg, #29cefe 0%, #ee981a 100%);"></div>
								</div>
								<!--数量-->
								<a id="pronum" class="barnum" style="color: #FFFFFF;"></a>
							</div>

应该可以了，不行的话私我


自己去用什么标签循环出来吧。加油。

总结


一个好的思路真就比傻干省事多了