fix: standardize formatting and improve code readability in dynamic, simple, and theme examples

Author: tangweikun

docs/examples/dynamic.md

@@ -13,68 +13,88 @@ import cloneDeep from 'lodash.clonedeep';
 const Page: React.FC = () => {
   const DEFAULT_OPTION = {
     title: {
-      text:'Hello Echarts-for-react.',
+      text: 'Hello Echarts-for-react.',
     },
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
     },
     legend: {
-      data:['最新成交价', '预购队列']
+      data: ['最新成交价', '预购队列'],
     },
     toolbox: {
       show: true,
       feature: {
-        dataView: {readOnly: false},
+        dataView: { readOnly: false },
         restore: {},
-        saveAsImage: {}
-      }
+        saveAsImage: {},
+      },
     },
     grid: {
       top: 60,
       left: 30,
       right: 60,
-      bottom:30
+      bottom: 90,
     },
     dataZoom: {
       show: false,
       start: 0,
-      end: 100
+      end: 100,
     },
     visualMap: {
       show: false,
       min: 0,
       max: 1000,
-      color: ['#BE002F', '#F20C00', '#F00056', '#FF2D51', '#FF2121', '#FF4C00', '#FF7500',
-        '#FF8936', '#FFA400', '#F0C239', '#FFF143', '#FAFF72', '#C9DD22', '#AFDD22',
-        '#9ED900', '#00E500', '#0EB83A', '#0AA344', '#0C8918', '#057748', '#177CB0']
+      color: [
+        '#BE002F',
+        '#F20C00',
+        '#F00056',
+        '#FF2D51',
+        '#FF2121',
+        '#FF4C00',
+        '#FF7500',
+        '#FF8936',
+        '#FFA400',
+        '#F0C239',
+        '#FFF143',
+        '#FAFF72',
+        '#C9DD22',
+        '#AFDD22',
+        '#9ED900',
+        '#00E500',
+        '#0EB83A',
+        '#0AA344',
+        '#0C8918',
+        '#057748',
+        '#177CB0',
+      ],
     },
     xAxis: [
       {
         type: 'category',
         boundaryGap: true,
-        data: (function (){
+        data: (function () {
           let now = new Date();
           let res = [];
           let len = 50;
           while (len--) {
-            res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
+            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
             now = new Date(now - 2000);
           }
           return res;
-        })()
+        })(),
       },
       {
         type: 'category',
         boundaryGap: true,
-        data: (function (){
+        data: (function () {
           let res = [];
           let len = 50;
           while (len--) {
             res.push(50 - len + 1);
           }
           return res;
-        })()
-      }
+        })(),
+      },
     ],
     yAxis: [
       {
@@ -83,27 +103,27 @@ const Page: React.FC = () => {
         name: '价格',
         max: 20,
         min: 0,
-        boundaryGap: [0.2, 0.2]
+        boundaryGap: [0.2, 0.2],
       },
       {
         type: 'value',
         scale: true,
         name: '预购量',
         max: 1200,
         min: 0,
-        boundaryGap: [0.2, 0.2]
-      }
+        boundaryGap: [0.2, 0.2],
+      },
     ],
     series: [
       {
-        name:'预购队列',
-        type:'bar',
+        name: '预购队列',
+        type: 'bar',
         xAxisIndex: 1,
         yAxisIndex: 1,
         itemStyle: {
           normal: {
             barBorderRadius: 4,
-          }
+          },
         },
         animationEasing: 'elasticOut',
         animationDelay: function (idx) {
@@ -112,37 +132,37 @@ const Page: React.FC = () => {
         animationDelayUpdate: function (idx) {
           return idx * 10;
         },
-        data:(function (){
+        data: (function () {
           let res = [];
           let len = 50;
           while (len--) {
             res.push(Math.round(Math.random() * 1000));
           }
           return res;
-        })()
+        })(),
       },
       {
-        name:'最新成交价',
-        type:'line',
-        data:(function (){
+        name: '最新成交价',
+        type: 'line',
+        data: (function () {
           let res = [];
           let len = 0;
           while (len < 50) {
-            res.push((Math.random()*10 + 5).toFixed(1) - 0);
+            res.push((Math.random() * 10 + 5).toFixed(1) - 0);
             len++;
           }
           return res;
-        })()
-      }
-    ]
+        })(),
+      },
+    ],
   };
 
   let count;
 
   const [option, setOption] = useState(DEFAULT_OPTION);
 
   function fetchNewData() {
-    const axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
+    const axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
     const newOption = cloneDeep(option); // immutable
     newOption.title.text = 'Hello Echarts-for-react.' + new Date().getSeconds();
     const data0 = newOption.series[0].data;
@@ -168,10 +188,7 @@ const Page: React.FC = () => {
     return () => clearInterval(timer);
   });
 
-  return <ReactECharts
-    option={option}
-    style={{ height: 400 }}
-  />;
+  return <ReactECharts option={option} style={{ height: 400 }} />;
 };
 
 export default Page;

docs/examples/simple.md

@@ -12,66 +12,63 @@ import ReactECharts from 'echarts-for-react';
 const Page: React.FC = () => {
   const option = {
     title: {
-      text: '堆叠区域图'
+      text: '堆叠区域图',
     },
-    tooltip : {
-      trigger: 'axis'
+    tooltip: {
+      trigger: 'axis',
     },
     legend: {
-      data:['邮件营销','联盟广告','视频广告']
+      data: ['邮件营销', '联盟广告', '视频广告'],
     },
     toolbox: {
       feature: {
-        saveAsImage: {}
-      }
+        saveAsImage: {},
+      },
     },
     grid: {
       left: '3%',
       right: '4%',
-      bottom: '3%',
-      containLabel: true
+      bottom: '15%',
+      containLabel: true,
     },
-    xAxis : [
+    xAxis: [
       {
-        type : 'category',
-        boundaryGap : false,
-        data : ['周一','周二','周三','周四','周五','周六','周日']
-      }
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      },
     ],
-    yAxis : [
+    yAxis: [
       {
-        type : 'value'
-      }
+        type: 'value',
+      },
     ],
-    series : [
+    series: [
       {
-        name:'邮件营销',
-        type:'line',
+        name: '邮件营销',
+        type: 'line',
         stack: '总量',
-        areaStyle: {normal: {}},
-        data:[120, 132, 101, 134, 90, 230, 210]
+        areaStyle: { normal: {} },
+        data: [120, 132, 101, 134, 90, 230, 210],
       },
       {
-        name:'联盟广告',
-        type:'line',
+        name: '联盟广告',
+        type: 'line',
         stack: '总量',
-        areaStyle: {normal: {}},
-        data:[220, 182, 191, 234, 290, 330, 310]
+        areaStyle: { normal: {} },
+        data: [220, 182, 191, 234, 290, 330, 310],
       },
       {
-        name:'视频广告',
-        type:'line',
+        name: '视频广告',
+        type: 'line',
         stack: '总量',
-        areaStyle: {normal: {}},
-        data:[150, 232, 201, 154, 190, 330, 410]
-      }
-    ]
+        areaStyle: { normal: {} },
+        data: [150, 232, 201, 154, 190, 330, 410],
+      },
+    ],
   };
 
-  return <ReactECharts
-    option={option}
-    style={{ height: 400 }}
-  />;
+  return <ReactECharts option={option} style={{ height: 400 }} />;
 };
 
 export default Page;