Echarts图表之变形圆环图(一)_echart图圆圈转转-CSDN博客

本文链接：https://blog.csdn.net/gly_technology/article/details/122574772

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           var option = {
               backgroundColor: 'rgba(1,202,217,.2)',
               // 图例
               legend: {
                   data: ['客运车', '危险品运输车', '网约车', '学生班车']
               },
               series: [{
                       name: '车辆类型统计1',
                       type: 'pie',
                       // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选‘single’,‘multiple’,分别表示单选还是多选
                       selectedMode: 'single',
                       radius: [0, '32%'],
                       // 标签不显示
                       label: {
                           normal: {
                               show: false
                           }
                       },
                       // 标签线不显示
                       labelLine: {
                           normal: {
                               show: false
                           }
                       },
                       data: [{
                               value: 40,
                               name: '客运',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(37,243,230,.1)'
                                   }
                               }
                           },
                           {
                               value: 46,
                               name: '危险品运输',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(255,255,67,.1)'
                                   }
                               }
                           },
                           {
                               value: 54,
                               name: '网约',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(244,111,138,.1)'
                                   }
                               }
                           },
                           {
                               value: 64,
                               name: '学生班',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(0,52,249,.1)'
                                   }
                               }
                           }
                   ]
                       },
                   {
                       name: '车辆类型统计2',
                       type: 'pie',
                       radius: ['43%', '54%'],
                       label: {
                           normal: {
                               show: false
                           }
                       },
                       labelLine: {
                           normal: {
                               show: false
                           }
                       },
                       data: [{
                               value: 40,
                               name: '客运车',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(0,52,249)'
                                   }
                               }
                           },
                           {
                               value: 46,
                               name: '危险品运输车',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(244,111,13)'
                                   }
                               }
                           },
                           {
                               value: 54,
                               name: '网约车',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(255,255,67)'
                                   }
                               }
                           },
                           {
                               value: 64,
                               name: '学生班车',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(37,243,230)'
                                   }
                               }
                           }
                       ]
                   },
                   {
                       name: '车辆类型统计3',
                       type: 'pie',
                       radius: ['42%', '55%'],
                       label: {
                           normal: {
                               show: false
                           }
                       },
                       labelLine: {
                           normal: {
                               show: false
                           }
                       },
                       data: [{
                               value: 40,
                               name: '客运车1',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(37,243,230)'
                                   }
                               }
                           },
                           {
                               value: 46,
                               name: '危险品运输车1',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(255,255,67)'
                                   }
                               }
                           },
                           {
                               value: 54,
                               name: '网约车1',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(244,111,13)'
                                   }
                               }
                           },
                           {
                               value: 64,
                               name: '学生班车1',
                               itemStyle: {
                                   normal: {
                                       color: 'rgba(0,52,249)'
                                   }
                               }
                   }
                               ]
                   }
               ]
           }
           myChart.setOption(option);
       </script>
   </body>
</html>