仪表盘图

仪表盘图

实现

1、引入Echart最基本的代码结构

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

3、在series下设置type:gauge

具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- 1、引入Echarts.js -->
<script src="../lib/echarts.min.js"></script>
<body>
    
    <div style="width: 400px;height: 600px;"></div>
<script>
    // 3、初始化echats实例对象
var eCharts=echarts.init(document.querySelector('div'));


//4、准备配置项
var option={


    series:[{
        type:'gauge' ,

        data:[
            {
           value:97
                //每一个对象就代表一个指针
            }
        ]
    }
        




   ]
    

}
//5、将配置项配置给实例对象
eCharts.setOption(option);

</script>
</body>
</html>

实现效果：
在这里插入图片描述

常用配置

数值范围

min，max

多个指针

设置多个series下的data的值
在这里插入图片描述

指针颜色

在data里面的value中下设置

           itemStyle:{
               color:'green'
           }

实现效果

在这里插入图片描述

版权声明：本文为qq_57907966原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。