饼状图

chart/chart.css

@@ -137,3 +137,20 @@ body {
 .global-svg .hover-circle, .hover-line {
   opacity: 0;
 }
+
+
+.flex {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 0;
+    animation: flex-draw 5s ease-in-out;
+    /* -webkit-animation: flex-draw 5s ease-in-out; */
+}
+
+@keyframes flex-draw {
+    from {
+        stroke-dashoffset: 100;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}

chart/chart.md

@@ -109,7 +109,7 @@
       ]
     }
     // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option, 'main');
+    myChart.setOption(option);
   </script>
 </html>
 ```

demo.html

@@ -16,6 +16,11 @@
       <div id = 'tongbar' width = '425' height = '236'></div>
     </div>
 
+    <!-- 饼图 -->
+    <div style = 'width:100%;height:400px;margin-top:100px;margin-left:100px;'>
+      <div id = 'tongpie' width = '425' height = '340'></div>
+    </div>
+
   </body>
   <script type="text/javascript" src = './chart/chart.js'></script>
   <script type="text/javascript">
@@ -132,5 +137,35 @@
       ]
     }
     myChartBar.setOption(optionbar, 'tongbar');
+
+    // 饼图
+    var myChartPie = chart.init(document.getElementById('tongpie'));
+    var optionpie = {
+      series: [
+        {
+          type: 'pie',
+          pieType: 'base', // base: 基础 separate: 分离 annular: 环形
+          data: [
+            {value: 5.6 , color: 'red', name: '1'},
+            {value: 1, color: 'green', name: '2'},
+            {value: 0.8, color: '#953C96', name: '3'},
+            {value: 0.5, color: 'blue', name: '4'},
+            {value: 0.5, color: 'yellow', name: '5'},
+            {value: 3.8, color: 'pink', name: '6'},
+
+            // {value: 1048 , color: 'red', name: '1'},
+            // {value: 735, color: 'green', name: '2'},
+            // {value: 580, color: '#953C96', name: '3'},
+            // {value: 484, color: 'blue', name: '4'},
+            // {value: 300, color: 'yellow', name: '5'},
+          ],
+          style: {
+            width: 180,
+            inWidth: 111,
+          }
+        }
+      ]
+    };
+    myChartPie.setOption(optionpie, 'tongpie');
   </script>
 </html>