ECharts 设置全圆形仪表盘

拼搏现实的明天。 2023-10-05 11:29 7阅读 0赞

#### 1 使用详解 ####

（1）series.startAngle

说明：仪表盘起始角度。圆形正右手侧为 0 度，正上方为 90 度，正左手侧为 180 度。

（2）series.endAngle

说明：仪表盘结束角度。

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 实现代码（全圆形仪表盘） ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            // 指定图表的配置项和数据
            var option = {
    			tooltip: {
    				formatter: '{a} <br/>{b} : {c}%'
    			},
    			series: [
    				{
    					name: '业务指标',
    					type: 'gauge',
    					detail: {formatter: '{value}%'},
    					data: [{value: 45, name: '完成率'}],
    					startAngle:0,
                        endAngle:359.999,
    				}
    			]
    		};
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

#### 4 最终效果图（全圆形仪表盘） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201011121804738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201011121923371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70