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

Question

我正在尝试制作一个包含百分比值的图表，而不是我提供给它的数值。

这是我的图表：

是否有自动将条形图中的数字转换为百分比的选项？（在示例中，范围从 0 到 50,000，我希望将其从 0% 转换为 100%）。

Answer 1

百分比是(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>

Answer 2

你可以有 y 轴的百分比 0,10,20 .... 100% 你必须有 total num ，在这种情况下 total = 50000;

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