Echarts图表之圆形进度条(四)

2023-11-21 21:33:40

<!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 e = 80;
           var option = {
               color: ['#2E7DFF', '#ccc'],
               backgroundColor: 'rgba(1,202,217,.2)',
               // 标题
               title: {
                   show: true,
                   text: e + '%',
                   x: 'center',
                   y: 'center',
                   textStyle: {
                       fontSize: '15',
                       color: '#000',
                       fontWeight: 'normal'
                   }
               },
               // 提示框
               tooltip: {
                   trigger: 'item',
                   formatter: '{e}%',
                   show: false
               },
               // 图例不显示
               legend: {
                   orient: 'vertical',
                   x: 'left',
                   show: false
               },
               series: {
                   naem: '',
                   // 类型：饼图
                   type: 'pie',
                   radius: ['35%', '45%'],
                   avoidLabelOverLap: true,
                   hoverAnimation: false,
                   // 标签不显示
                   label: {
                       normal: {
                           show: false,
                           position: 'center'
                       },
                       emphasis: {
                           show: false
                       }
                   },
                   // 标签线不显示
                   labelLine: {
                       normal: {
                           show: false
                       }
                   },
                   data: [{
                           value: e,
                           name: ''
                       },
                       {
                           value: 100 - e,
                           name: ''
                       }
                   ]
               }
           }
           myChart.setOption(option);
       </script>
   </body>
</html>

码农公寓

相关文章