echarts-next-for-react - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

.umirc.ts

@@ -6,7 +6,10 @@ import { defineConfig } from 'dumi';
   favicon: 'https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1',
-  logo: 'https://raw.githubusercontent.com/BigFaceMaster/echarts-next-for-react/master/docs/assets/logo.png',
+  logo:
+    'https://raw.githubusercontent.com/BigFaceMaster/echarts-next-for-react/master/docs/assets/logo.png',
   outputPath: 'docs-dist',
   // more config: https://d.umijs.org/config
-  locales: [['en-US', 'English'], ['zh-CN', '中文']]
-
+  locales: [
+    ['en-US', 'English'],
+    ['zh-CN', '中文'],
+  ],
 });

docs/bar.md

 # Bar
 
 ## Simple
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
-        data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar'
-      }],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## Polar
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      angleAxis: {
-      },
-      radiusAxis: {
-        type: 'category',
-        data: ['周一', '周二', '周三', '周四'],
-        z: 10
-      },
-      polar: {
-      },
-      series: [{
+  const option = {
+    angleAxis: {},
+    radiusAxis: {
+      type: 'category',
+      data: ['周一', '周二', '周三', '周四'],
+      z: 10,
+    },
+    polar: {},
+    series: [
+      {
         type: 'bar',
@@ -48,4 +51,5 @@ data: [1, 2, 3, 4],
         name: 'A',
-        stack: 'a'
-      }, {
+        stack: 'a',
+      },
+      {
         type: 'bar',
@@ -55,4 +59,5 @@ data: [2, 4, 6, 8],
         name: 'B',
-        stack: 'a'
-      }, {
+        stack: 'a',
+      },
+      {
         type: 'bar',
@@ -62,15 +67,17 @@ data: [1, 2, 3, 4],
         name: 'C',
-        stack: 'a'
-      }],
-      legend: {
-        show: true,
-        data: ['A', 'B', 'C']
+        stack: 'a',
       },
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+    ],
+    legend: {
+      show: true,
+      data: ['A', 'B', 'C'],
+    },
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## More
+
 See [Apache Echarts Demo](https://echarts.apache.org/examples/en/index.html#chart-type-bar)

docs/bar.zh-CN.md

 # 柱状图
 
 ## Simple
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
-        data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar'
-      }],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## Polar
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      angleAxis: {
-      },
-      radiusAxis: {
-        type: 'category',
-        data: ['周一', '周二', '周三', '周四'],
-        z: 10
-      },
-      polar: {
-      },
-      series: [{
+  const option = {
+    angleAxis: {},
+    radiusAxis: {
+      type: 'category',
+      data: ['周一', '周二', '周三', '周四'],
+      z: 10,
+    },
+    polar: {},
+    series: [
+      {
         type: 'bar',
@@ -48,4 +51,5 @@ data: [1, 2, 3, 4],
         name: 'A',
-        stack: 'a'
-      }, {
+        stack: 'a',
+      },
+      {
         type: 'bar',
@@ -55,4 +59,5 @@ data: [2, 4, 6, 8],
         name: 'B',
-        stack: 'a'
-      }, {
+        stack: 'a',
+      },
+      {
         type: 'bar',
@@ -62,15 +67,17 @@ data: [1, 2, 3, 4],
         name: 'C',
-        stack: 'a'
-      }],
-      legend: {
-        show: true,
-        data: ['A', 'B', 'C']
+        stack: 'a',
       },
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+    ],
+    legend: {
+      show: true,
+      data: ['A', 'B', 'C'],
+    },
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## More
+
 See [Apache Echarts Demo](https://echarts.apache.org/examples/en/index.html#chart-type-bar)

docs/index.md

@@ -6,6 +6,9 @@ # Readme
 # 1. install
+
 ```sh
 npm install echarts-next-for-react -s
 ```
+
 Or
+
 ```sh
@@ -22,2 +25,1 @@ yarn add echarts-next-for-react
 MIT
-

docs/index.zh-CN.md

@@ -6,6 +6,9 @@ # 使用说明
 # 1. 安装
+
 ```sh
 npm install echarts-next-for-react -s
 ```
+
 Or
+
 ```sh
@@ -12,0 +15,0 @@ yarn add echarts-next-for-react

docs/line.md

 # Line
 
+## Basic Line
 
-## Basic Line
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line'
-      }],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## Area Line
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
+  const option = {
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'line',
-        areaStyle: {}
-      }],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+        areaStyle: {},
+      },
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## Large scale area chart
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 import { graphic } from 'echarts';
@@ -68,44 +74,47 @@
   for (let i = 1; i < 20000; i++) {
-    const now = new Date(base += oneDay);
+    const now = new Date((base += oneDay));
     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
   }
-    
-    const option = {
-      tooltip: {
-        trigger: 'axis',
-        position: function (pt) {
-          return [pt[0], '10%'];
-        }
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      position: function (pt) {
+        return [pt[0], '10%'];
       },
-      title: {
-        left: 'center',
-        text: '大数据量面积图',
+    },
+    title: {
+      left: 'center',
+      text: '大数据量面积图',
+    },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none',
+        },
+        restore: {},
+        saveAsImage: {},
       },
-      toolbox: {
-        feature: {
-          dataZoom: {
-            yAxisIndex: 'none'
-          },
-          restore: {},
-          saveAsImage: {}
-        }
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: date
-      },
-      yAxis: {
-        type: 'value',
-        boundaryGap: [0, '100%']
-      },
-      dataZoom: [{
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: date,
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    dataZoom: [
+      {
         type: 'inside',
         start: 0,
-        end: 10
-      }, {
+        end: 10,
+      },
+      {
         start: 0,
         end: 10,
-        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+        handleIcon:
+          'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
         handleSize: '80%',
@@ -117,31 +126,35 @@ handleStyle: {
           shadowOffsetX: 2,
-          shadowOffsetY: 2
-        }
-      }],
-      series: [
-        {
-          name: '模拟数据',
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          sampling: 'average',
-          itemStyle: {
-            color: 'rgb(255, 70, 131)'
-          },
-          areaStyle: {
-            color: graphic.LinearGradient(0, 0, 0, 1, [{
+          shadowOffsetY: 2,
+        },
+      },
+    ],
+    series: [
+      {
+        name: '模拟数据',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        sampling: 'average',
+        itemStyle: {
+          color: 'rgb(255, 70, 131)',
+        },
+        areaStyle: {
+          color: graphic.LinearGradient(0, 0, 0, 1, [
+            {
               offset: 0,
-              color: 'rgb(255, 158, 68)'
-            }, {
+              color: 'rgb(255, 158, 68)',
+            },
+            {
               offset: 1,
-              color: 'rgb(255, 70, 131)'
-            }])
-          },
-          data: data
-        }
-      ]
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+              color: 'rgb(255, 70, 131)',
+            },
+          ]),
+        },
+        data: data,
+      },
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
@@ -148,0 +161,0 @@

docs/line.zh-CN.md

 # 折线图
 
 ## Basic Line
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line'
-      }],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## Area Line
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
+  const option = {
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: 'line',
-        areaStyle: {}
-      }],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+        areaStyle: {},
+      },
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
 
 ## Large scale area chart
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 import { graphic } from 'echarts';
@@ -67,44 +74,47 @@
   for (let i = 1; i < 20000; i++) {
-    const now = new Date(base += oneDay);
+    const now = new Date((base += oneDay));
     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
   }
-    
-    const option = {
-      tooltip: {
-        trigger: 'axis',
-        position: function (pt) {
-          return [pt[0], '10%'];
-        }
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      position: function (pt) {
+        return [pt[0], '10%'];
       },
-      title: {
-        left: 'center',
-        text: '大数据量面积图',
+    },
+    title: {
+      left: 'center',
+      text: '大数据量面积图',
+    },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none',
+        },
+        restore: {},
+        saveAsImage: {},
       },
-      toolbox: {
-        feature: {
-          dataZoom: {
-            yAxisIndex: 'none'
-          },
-          restore: {},
-          saveAsImage: {}
-        }
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: date
-      },
-      yAxis: {
-        type: 'value',
-        boundaryGap: [0, '100%']
-      },
-      dataZoom: [{
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: date,
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    dataZoom: [
+      {
         type: 'inside',
         start: 0,
-        end: 10
-      }, {
+        end: 10,
+      },
+      {
         start: 0,
         end: 10,
-        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+        handleIcon:
+          'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
         handleSize: '80%',
@@ -116,31 +126,35 @@ handleStyle: {
           shadowOffsetX: 2,
-          shadowOffsetY: 2
-        }
-      }],
-      series: [
-        {
-          name: '模拟数据',
-          type: 'line',
-          smooth: true,
-          symbol: 'none',
-          sampling: 'average',
-          itemStyle: {
-            color: 'rgb(255, 70, 131)'
-          },
-          areaStyle: {
-            color: graphic.LinearGradient(0, 0, 0, 1, [{
+          shadowOffsetY: 2,
+        },
+      },
+    ],
+    series: [
+      {
+        name: '模拟数据',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        sampling: 'average',
+        itemStyle: {
+          color: 'rgb(255, 70, 131)',
+        },
+        areaStyle: {
+          color: graphic.LinearGradient(0, 0, 0, 1, [
+            {
               offset: 0,
-              color: 'rgb(255, 158, 68)'
-            }, {
+              color: 'rgb(255, 158, 68)',
+            },
+            {
               offset: 1,
-              color: 'rgb(255, 70, 131)'
-            }])
-          },
-          data: data
-        }
-      ]
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+              color: 'rgb(255, 70, 131)',
+            },
+          ]),
+        },
+        data: data,
+      },
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```
@@ -147,0 +161,0 @@

docs/Pie.md

@@ -7,182 +7,199 @@ # Pie
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-  const data = [{
-    name: 'Apples',
-    value: 70
-  }, {
-    name: 'Strawberries',
-    value: 68
-  }, {
-    name: 'Bananas',
-    value: 48
-  }, {
-    name: 'Oranges',
-    value: 40
-  }, {
-    name: 'Pears',
-    value: 32
-  }, {
-    name: 'Pineapples',
-    value: 27
-  }, {
-    name: 'Grapes',
-    value: 18
-  }];
+  const data = [
+    {
+      name: 'Apples',
+      value: 70,
+    },
+    {
+      name: 'Strawberries',
+      value: 68,
+    },
+    {
+      name: 'Bananas',
+      value: 48,
+    },
+    {
+      name: 'Oranges',
+      value: 40,
+    },
+    {
+      name: 'Pears',
+      value: 32,
+    },
+    {
+      name: 'Pineapples',
+      value: 27,
+    },
+    {
+      name: 'Grapes',
+      value: 18,
+    },
+  ];
 
   const option = {
-    title: [{
-      text: 'Pie label alignTo'
-    }, {
-      subtext: 'alignTo: "none" (default)',
-      left: '16.67%',
-      top: '75%',
-      textAlign: 'center'
-    }, {
-      subtext: 'alignTo: "labelLine"',
-      left: '50%',
-      top: '75%',
-      textAlign: 'center'
-    }, {
-      subtext: 'alignTo: "edge"',
-      left: '83.33%',
-      top: '75%',
-      textAlign: 'center'
-    }],
-    series: [{
-      type: 'pie',
-      radius: '25%',
-      center: ['50%', '50%'],
-      data: data,
-      animation: false,
-      label: {
-        position: 'outer',
-        alignTo: 'none',
-        bleedMargin: 5
+    title: [
+      {
+        text: 'Pie label alignTo',
       },
-      left: 0,
-      right: '66.6667%',
-      top: 0,
-      bottom: 0
-    }, {
-      type: 'pie',
-      radius: '25%',
-      center: ['50%', '50%'],
-      data: data,
-      animation: false,
-      label: {
-        position: 'outer',
-        alignTo: 'labelLine',
-        bleedMargin: 5
+      {
+        subtext: 'alignTo: "none" (default)',
+        left: '16.67%',
+        top: '75%',
+        textAlign: 'center',
       },
-      left: '33.3333%',
-      right: '33.3333%',
-      top: 0,
-      bottom: 0
-    }, {
-      type: 'pie',
-      radius: '25%',
-      center: ['50%', '50%'],
-      data: data,
-      animation: false,
-      label: {
-        position: 'outer',
-        alignTo: 'edge',
-        margin: 20
+      {
+        subtext: 'alignTo: "labelLine"',
+        left: '50%',
+        top: '75%',
+        textAlign: 'center',
       },
-      left: '66.6667%',
-      right: 0,
-      top: 0,
-      bottom: 0
-    }],
+      {
+        subtext: 'alignTo: "edge"',
+        left: '83.33%',
+        top: '75%',
+        textAlign: 'center',
+      },
+    ],
+    series: [
+      {
+        type: 'pie',
+        radius: '25%',
+        center: ['50%', '50%'],
+        data: data,
+        animation: false,
+        label: {
+          position: 'outer',
+          alignTo: 'none',
+          bleedMargin: 5,
+        },
+        left: 0,
+        right: '66.6667%',
+        top: 0,
+        bottom: 0,
+      },
+      {
+        type: 'pie',
+        radius: '25%',
+        center: ['50%', '50%'],
+        data: data,
+        animation: false,
+        label: {
+          position: 'outer',
+          alignTo: 'labelLine',
+          bleedMargin: 5,
+        },
+        left: '33.3333%',
+        right: '33.3333%',
+        top: 0,
+        bottom: 0,
+      },
+      {
+        type: 'pie',
+        radius: '25%',
+        center: ['50%', '50%'],
+        data: data,
+        animation: false,
+        label: {
+          position: 'outer',
+          alignTo: 'edge',
+          margin: 20,
+        },
+        left: '66.6667%',
+        right: 0,
+        top: 0,
+        bottom: 0,
+      },
+    ],
   };
 
-
   return <EChartsNextForReactCore option={option} />;
-}
+};
 ```
 
-## Pie Rose Type 
+## Pie Rose Type
+
 ```tsx
 import React from 'react';
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 export default () => {
-    const option = {
-      title: {
-        text: '南丁格尔玫瑰图',
-        subtext: '纯属虚构',
-        left: 'center'
+  const option = {
+    title: {
+      text: '南丁格尔玫瑰图',
+      subtext: '纯属虚构',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      left: 'center',
+      top: 'bottom',
+      data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'],
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        mark: { show: true },
+        dataView: { show: true, readOnly: false },
+        magicType: {
+          show: true,
+          type: ['pie', 'funnel'],
+        },
+        restore: { show: true },
+        saveAsImage: { show: true },
       },
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)'
-      },
-      legend: {
-        left: 'center',
-        top: 'bottom',
-        data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
-      },
-      toolbox: {
-        show: true,
-        feature: {
-          mark: {show: true},
-          dataView: {show: true, readOnly: false},
-          magicType: {
+    },
+    series: [
+      {
+        name: '半径模式',
+        type: 'pie',
+        radius: [20, 110],
+        center: ['25%', '50%'],
+        roseType: 'radius',
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
             show: true,
-            type: ['pie', 'funnel']
           },
-          restore: {show: true},
-          saveAsImage: {show: true}
-        }
+        },
+        data: [
+          { value: 10, name: 'rose1' },
+          { value: 5, name: 'rose2' },
+          { value: 15, name: 'rose3' },
+          { value: 25, name: 'rose4' },
+          { value: 20, name: 'rose5' },
+          { value: 35, name: 'rose6' },
+          { value: 30, name: 'rose7' },
+          { value: 40, name: 'rose8' },
+        ],
       },
-      series: [
-        {
-          name: '半径模式',
-          type: 'pie',
-          radius: [20, 110],
-          center: ['25%', '50%'],
-          roseType: 'radius',
-          label: {
-            show: false
-          },
-          emphasis: {
-            label: {
-              show: true
-            }
-          },
-          data: [
-            {value: 10, name: 'rose1'},
-            {value: 5, name: 'rose2'},
-            {value: 15, name: 'rose3'},
-            {value: 25, name: 'rose4'},
-            {value: 20, name: 'rose5'},
-            {value: 35, name: 'rose6'},
-            {value: 30, name: 'rose7'},
-            {value: 40, name: 'rose8'}
-          ]
-        },
-        {
-          name: '面积模式',
-          type: 'pie',
-          radius: [30, 110],
-          center: ['75%', '50%'],
-          roseType: 'area',
-          data: [
-            {value: 10, name: 'rose1'},
-            {value: 5, name: 'rose2'},
-            {value: 15, name: 'rose3'},
-            {value: 25, name: 'rose4'},
-            {value: 20, name: 'rose5'},
-            {value: 35, name: 'rose6'},
-            {value: 30, name: 'rose7'},
-            {value: 40, name: 'rose8'}
-          ],
-        },
-      ],
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
-}
+      {
+        name: '面积模式',
+        type: 'pie',
+        radius: [30, 110],
+        center: ['75%', '50%'],
+        roseType: 'area',
+        data: [
+          { value: 10, name: 'rose1' },
+          { value: 5, name: 'rose2' },
+          { value: 15, name: 'rose3' },
+          { value: 25, name: 'rose4' },
+          { value: 20, name: 'rose5' },
+          { value: 35, name: 'rose6' },
+          { value: 30, name: 'rose7' },
+          { value: 40, name: 'rose8' },
+        ],
+      },
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
+};
 ```

package.json

 {
   "name": "echarts-next-for-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Echarts(v5.x | next) components for react.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -9,7 +9,12 @@ # echarts-next-for-react
 
-# 1. install 
+> Refer to the [echarts-for-react](https://github.com/hustcc/echarts-for-react)
+
+# 1. install
+
 ```sh
 npm install echarts-next-for-react -s
 ```
+
 Or
+
 ```sh
@@ -22,20 +27,22 @@ yarn add echarts-next-for-react
 ```tsx
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 const demo = () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line'
-      }]
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
 };
@@ -42,0 +49,0 @@

README.zh-CN.md

@@ -7,7 +7,12 @@ # echarts-next-for-react
 
+> 参考借鉴 [echarts-for-react](https://github.com/hustcc/echarts-for-react)
+
 # 1. 安装
+
 ```sh
 npm install echarts-next-for-react -s
 ```
+
 Or
+
 ```sh
@@ -20,20 +25,22 @@ yarn add echarts-next-for-react
 ```tsx
-import EChartsNextForReactCore from "echarts-next-for-react";
+import EChartsNextForReactCore from 'echarts-next-for-react';
 
 const demo = () => {
-    const option = {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [{
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line'
-      }]
-    };
-    
-    return <EChartsNextForReactCore option={option} />;
+    ],
+  };
+
+  return <EChartsNextForReactCore option={option} />;
 };
@@ -40,0 +47,0 @@

No alert changes

Improved metrics

Total package byte prevSize

61388

increased by1.91%

Number of package files

32

increased by6.67%

Lines of code

682

increased by0.59%

Number of lines in readme file

58

increased by13.73%

No dependency changes