diff --git a/packages/site/examples/pie/donut/demo/donut.jsx b/packages/site/examples/pie/donut/demo/donut.jsx
index 45aa49d52..65c4497ca 100644
--- a/packages/site/examples/pie/donut/demo/donut.jsx
+++ b/packages/site/examples/pie/donut/demo/donut.jsx
@@ -20,7 +20,10 @@ const data = [
 ];
 
 const context = document.getElementById('container').getContext('2d');
-
+const map = {};
+data.forEach(function(obj) {
+  map[obj.name] = obj.percent + '%';
+});
 const { props } = (
   <Canvas context={context} pixelRatio={window.devicePixelRatio} theme={{ padding: [20, 'auto'] }}>
     <Chart
@@ -50,8 +53,8 @@ const { props } = (
       />
       <Legend
         position="right"
-        itemFormatter={(val) => {
-          return val + '    ' + map[val];
+        itemFormatter={(val,name) => {
+          return map[name];
         }}
       />
     </Chart>
diff --git a/packages/site/examples/pie/donut/demo/progress-bar.jsx b/packages/site/examples/pie/donut/demo/progress-bar.jsx
index 29110c193..74c64ea7f 100644
--- a/packages/site/examples/pie/donut/demo/progress-bar.jsx
+++ b/packages/site/examples/pie/donut/demo/progress-bar.jsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Canvas, Chart, Interval, TextGuide, ArcGuide } from '@antv/f2';
+import { jsx, Canvas, Chart, Interval, TextGuide, ArcGuide } from '@antv/f2';
 
 const data = [
   {