仪表盘gauge

仪表盘主要用在进度把控以及数据范围的检测

实现步骤：

（1）Echarts最基本的代码结构

　　引入js文件，DOM容器，初始化对象，设置option

（2）准备数据，设置给series下的data

　　data:[{value:97}]

（3）图表类型

　　在series下设置   type: "gauge"

常见效果：

（1）控制仪表盘的数值范围：max、min

（2）多个指针：增加data中的数组元素

（3）多个指针颜色差异：itemStyle

　　<script src="lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>

    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            series: [{
                type: "gauge",
                data: [{
                        value: 98,
                        // 控制指针的颜色
                        itemStyle: {
                            color: 'pink'
                        }
                    }, // 每一个对象就代表一个指针
                    {
                        value: 70,
                        itemStyle: {
                            color: 'green'
                        }
                    }
                ],
                min: 50,
                max: 100
            }]
        }

        myChart.setOption(option);
    </script>

如图：

仪表盘的特点：可以更直观的表现出某个指标的进度或者实际情况。