自动将绝对数字转换为echarts中的百分比值

Question

我正在尝试使用百分比值而不是数字值的图表。

这是我的图表：

有一个选项来自动转换柱状图百分比的数字？ （在这个例子中，范围从0到50,000，我希望从0％转换到100％）。

Answer 1

您可以使y轴的百分比为0,10,20 .... 100％ 您必须有总数，在这种情况下总数= 50000;

现在获取数据并计算％as = data/total * 100 并将其绘制在图上。我希望它有帮助。

Answer 2

百分比是(100/maxValue) * value。

var max = document.getElementById("max"); 
 
var offset = document.getElementById("offset"); 
 
var output = document.getElementById("output"); 
 
var c = document.getElementById("c").getContext("2d"); 
 

 

 
function getPercentage() { 
 
    var all = parseInt(max.value); 
 
    var off = parseInt(offset.value); 
 
    output.innerHTML = ((100/all) * off) + "%"; 
 

 
    c.fillStyle="#eee"; 
 
    c.fillRect(0, 0, c.canvas.width, c.canvas.height); 
 
    c.fillStyle="red"; 
 
    c.fillRect(25, c.canvas.height, 50, 0 - ((1/all) * off) * c.canvas.height) 
 
} 
 

 
max.onchange = getPercentage; 
 
max.onkeyup = getPercentage; 
 
offset.onchange = getPercentage; 
 
offset.onkeyup = getPercentage; 
 

 
getPercentage()

<label>Max: <input type="number" value="100" id="max"/></label><br> 
 
<label>Offset: <input type="number" value="90" id="offset"/></label> 
 
<p id="output"></p> 
 
<canvas id="c" width="100" height="100"></canvas>