• EchartGauge 刻度盘

    EchartGauge 刻度盘

    TIP

    1.1.0+

    1. <!-- 导入需要的包 -->
    2. <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>

    刻度盘 - 图1

    1. <avue-echart-gauge ref="echart" :option="config" :data="data" width="1000"></avue-echart-gauge>
    2. <script>
    3. export default {
    4. data() {
    5. return {
    6. data: {
    7. value: 50,
    8. name: '完成率',
    9. min: 0,
    10. max: 100,
    11. unit: '%'
    12. },
    13. config: {
    14. lineSize: 25,
    15. barColor: [{
    16. postion: 0.2,
    17. color1: '#91c7ae'
    18. },
    19. {
    20. postion: 0.8,
    21. color1: '#63869e'
    22. },
    23. {
    24. postion: 1,
    25. color1: '#c23531'
    26. }
    27. ]
    28. }
    29. }
    30. },
    31. }
    32. </script>