How to create a single progress line?

[BenJackGill]

How do I create a single progress line using Vue eCharts?

Here is in an image example: https://imgur.com/a/PhTQKxL

The green line should change depending on it's value, for example:

• When the value is 10 there should only be a small green line.
• When the value is 50 the green should fill half the line, and grey the other half.
• When the value is 100 it should be all green.

The green line should also animate on load.

And it should also have rounded end caps.

Is this simple type of progress line possible in Vue eCharts?

How would it be done?