vue.js - 使用 vue-ellipse-progress 组件，有什么方法可以让同一个圆圈有两种不同的颜色来表示高值和低值？

Question

如果进度值超过 60，我想在圆圈中指示高/低，我可以在其中显示不同的颜色。例如，如果我的值为 80，那么直到 60 它应该显示绿色，剩余的 20 应该是红色。是否可以使用 vue-ellipse-progress 来实现这一点？

          <vue-ellipse-progress
            :progress="myvariable"
            :angle="-90"
            color="#1565C0"
            emptyColor="#BBDEFB"
            :size="180"
            :thickness="10"
            emptyThickness="15%"
            fontColor="black"
            dot="10 white"
          >
            <span>{{myvariable}} </span>
          </vue-ellipse-progress>

标签： vue.jsvue-component

Answer 1

对此有一个解决方案。通过向颜色属性添加渐变有助于相应地显示颜色。

:color = "渐变"

渐变：{径向：假，颜色：[{颜色：'#1565C0'，偏移：80，不透明度：'1'，}，{颜色：'红色'，偏移：40，不透明度：'1'，}，] }