You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/09/10 02:50:03 UTC

[echarts-examples] 11/15: fix example type errors

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git

commit 0323de64f2b06fcfad05d5c30b858833c7bf5e3f
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Sep 9 11:17:40 2021 +0800

    fix example type errors
---
 .vscode/settings.json                              |  3 +-
 public/examples/ts/bar-label-rotation.ts           | 19 ++++-----
 public/examples/ts/bar-race-country.ts             | 20 ++++++----
 public/examples/ts/bar-rich-text.ts                |  2 +-
 public/examples/ts/bubble-gradient.ts              |  2 +-
 public/examples/ts/candlestick-brush.ts            |  4 +-
 public/examples/ts/candlestick-large.ts            |  2 -
 public/examples/ts/candlestick-sh.ts               |  1 -
 public/examples/ts/candlestick-touch.ts            |  3 +-
 ...acking-with-d3.ts => circle-packing-with-d3.js} | 46 ++++++++--------------
 public/examples/ts/confidence-band.ts              |  2 +-
 public/examples/ts/gauge-car.ts                    | 19 ++++-----
 public/examples/ts/geo-seatmap-flight.ts           |  2 +-
 public/examples/ts/geo-svg-lines.ts                |  2 +-
 public/examples/ts/graph-label-overlap.ts          |  2 +-
 public/examples/ts/line-pen.ts                     |  6 +--
 public/examples/ts/lines-ny.ts                     |  2 +-
 public/examples/ts/pictorialBar-bar-transition.ts  |  8 ++--
 public/examples/ts/sunburst-book.js                | 13 +++++-
 public/examples/ts/sunburst-drink.ts               |  2 +-
 public/examples/ts/tree-basic.ts                   |  5 ++-
 public/examples/ts/tree-orient-right-left.ts       |  5 ++-
 public/examples/types/example.d.ts                 |  1 +
 src/editor/CodeMonaco.vue                          |  1 +
 src/explore/ExampleCard.vue                        |  4 +-
 25 files changed, 87 insertions(+), 89 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index afd540a..41f8b3e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,6 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.tabSize": 2,
-  "editor.detectIndentation": false
+  "editor.detectIndentation": false,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/public/examples/ts/bar-label-rotation.ts b/public/examples/ts/bar-label-rotation.ts
index 97bd265..e236fca 100644
--- a/public/examples/ts/bar-label-rotation.ts
+++ b/public/examples/ts/bar-label-rotation.ts
@@ -59,14 +59,13 @@ app.config = {
   position: 'insideBottom',
   distance: 15,
   onChange: function () {
-    var labelOption = {
-      normal: {
-        rotate: app.config.rotate,
-        align: app.config.align,
-        verticalAlign: app.config.verticalAlign,
-        position: app.config.position,
-        distance: app.config.distance
-      }
+    const labelOption: BarLabelOption = {
+      rotate: app.config.rotate as BarLabelOption['rotate'],
+      align: app.config.align as BarLabelOption['align'],
+      verticalAlign: app.config
+        .verticalAlign as BarLabelOption['verticalAlign'],
+      position: app.config.position as BarLabelOption['position'],
+      distance: app.config.distance as BarLabelOption['distance']
     };
     myChart.setOption<echarts.EChartsOption>({
       series: [
@@ -89,7 +88,7 @@ app.config = {
 
 type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;
 
-const labelOption = {
+const labelOption: BarLabelOption = {
   show: true,
   position: app.config.position as BarLabelOption['position'],
   distance: app.config.distance as BarLabelOption['distance'],
@@ -178,3 +177,5 @@ option = {
     }
   ]
 };
+
+export {};
diff --git a/public/examples/ts/bar-race-country.ts b/public/examples/ts/bar-race-country.ts
index 15d623d..bd9781a 100644
--- a/public/examples/ts/bar-race-country.ts
+++ b/public/examples/ts/bar-race-country.ts
@@ -36,7 +36,11 @@ $.when(
   $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
   $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
 ).done(function (res0, res1) {
-  const flags = res0[0];
+  interface Flag {
+    name: string;
+    emoji: string;
+  }
+  const flags: Flag[] = res0[0];
   const data = res1[0];
   const years: string[] = [];
   for (let i = 0; i < data.length; ++i) {
@@ -74,7 +78,7 @@ $.when(
       }
     },
     dataset: {
-      source: data.slice(1).filter(function (d) {
+      source: data.slice(1).filter(function (d: string[]) {
         return d[4] === startYear;
       })
     },
@@ -85,7 +89,7 @@ $.when(
       axisLabel: {
         show: true,
         fontSize: 14,
-        formatter: function (value: string) {
+        formatter: function (value: any) {
           return value + '{flag|' + getFlag(value) + '}';
         },
         rich: {
@@ -104,8 +108,8 @@ $.when(
         seriesLayoutBy: 'column',
         type: 'bar',
         itemStyle: {
-          color: function (param: any) {
-            return countryColors[param.value[3]] || '#5470c6';
+          color: function (param) {
+            return countryColors[(param.value as number[])[3]] || '#5470c6';
           }
         },
         encode: {
@@ -155,11 +159,11 @@ $.when(
   }
 
   function updateYear(year: string) {
-    let source = data.slice(1).filter(function (d) {
+    let source = data.slice(1).filter(function (d: string[]) {
       return d[4] === year;
     });
-    option.series[0].data = source;
-    option.graphic.elements[0].style.text = year;
+    (option as any).series[0].data = source;
+    (option as any).graphic.elements[0].style.text = year;
     myChart.setOption<echarts.EChartsOption>(option);
   }
 });
diff --git a/public/examples/ts/bar-rich-text.ts b/public/examples/ts/bar-rich-text.ts
index 76fc0e7..5510dab 100644
--- a/public/examples/ts/bar-rich-text.ts
+++ b/public/examples/ts/bar-rich-text.ts
@@ -49,7 +49,7 @@ option = {
     inverse: true,
     data: ['Sunny', 'Cloudy', 'Showers'],
     axisLabel: {
-      formatter: function (value) {
+      formatter: function (value: string) {
         return '{' + value + '| }\n{value|' + value + '}';
       },
       margin: 20,
diff --git a/public/examples/ts/bubble-gradient.ts b/public/examples/ts/bubble-gradient.ts
index fe3294f..704ba51 100644
--- a/public/examples/ts/bubble-gradient.ts
+++ b/public/examples/ts/bubble-gradient.ts
@@ -135,7 +135,7 @@ option = {
         focus: 'series',
         label: {
           show: true,
-          formatter: function (param) {
+          formatter: function (param: any) {
             return param.data[3];
           },
           position: 'top'
diff --git a/public/examples/ts/candlestick-brush.ts b/public/examples/ts/candlestick-brush.ts
index ce07c41..1c5bf64 100644
--- a/public/examples/ts/candlestick-brush.ts
+++ b/public/examples/ts/candlestick-brush.ts
@@ -43,7 +43,7 @@ function calculateMA(dayCount: number, data: { values: number[][] }) {
 $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
   var data = splitData(rawData);
 
-  myChart.setOption<echarts.EChartsOption>(
+  myChart.setOption(
     (option = {
       animation: false,
       legend: {
@@ -134,7 +134,6 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
           boundaryGap: false,
           axisLine: { onZero: false },
           splitLine: { show: false },
-          splitNumber: 20,
           min: 'dataMin',
           max: 'dataMax',
           axisPointer: {
@@ -151,7 +150,6 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
           axisTick: { show: false },
           splitLine: { show: false },
           axisLabel: { show: false },
-          splitNumber: 20,
           min: 'dataMin',
           max: 'dataMax'
         }
diff --git a/public/examples/ts/candlestick-large.ts b/public/examples/ts/candlestick-large.ts
index c36bd0f..97b2800 100644
--- a/public/examples/ts/candlestick-large.ts
+++ b/public/examples/ts/candlestick-large.ts
@@ -54,7 +54,6 @@ option = {
       // inverse: true,
       axisLine: { onZero: false },
       splitLine: { show: false },
-      splitNumber: 20,
       min: 'dataMin',
       max: 'dataMax'
     },
@@ -67,7 +66,6 @@ option = {
       axisTick: { show: false },
       splitLine: { show: false },
       axisLabel: { show: false },
-      splitNumber: 20,
       min: 'dataMin',
       max: 'dataMax'
     }
diff --git a/public/examples/ts/candlestick-sh.ts b/public/examples/ts/candlestick-sh.ts
index 70ca635..09589c5 100644
--- a/public/examples/ts/candlestick-sh.ts
+++ b/public/examples/ts/candlestick-sh.ts
@@ -157,7 +157,6 @@ option = {
     boundaryGap: false,
     axisLine: { onZero: false },
     splitLine: { show: false },
-    splitNumber: 20,
     min: 'dataMin',
     max: 'dataMax'
   },
diff --git a/public/examples/ts/candlestick-touch.ts b/public/examples/ts/candlestick-touch.ts
index fc374d5..d718039 100644
--- a/public/examples/ts/candlestick-touch.ts
+++ b/public/examples/ts/candlestick-touch.ts
@@ -107,7 +107,7 @@ option = {
       boundaryGap: false,
       axisLine: { lineStyle: { color: '#777' } },
       axisLabel: {
-        formatter: function (value) {
+        formatter: function (value: any) {
           return echarts.format.formatTime('MM-dd', value);
         }
       },
@@ -127,7 +127,6 @@ option = {
       axisLabel: { show: false },
       axisTick: { show: false },
       axisLine: { lineStyle: { color: '#777' } },
-      splitNumber: 20,
       min: 'dataMin',
       max: 'dataMax',
       axisPointer: {
diff --git a/public/examples/ts/circle-packing-with-d3.ts b/public/examples/ts/circle-packing-with-d3.js
similarity index 85%
rename from public/examples/ts/circle-packing-with-d3.ts
rename to public/examples/ts/circle-packing-with-d3.js
index 2233550..145d582 100644
--- a/public/examples/ts/circle-packing-with-d3.ts
+++ b/public/examples/ts/circle-packing-with-d3.js
@@ -14,29 +14,16 @@ $.when(
   run(res[0]);
 });
 
-function run(rawData: RawDataNode) {
+function run(rawData) {
   const dataWrap = prepareData(rawData);
   initChart(dataWrap.seriesData, dataWrap.maxDepth);
 }
 
-interface DataItem {
-  id: string;
-  value: number;
-  depth: number;
-  index: number;
-}
-
-type RawDataNode = {
-  [key: string]: RawDataNode;
-} & {
-  $count: number;
-};
-
-function prepareData(rawData: RawDataNode) {
-  const seriesData: DataItem[] = [];
+function prepareData(rawData) {
+  const seriesData = [];
   let maxDepth = 0;
 
-  function convert(source: RawDataNode, basePath: string, depth: number) {
+  function convert(source, basePath, depth) {
     if (source == null) {
       return;
     }
@@ -68,7 +55,7 @@ function prepareData(rawData: RawDataNode) {
   };
 }
 
-function initChart(seriesData: DataItem[], maxDepth: number) {
+function initChart(seriesData, maxDepth) {
   var displayRoot = stratify();
 
   function stratify() {
@@ -98,10 +85,7 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
     });
   }
 
-  const renderItem: echarts.CustomSeriesOption['renderItem'] = function (
-    params,
-    api
-  ) {
+  function renderItem(params, api) {
     var context = params.context;
 
     // Only do that layout once in each time `setOption` called.
@@ -179,7 +163,7 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
         }
       }
     };
-  };
+  }
 
   option = {
     dataset: {
@@ -210,13 +194,13 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
     }
   };
 
-  myChart.setOption<echarts.EChartsOption>(option);
+  myChart.setOption < echarts.EChartsOption > option;
 
   myChart.on('click', { seriesIndex: 0 }, function (params) {
     drillDown(params.data.id);
   });
 
-  function drillDown(targetNodeId?: string) {
+  function drillDown(targetNodeId) {
     displayRoot = stratify();
     if (targetNodeId != null) {
       displayRoot = displayRoot.descendants().find(function (node) {
@@ -226,11 +210,13 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
     // A trick to prevent d3-hierarchy from visiting parents in this algorithm.
     displayRoot.parent = null;
 
-    myChart.setOption<echarts.EChartsOption>({
-      dataset: {
-        source: seriesData
-      }
-    });
+    myChart.setOption <
+      echarts.EChartsOption >
+      {
+        dataset: {
+          source: seriesData
+        }
+      };
   }
 
   // Reset: click on the blank area.
diff --git a/public/examples/ts/confidence-band.ts b/public/examples/ts/confidence-band.ts
index a4bfdbe..0a90b15 100644
--- a/public/examples/ts/confidence-band.ts
+++ b/public/examples/ts/confidence-band.ts
@@ -65,7 +65,7 @@ $.get(
             return item.date;
           }),
           axisLabel: {
-            formatter: function (value, idx) {
+            formatter: function (value: any, idx: number) {
               var date = new Date(value);
               return idx === 0
                 ? value
diff --git a/public/examples/ts/gauge-car.ts b/public/examples/ts/gauge-car.ts
index caf5320..52bbe61 100644
--- a/public/examples/ts/gauge-car.ts
+++ b/public/examples/ts/gauge-car.ts
@@ -110,8 +110,7 @@ option = {
       },
       anchor: {},
       pointer: {
-        icon:
-          'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+        icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
         width: 5,
         length: '40%',
         offsetCenter: [0, '-58%'],
@@ -192,8 +191,7 @@ option = {
       },
       anchor: {},
       pointer: {
-        icon:
-          'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+        icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
         width: 10,
         offsetCenter: [0, '-10%'],
         length: '75%',
@@ -399,7 +397,7 @@ option = {
           if (value === 1) {
             return '4/4';
           }
-          return value;
+          return value + '';
         }
       },
       progress: {
@@ -414,8 +412,7 @@ option = {
         itemStyle: {},
         offsetCenter: ['-22%', '-57%'],
         size: 18,
-        icon:
-          'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888 16.6 [...]
+        icon: 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888  [...]
       },
       pointer: {
         show: false
@@ -488,7 +485,7 @@ option = {
         fontFamily: 'Arial',
         color: '#fff',
         formatter: function (value) {
-          return -value;
+          return -value + '';
         }
       },
       anchor: {
@@ -496,12 +493,10 @@ option = {
         itemStyle: {},
         offsetCenter: [0, '55%'],
         size: 20,
-        icon:
-          'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2,0.4c-0.4,0. [...]
+        icon: 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2,0.4c-0. [...]
       },
       pointer: {
-        icon:
-          'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
         width: 15,
         length: '4',
         offsetCenter: [0, '-90%'],
diff --git a/public/examples/ts/geo-seatmap-flight.ts b/public/examples/ts/geo-seatmap-flight.ts
index ace9be3..681279e 100644
--- a/public/examples/ts/geo-seatmap-flight.ts
+++ b/public/examples/ts/geo-seatmap-flight.ts
@@ -25,7 +25,7 @@ $.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) {
       },
       emphasis: {
         itemStyle: {
-          color: null,
+          color: undefined,
           borderColor: 'green',
           borderWidth: 2
         },
diff --git a/public/examples/ts/geo-svg-lines.ts b/public/examples/ts/geo-svg-lines.ts
index 3b4d8fa..5fbe7b0 100644
--- a/public/examples/ts/geo-svg-lines.ts
+++ b/public/examples/ts/geo-svg-lines.ts
@@ -21,7 +21,7 @@ $.get(
         roam: true,
         emphasis: {
           itemStyle: {
-            color: null
+            color: undefined
           },
           label: {
             show: false
diff --git a/public/examples/ts/graph-label-overlap.ts b/public/examples/ts/graph-label-overlap.ts
index 594238b..5ea835c 100644
--- a/public/examples/ts/graph-label-overlap.ts
+++ b/public/examples/ts/graph-label-overlap.ts
@@ -13,7 +13,7 @@ $.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
     tooltip: {},
     legend: [
       {
-        data: graph.categories.map(function (a) {
+        data: graph.categories.map(function (a: { name: string }) {
           return a.name;
         })
       }
diff --git a/public/examples/ts/line-pen.ts b/public/examples/ts/line-pen.ts
index 5c13995..8c7cb51 100644
--- a/public/examples/ts/line-pen.ts
+++ b/public/examples/ts/line-pen.ts
@@ -19,7 +19,7 @@ option = {
     text: 'Click to Add Points'
   },
   tooltip: {
-    formatter: function (params) {
+    formatter: function (params: any) {
       var data = params.data || [0, 0];
       return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
     }
@@ -55,7 +55,7 @@ option = {
 
 var zr = myChart.getZr();
 
-zr.on('click', function (params) {
+zr.on('click', function (params: any) {
   var pointInPixel = [params.offsetX, params.offsetY];
   var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
 
@@ -73,7 +73,7 @@ zr.on('click', function (params) {
   }
 });
 
-zr.on('mousemove', function (params) {
+zr.on('mousemove', function (params: any) {
   var pointInPixel = [params.offsetX, params.offsetY];
   zr.setCursorStyle(
     myChart.containPixel('grid', pointInPixel) ? 'copy' : 'default'
diff --git a/public/examples/ts/lines-ny.ts b/public/examples/ts/lines-ny.ts
index 501767c..06a9d39 100644
--- a/public/examples/ts/lines-ny.ts
+++ b/public/examples/ts/lines-ny.ts
@@ -9,7 +9,7 @@ var CHUNK_COUNT = 32;
 
 var dataCount = 0;
 
-function fetchData(idx) {
+function fetchData(idx: number) {
   if (idx >= CHUNK_COUNT) {
     return;
   }
diff --git a/public/examples/ts/pictorialBar-bar-transition.ts b/public/examples/ts/pictorialBar-bar-transition.ts
index b56d2e6..6c36f11 100644
--- a/public/examples/ts/pictorialBar-bar-transition.ts
+++ b/public/examples/ts/pictorialBar-bar-transition.ts
@@ -18,7 +18,7 @@ const pathSymbols = {
   car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.47 [...]
 };
 
-const labelSetting: echarts.BarSeriesOption['label'] = {
+const labelSetting: echarts.PictorialBarSeriesOption['label'] = {
   show: true,
   position: 'right',
   offset: [10, 0],
@@ -73,14 +73,14 @@ function makeOption(
       {
         name: '2015',
         id: 'bar1',
-        type: type,
+        type: type as 'pictorialBar',
         label: labelSetting,
         symbolRepeat: true,
         symbolSize: ['80%', '60%'],
         barCategoryGap: '40%',
         universalTransition: {
           enabled: true,
-          delay: function (idx, total) {
+          delay: function (idx: number, total: number) {
             return (idx / total) * 1000;
           }
         },
@@ -110,7 +110,7 @@ function makeOption(
       {
         name: '2016',
         id: 'bar2',
-        type: type,
+        type: type as 'pictorialBar',
         barGap: '10%',
         label: labelSetting,
         symbolRepeat: true,
diff --git a/public/examples/ts/sunburst-book.js b/public/examples/ts/sunburst-book.js
index f66a4e1..ecb24d5 100644
--- a/public/examples/ts/sunburst-book.js
+++ b/public/examples/ts/sunburst-book.js
@@ -396,12 +396,19 @@ option = {
       levels: [
         {},
         {
+          r0: 0,
+          r: 40,
           label: {
             rotate: 0
           }
         },
-        {},
         {
+          r0: 40,
+          r: 105
+        },
+        {
+          r0: 115,
+          r: 140,
           itemStyle: {
             shadowBlur: 2,
             shadowColor: colors[2],
@@ -414,6 +421,8 @@ option = {
           }
         },
         {
+          r0: 140,
+          r: 145,
           itemStyle: {
             shadowBlur: 80,
             shadowColor: colors[0]
@@ -423,7 +432,7 @@ option = {
             textShadowBlur: 5,
             textShadowColor: '#333'
           },
-          blur: {
+          downplay: {
             label: {
               opacity: 0.5
             }
diff --git a/public/examples/ts/sunburst-drink.ts b/public/examples/ts/sunburst-drink.ts
index 75e44c9..c92676a 100644
--- a/public/examples/ts/sunburst-drink.ts
+++ b/public/examples/ts/sunburst-drink.ts
@@ -822,7 +822,7 @@ option = {
 
     data: data,
     radius: [0, '95%'],
-    sort: null,
+    sort: undefined,
 
     emphasis: {
       focus: 'ancestor'
diff --git a/public/examples/ts/tree-basic.ts b/public/examples/ts/tree-basic.ts
index bbc3b03..3843067 100644
--- a/public/examples/ts/tree-basic.ts
+++ b/public/examples/ts/tree-basic.ts
@@ -8,7 +8,10 @@ myChart.showLoading();
 $.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
   myChart.hideLoading();
 
-  data.children.forEach(function (datum, index) {
+  data.children.forEach(function (
+    datum: { collapsed: boolean },
+    index: number
+  ) {
     index % 2 === 0 && (datum.collapsed = true);
   });
 
diff --git a/public/examples/ts/tree-orient-right-left.ts b/public/examples/ts/tree-orient-right-left.ts
index 1bfe37e..2ab6eb4 100644
--- a/public/examples/ts/tree-orient-right-left.ts
+++ b/public/examples/ts/tree-orient-right-left.ts
@@ -8,7 +8,10 @@ myChart.showLoading();
 $.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
   myChart.hideLoading();
 
-  data.children.forEach(function (datum, index) {
+  data.children.forEach(function (
+    datum: { collapsed: boolean },
+    index: number
+  ) {
     index % 2 === 0 && (datum.collapsed = true);
   });
 
diff --git a/public/examples/types/example.d.ts b/public/examples/types/example.d.ts
index d08ff9a..efd4109 100644
--- a/public/examples/types/example.d.ts
+++ b/public/examples/types/example.d.ts
@@ -23,6 +23,7 @@ declare global {
   };
 
   const ecStat: any;
+  const d3: any;
 
   const myChart: echarts.ECharts;
   let option: echarts.EChartsOption;
diff --git a/src/editor/CodeMonaco.vue b/src/editor/CodeMonaco.vue
index 85224a7..7b5a003 100644
--- a/src/editor/CodeMonaco.vue
+++ b/src/editor/CodeMonaco.vue
@@ -73,6 +73,7 @@ declare global {
     };
 
     const ecStat: any;
+    const d3: any;
     const myChart: echarts.ECharts
     let option: echarts.EChartsOption
 
diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue
index 254adc4..ba6de53 100644
--- a/src/explore/ExampleCard.vue
+++ b/src/explore/ExampleCard.vue
@@ -8,7 +8,7 @@
       />
     </a>
     <div>
-      <div class="example-tags">
+      <div class="example-langs">
         <a class="js" :href="exampleLink" target="_blank">JS</a>
         <a class="ts" :href="exampleLink + '&lang=ts'" target="_blank">TS</a>
       </div>
@@ -133,7 +133,7 @@ export default {
     padding-left: 10px;
   }
 
-  .example-tags {
+  .example-langs {
     margin-top: 10px;
     float: right;
 

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org