# gauge horizon
![组件-仪表（垂直）][gauge-vertical-01]  
用竖条形状，显示仪表的组件。


## properties
  
1. Value(Number) - 仪表的值。  
<figure style="text-align: center;">

![仪表-Value适用结果][gauge-vertical-02]  
<figurecaption>(value: 85)</figurecaption>
</figure>

2. startValue - 仪表的起始值。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-03]  
<figurecaption>(startValue: 10)</figurecaption>
</figure>

3. endValue - 仪表的最终值。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-04]  
<figurecaption>(endValue: 120)</figurecaption>
</figure>

4. step - 仪表的刻度间隔。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-05]  
<figurecaption>(step: 30)</figurecaption>
</figure>

5. stepTextSize - 仪表的刻度文本大小。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-06]  
<figurecaption>(stepTextSize: 10)</figurecaption>
</figure>

6. subStep - 仪表的刻度之间间隔。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-07]  
<figurecaption>(subStep: 10)</figurecaption>
</figure>

7. stepNeedleSize - 仪表的刻度大小。
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-08]  
<figurecaption>(stepNeedleSize: 3)</figurecaption>
</figure>

8. textColor - 仪表的刻度文本颜色。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-09]  
<figurecaption>(textColor: #ec5324)</figurecaption>
</figure>

9. needleFillStyle - 仪表的针色。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-10]  
<figurecaption>(needleFillStyle: #ec5324)</figurecaption>
</figure>

10. needleSize - 仪表指针大小。
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-11]  
<figurecaption>(needleSize: 10)</figurecaption>
</figure>

11. stepFillStyle - 仪表刻度的颜色。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-12]  
<figurecaption>(stepFillStyle: #ec5324)</figurecaption>
</figure>

12. colorStops - 仪表的各个区间的颜色。可以通过双击而添加区间，也可以向下拖动标记而删除区间。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-13]  
<figurecaption>(colorStops: <img src="{{site.baseurl}}/assets/components/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
</figure>

13. showStartValue - 决定是否显示仪表的起始值。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-14]  
<figurecaption>(showStartValue: unchecked)</figurecaption>
</figure>

14. showEndValue - 决定是否显示仪表的最终值。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-15]  
<figurecaption>(showEndValue: unchecked)</figurecaption>
</figure>

15. showStepLine - 决定是否显示仪表的刻度。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-16]  
<figurecaption>(showStepLine: unchecked)</figurecaption>
</figure>

16. showStepText - 决定是否显示仪表的刻度值。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-17]  
<figurecaption>(showStepText: unchecked)</figurecaption>
</figure>

17. showSubStep - 决定是否显示仪表的分刻度。  
<figure style="text-align: center;">

![仪表-BackgroundColor适用结果][gauge-vertical-18]  
<figurecaption>(showSubStep: unchecked)</figurecaption>
</figure>


[gauge-vertical-01]:../images/gauge-vertical-01.png
[gauge-vertical-02]:../images/gauge-vertical-02.png
[gauge-vertical-03]:../images/gauge-vertical-03.png
[gauge-vertical-04]:../images/gauge-vertical-04.png
[gauge-vertical-05]:../images/gauge-vertical-05.png
[gauge-vertical-06]:../images/gauge-vertical-06.png
[gauge-vertical-07]:../images/gauge-vertical-07.png
[gauge-vertical-08]:../images/gauge-vertical-08.png
[gauge-vertical-09]:../images/gauge-vertical-09.png
[gauge-vertical-10]:../images/gauge-vertical-10.png
[gauge-vertical-11]:../images/gauge-vertical-11.png
[gauge-vertical-12]:../images/gauge-vertical-12.png
[gauge-vertical-13]:../images/gauge-vertical-13.png
[gauge-vertical-14]:../images/gauge-vertical-14.png
[gauge-vertical-15]:../images/gauge-vertical-15.png
[gauge-vertical-16]:../images/gauge-vertical-16.png
[gauge-vertical-17]:../images/gauge-vertical-17.png
[gauge-vertical-18]:../images/gauge-vertical-18.png
