Блог

Я хочу указать высокий / низкий уровень в круге, где я могу отображать другой цвет, если значение прогресса превышает 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>
  

Есть одно решение для этого. Добавление градиента к атрибуту цвета помогает соответствующим образом отображать цвета.

:color = «градиент»

градиент: {радиальный: false, цвета: [ { цвет: ‘# 1565C0’, смещение: 80, непрозрачность: ‘1’, }, { цвет: ‘красный’, смещение: 40, непрозрачность: ‘1’, }, ] }