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/04 12:53:04 UTC
[echarts-examples] branch gh-pages updated: WIP: update more
examples to ts
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new d759480 WIP: update more examples to ts
d759480 is described below
commit d7594801837ac17c6f46dbdf1c4cc6cbac5122e6
Author: pissang <bm...@gmail.com>
AuthorDate: Sat Sep 4 20:52:25 2021 +0800
WIP: update more examples to ts
---
public/examples/ts/pictorialBar-hill.ts | 114 ++
public/examples/ts/pictorialBar-spirit.ts | 114 ++
public/examples/ts/pictorialBar-vehicle.ts | 112 ++
public/examples/ts/pictorialBar-velocity.ts | 102 ++
public/examples/ts/pie-alignTo.ts | 97 ++
public/examples/ts/pie-borderRadius.ts | 52 +
public/examples/ts/pie-custom.ts | 72 ++
public/examples/ts/pie-doughnut.ts | 46 +
public/examples/ts/pie-labelLine-adjust.ts | 97 ++
public/examples/ts/pie-legend.ts | 82 ++
public/examples/ts/pie-nest.ts | 89 ++
public/examples/ts/pie-parliament-transition.ts | 150 +++
public/examples/ts/pie-pattern.ts | 62 +
public/examples/ts/pie-rich-text.ts | 137 +++
public/examples/ts/pie-roseType-simple.ts | 46 +
public/examples/ts/pie-roseType.ts | 84 ++
public/examples/ts/pie-simple.ts | 44 +
public/examples/ts/polar-roundCap.ts | 51 +
public/examples/ts/radar-aqi.ts | 211 ++++
public/examples/ts/radar-custom.ts | 133 ++
public/examples/ts/radar-multiple.ts | 99 ++
public/examples/ts/radar.ts | 41 +
public/examples/ts/radar2.ts | 74 ++
public/examples/ts/sankey-energy.ts | 37 +
public/examples/ts/sankey-itemstyle.ts | 1283 ++++++++++++++++++++
public/examples/ts/sankey-levels.ts | 72 ++
public/examples/ts/sankey-nodeAlign-left.ts | 38 +
public/examples/ts/sankey-nodeAlign-right.ts | 40 +
public/examples/ts/sankey-simple.ts | 56 +
public/examples/ts/sankey-vertical.ts | 49 +
public/examples/ts/scatter-aggregate-bar.ts | 189 +++
public/examples/ts/scatter-anscombe-quartet.ts | 147 +++
public/examples/ts/scatter-aqi-color.ts | 262 ++++
public/examples/ts/scatter-clustering.ts | 133 ++
public/examples/ts/scatter-effect.ts | 80 ++
.../examples/ts/scatter-exponential-regression.ts | 86 ++
public/examples/ts/scatter-label-align-right.ts | 58 +
public/examples/ts/scatter-label-align-top.ts | 53 +
public/examples/ts/scatter-large.ts | 72 ++
public/examples/ts/scatter-linear-regression.ts | 269 ++++
.../examples/ts/scatter-logarithmic-regression.ts | 135 ++
public/examples/ts/scatter-map-brush.ts | 647 ++++++++++
public/examples/ts/scatter-matrix.ts | 302 +++++
src/common/store.js | 2 +-
44 files changed, 6118 insertions(+), 1 deletion(-)
diff --git a/public/examples/ts/pictorialBar-hill.ts b/public/examples/ts/pictorialBar-hill.ts
new file mode 100644
index 0000000..1a66e97
--- /dev/null
+++ b/public/examples/ts/pictorialBar-hill.ts
@@ -0,0 +1,114 @@
+/*
+title: Wish List and Mountain Height
+category: pictorialBar
+titleCN: 圣诞愿望清单和山峰高度
+videoStart: 0
+videoEnd: 2000
+*/
+
+var paperDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAAyCAYAAACgRRKpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB6FJREFUeNrsnE9y2zYYxUmRkig7spVdpx3Hdqb7ZNeFO2PdoD1Cj9DeoEdKbmDPeNFNW7lu0y7tRZvsYqfjWhL/qPgggoIggABIQKQkwsOhE5sQCfzw3uNHJu5sNnOaZq29RttolwfAbxgwChO9nad//4C2C7S9Sfe3uzQobqNghdoJBdIw3R8qHnvNANcA1sBUGCaV9pYC7rYBbLvbgAFpaBgmWbujlO1NA9h2wQTbcdHOoih2ZujLa7WcFtoMtUsKuFEDWL3bkAHq2GTnT+OJkyTzsXRd1/G8FoYN9vBnQ+pGZ7f7BrDqYSLbq6IdxXGM96 [...]
+
+option = {
+ backgroundColor: '#0f375f',
+ tooltip: {},
+ legend: {
+ textStyle: {color: '#ddd'}
+ },
+ xAxis: [{
+ data: ['Christmas Wish List', '', 'Qomolangma', 'Kilimanjaro'],
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {
+ margin: 20,
+ color: '#ddd',
+ fontSize: 14
+ }
+ }],
+ yAxis: {
+ splitLine: {show: false},
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {show: false}
+ },
+ markLine: {
+ z: -1
+ },
+ animationEasing: 'elasticOut',
+ series: [{
+ type: 'pictorialBar',
+ name: 'All',
+ emphasis: {
+ scale: true
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: '{c} m',
+ fontSize: 16,
+ color: '#e54035'
+ },
+ data: [{
+ value: 13000,
+ symbol: 'image://' + paperDataURI,
+ symbolRepeat: true,
+ symbolSize: ['130%', '20%'],
+ symbolOffset: [0, 10],
+ symbolMargin: '-30%',
+ animationDelay: function (dataIndex, params: any) {
+ return params.index * 30;
+ }
+ }, {
+ value: '-',
+ symbol: 'none',
+ }, {
+ value: 8844,
+ symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Qomolangma.png',
+ symbolSize: ['200%', '105%'],
+ symbolPosition: 'end',
+ z: 10
+ }, {
+ value: 5895,
+ symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Kilimanjaro.png',
+ symbolSize: ['200%', '105%'],
+ symbolPosition: 'end'
+ }],
+ markLine: {
+ symbol: ['none', 'none'],
+ label: {
+ show: false
+ },
+ lineStyle: {
+ color: '#e54035',
+ width: 2
+ },
+ data: [{
+ yAxis: 8844
+ }]
+ }
+ }, {
+ name: 'All',
+ type: 'pictorialBar',
+ barGap: '-100%',
+ symbol: 'circle',
+ itemStyle: {
+ color: '#185491'
+ },
+ silent: true,
+ symbolOffset: [0, '50%'],
+ z: -10,
+ data: [{
+ value: 1,
+ symbolSize: ['150%', 50]
+ }, {
+ value: '-'
+ }, {
+ value: 1,
+ symbolSize: ['200%', 50]
+ }, {
+ value: 1,
+ symbolSize: ['200%', 50]
+ }]
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-spirit.ts b/public/examples/ts/pictorialBar-spirit.ts
new file mode 100644
index 0000000..04a100c
--- /dev/null
+++ b/public/examples/ts/pictorialBar-spirit.ts
@@ -0,0 +1,114 @@
+/*
+title: Spirits
+category: pictorialBar
+titleCN: 精灵
+*/
+
+const spirit = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAACUCAYAAACtHGabAAAACXBIWXMAABcSAAAXEgFnn9JSAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2Mk [...]
+
+var maxData = 2000;
+
+option = {
+ tooltip: {
+ },
+ xAxis: {
+ max: maxData,
+ splitLine: {show: false},
+ offset: 10,
+ axisLine: {
+ lineStyle: {
+ color: '#999'
+ }
+ },
+ axisLabel: {
+ margin: 10
+ }
+ },
+ yAxis: {
+ data: ['2013', '2014', '2015', '2016'],
+ inverse: true,
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {
+ margin: 10,
+ color: '#999',
+ fontSize: 16
+ }
+ },
+ grid: {
+ top: 'center',
+ height: 200,
+ left: 70,
+ right: 100
+ },
+ series: [{
+ // current data
+ type: 'pictorialBar',
+ symbol: spirit,
+ symbolRepeat: 'fixed',
+ symbolMargin: '5%',
+ symbolClip: true,
+ symbolSize: 30,
+ symbolBoundingData: maxData,
+ data: [891, 1220, 660, 1670],
+ markLine: {
+ symbol: 'none',
+ label: {
+ formatter: 'max: {c}',
+ position: 'start'
+ },
+ lineStyle: {
+ color: 'green',
+ type: 'dotted',
+ opacity: 0.2,
+ width: 2
+ },
+ data: [{
+ type: 'max'
+ }]
+ },
+ z: 10
+ }, {
+ // full data
+ type: 'pictorialBar',
+ itemStyle: {
+ opacity: 0.2
+ },
+ label: {
+ show: true,
+ formatter: function (params: any) {
+ return (params.value / maxData * 100).toFixed(1) + ' %';
+ },
+ position: 'right',
+ offset: [10, 0],
+ color: 'green',
+ fontSize: 18
+ },
+ animationDuration: 0,
+ symbolRepeat: 'fixed',
+ symbolMargin: '5%',
+ symbol: spirit,
+ symbolSize: 30,
+ symbolBoundingData: maxData,
+ data: [891, 1220, 660, 1670],
+ z: 5
+ }]
+};
+
+
+// Make dynamic data.
+function random() {
+ return +(Math.random() * (maxData - 10)).toFixed(1);
+}
+setInterval(function () {
+ const dynamicData = [random(), random(), random(), random()];
+ myChart.setOption({
+ series: [{
+ data: dynamicData.slice()
+ }, {
+ data: dynamicData.slice()
+ }]
+ })
+}, 3000)
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-vehicle.ts b/public/examples/ts/pictorialBar-vehicle.ts
new file mode 100644
index 0000000..eb7cb14
--- /dev/null
+++ b/public/examples/ts/pictorialBar-vehicle.ts
@@ -0,0 +1,112 @@
+/*
+title: Vehicles
+category: pictorialBar
+titleCN: 交通工具
+*/
+
+const pathSymbols = {
+ reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,1 [...]
+ plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963 [...]
+ train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35 [...]
+ ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.6 [...]
+ 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. [...]
+};
+
+const labelSetting: echarts.PictorialBarSeriesOption['label'] = {
+ show: true,
+ position: 'right',
+ offset: [10, 0],
+ fontSize: 16
+};
+
+
+option = {
+ title: {
+ text: 'Vehicles in X City'
+ },
+ legend: {
+ data: ['2015', '2016']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ containLabel: true,
+ left: 20
+ },
+ yAxis: {
+ data: ['reindeer', 'ship', 'plane', 'train', 'car'],
+ inverse: true,
+ axisLine: {show: false},
+ axisTick: {show: false},
+ axisLabel: {
+ margin: 30,
+ fontSize: 14
+ },
+ axisPointer: {
+ label: {
+ show: true,
+ margin: 30
+ }
+ }
+ },
+ xAxis: {
+ splitLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ axisLine: {show: false}
+ },
+ series: [{
+ name: '2015',
+ type: 'pictorialBar',
+ label: labelSetting,
+ symbolRepeat: true,
+ symbolSize: ['80%', '60%'],
+ barCategoryGap: '40%',
+ data: [{
+ value: 157,
+ symbol: pathSymbols.reindeer
+ }, {
+ value: 21,
+ symbol: pathSymbols.ship
+ }, {
+ value: 66,
+ symbol: pathSymbols.plane
+ }, {
+ value: 78,
+ symbol: pathSymbols.train
+ }, {
+ value: 123,
+ symbol: pathSymbols.car
+ }]
+ }, {
+ name: '2016',
+ type: 'pictorialBar',
+ barGap: '10%',
+ label: labelSetting,
+ symbolRepeat: true,
+ symbolSize: ['80%', '60%'],
+ data: [{
+ value: 184,
+ symbol: pathSymbols.reindeer
+ }, {
+ value: 29,
+ symbol: pathSymbols.ship
+ }, {
+ value: 73,
+ symbol: pathSymbols.plane
+ }, {
+ value: 91,
+ symbol: pathSymbols.train
+ }, {
+ value: 95,
+ symbol: pathSymbols.car
+ }]
+ }]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-velocity.ts b/public/examples/ts/pictorialBar-velocity.ts
new file mode 100644
index 0000000..8441b98
--- /dev/null
+++ b/public/examples/ts/pictorialBar-velocity.ts
@@ -0,0 +1,102 @@
+/*
+title: Velocity of Christmas Reindeers
+category: pictorialBar
+titleCN: 驯鹿的速度
+*/
+
+const pathSymbols = {
+ reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,1 [...]
+ plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963 [...]
+ rocket: 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2. [...]
+ train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35 [...]
+ ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.6 [...]
+ 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. [...]
+ run: 'path://M13.676,32.955c0.919-0.031,1.843-0.008,2.767-0.008v0.007c0.827,0,1.659,0.041,2.486-0.019 c0.417-0.028,1.118,0.325,1.14-0.545c0.014-0.637-0.156-1.279-0.873-1.367c-1.919-0.241-3.858-0.233-5.774,0.019 c-0.465,0.062-0.998,0.442-0.832,1.069C12.715,32.602,13.045,32.977,13.676,32.955z M14.108,29.013 c1.47-0.007,2.96-0.122,4.414,0.035c1.792,0.192,3.1-0.412,4.273-2.105c-3.044,0-5.882,0.014-8.719-0.01 c-0.768-0.005-1.495,0.118-1.461,1C12.642,28.731,13.329,29.014,14.108,29.013z M23 [...]
+ walk: 'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6 [...]
+};
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ formatter: function (params: any) {
+ return params[0].name + ': ' + params[0].value;
+ }
+ },
+ xAxis: {
+ data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行'],
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {
+ color: '#e54035'
+ }
+ },
+ yAxis: {
+ splitLine: {show: false},
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {show: false}
+ },
+ color: ['#e54035'],
+ series: [{
+ name: 'hill',
+ type: 'pictorialBar',
+ barCategoryGap: '-130%',
+ // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+ symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+ itemStyle: {
+ opacity: 0.5
+ },
+ emphasis: {
+ itemStyle: {
+ opacity: 1
+ }
+ },
+ data: [123, 60, 25, 18, 12, 9, 2, 1],
+ z: 10
+ }, {
+ name: 'glyph',
+ type: 'pictorialBar',
+ barGap: '-100%',
+ symbolPosition: 'end',
+ symbolSize: 50,
+ symbolOffset: [0, '-120%'],
+ data: [{
+ value: 123,
+ symbol: pathSymbols.reindeer,
+ symbolSize: [60, 60]
+ }, {
+ value: 60,
+ symbol: pathSymbols.rocket,
+ symbolSize: [50, 60]
+ }, {
+ value: 25,
+ symbol: pathSymbols.plane,
+ symbolSize: [65, 35]
+ }, {
+ value: 18,
+ symbol: pathSymbols.train,
+ symbolSize: [50, 30]
+ }, {
+ value: 12,
+ symbol: pathSymbols.ship,
+ symbolSize: [50, 35]
+ }, {
+ value: 9,
+ symbol: pathSymbols.car,
+ symbolSize: [40, 30]
+ }, {
+ value: 2,
+ symbol: pathSymbols.run,
+ symbolSize: [40, 50]
+ }, {
+ value: 1,
+ symbol: pathSymbols.walk,
+ symbolSize: [40, 50]
+ }]
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-alignTo.ts b/public/examples/ts/pie-alignTo.ts
new file mode 100644
index 0000000..4dd9062
--- /dev/null
+++ b/public/examples/ts/pie-alignTo.ts
@@ -0,0 +1,97 @@
+/*
+title: Pie Label Align
+category: pie
+titleCN: 饼图标签对齐
+difficulty: 3
+*/
+
+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
+}];
+
+option = {
+ title: [{
+ text: 'Pie label alignTo',
+ left: 'center',
+ }, {
+ 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,
+ 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,
+ 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,
+ label: {
+ position: 'outer',
+ alignTo: 'edge',
+ margin: 20
+ },
+ left: '66.6667%',
+ right: 0,
+ top: 0,
+ bottom: 0
+ }]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-borderRadius.ts b/public/examples/ts/pie-borderRadius.ts
new file mode 100644
index 0000000..7e32a4a
--- /dev/null
+++ b/public/examples/ts/pie-borderRadius.ts
@@ -0,0 +1,52 @@
+/*
+title: Doughnut Chart with Rounded Corner
+category: pie
+titleCN: 圆角环形图
+difficulty: 1
+*/
+
+option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ top: '5%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 1048, name: 'Search Engine'},
+ {value: 735, name: 'Direct'},
+ {value: 580, name: 'Email'},
+ {value: 484, name: 'Union Ads'},
+ {value: 300, name: 'Video Ads'}
+ ]
+ }
+ ]
+};
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/pie-custom.ts b/public/examples/ts/pie-custom.ts
new file mode 100644
index 0000000..ca0aafa
--- /dev/null
+++ b/public/examples/ts/pie-custom.ts
@@ -0,0 +1,72 @@
+/*
+title: Customized Pie
+category: pie
+titleCN: 饼图自定义样式
+difficulty: 2
+*/
+
+option = {
+ backgroundColor: '#2c343c',
+
+ title: {
+ text: 'Customized Pie',
+ left: 'center',
+ top: 20,
+ textStyle: {
+ color: '#ccc'
+ }
+ },
+
+ tooltip: {
+ trigger: 'item'
+ },
+
+ visualMap: {
+ show: false,
+ min: 80,
+ max: 600,
+ inRange: {
+ colorLightness: [0, 1]
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '50%'],
+ data: [
+ {value: 335, name: 'Direct'},
+ {value: 310, name: 'Email'},
+ {value: 274, name: 'Union Ads'},
+ {value: 235, name: 'Video Ads'},
+ {value: 400, name: 'Search Engine'}
+ ].sort(function (a, b) { return a.value - b.value; }),
+ roseType: 'radius',
+ label: {
+ color: 'rgba(255, 255, 255, 0.3)'
+ },
+ labelLine: {
+ lineStyle: {
+ color: 'rgba(255, 255, 255, 0.3)'
+ },
+ smooth: 0.2,
+ length: 10,
+ length2: 20
+ },
+ itemStyle: {
+ color: '#c23531',
+ shadowBlur: 200,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+
+ animationType: 'scale',
+ animationEasing: 'elasticOut',
+ animationDelay: function (idx) {
+ return Math.random() * 200;
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-doughnut.ts b/public/examples/ts/pie-doughnut.ts
new file mode 100644
index 0000000..584cf11
--- /dev/null
+++ b/public/examples/ts/pie-doughnut.ts
@@ -0,0 +1,46 @@
+/*
+title: Doughnut Chart
+category: pie
+titleCN: 环形图
+difficulty: 1
+*/
+
+option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ top: '5%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 1048, name: 'Search Engine'},
+ {value: 735, name: 'Direct'},
+ {value: 580, name: 'Email'},
+ {value: 484, name: 'Union Ads'},
+ {value: 300, name: 'Video Ads'}
+ ]
+ }
+ ]
+};
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-labelLine-adjust.ts b/public/examples/ts/pie-labelLine-adjust.ts
new file mode 100644
index 0000000..fad5631
--- /dev/null
+++ b/public/examples/ts/pie-labelLine-adjust.ts
@@ -0,0 +1,97 @@
+/*
+title: Label Line Adjust
+category: pie
+titleCN: 饼图引导线调整
+difficulty: 3
+*/
+
+var datas = [
+ ////////////////////////////////////////
+ [
+ { name: '圣彼得堡来客', value: 5.6 },
+ { name: '陀思妥耶夫斯基全集', value: 1 },
+ { name: '史记精注全译（全6册）', value: 0.8 },
+ { name: '加德纳艺术通史', value: 0.5 },
+ { name: '表象与本质', value: 0.5 },
+ { name: '其它', value: 3.8 }
+ ],
+ // ////////////////////////////////////////
+ [
+ { name: '银河帝国5：迈向基地', value: 3.8 },
+ { name: '俞军产品方法论', value: 2.3 },
+ { name: '艺术的逃难', value: 2.2 },
+ { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
+ { name: 'Scrum 精髓', value: 1.2 },
+ { name: '其它', value: 5.7 }
+ ],
+
+ ////////////////////////////////////////
+ [
+ { name: '克莱因壶', value: 3.5 },
+ { name: '投资最重要的事', value: 2.8 },
+ { name: '简读中国史', value: 1.7 },
+ { name: '你当像鸟飞往你的山', value: 1.4 },
+ { name: '表象与本质', value: 0.5 },
+ { name: '其它', value: 3.8 }
+ ]
+];
+
+option = {
+ title: {
+ text: '阅读书籍分布',
+ left: 'center',
+ textStyle: {
+ color: '#999',
+ fontWeight: 'normal',
+ fontSize: 14
+ }
+ },
+ series: datas.map(function (data, idx) {
+ var top = idx * 33.3;
+ return {
+ type: 'pie',
+ radius: [20, 60],
+ top: top + '%',
+ height: '33.33%',
+ left: 'center',
+ width: 400,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{time|{c} 小时}',
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ labelLine: {
+ length: 15,
+ length2: 0,
+ maxSurfaceAngle: 80
+ },
+ labelLayout: function (params) {
+ const isLeft = params.labelRect.x < myChart.getWidth() / 2;
+ const points = params.labelLinePoints as number[][];
+ // Update the end point.
+ points[2][0] = isLeft
+ ? params.labelRect.x
+ : params.labelRect.x + params.labelRect.width;
+
+ return {
+ labelLinePoints: points
+ };
+ },
+ data: data
+ }
+ })
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-legend.ts b/public/examples/ts/pie-legend.ts
new file mode 100644
index 0000000..7db34c8
--- /dev/null
+++ b/public/examples/ts/pie-legend.ts
@@ -0,0 +1,82 @@
+/*
+title: Pie with Scrollable Legend
+category: pie
+titleCN: 可滚动的图例
+difficulty: 4
+*/
+
+const data = genData(50);
+
+option = {
+ title: {
+ text: '同名数量统计',
+ subtext: '纯属虚构',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ type: 'scroll',
+ orient: 'vertical',
+ right: 10,
+ top: 20,
+ bottom: 20,
+ data: data.legendData
+ },
+ series: [
+ {
+ name: '姓名',
+ type: 'pie',
+ radius: '55%',
+ center: ['40%', '50%'],
+ data: data.seriesData,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+};
+
+
+
+
+function genData(count: number) {
+ const nameList = [
+ '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', [...]
+ ];
+ const legendData = [];
+ const seriesData = [];
+ for (var i = 0; i < count; i++) {
+ var name = Math.random() > 0.65
+ ? makeWord(4, 1) + '·' + makeWord(3, 0)
+ : makeWord(2, 1);
+ legendData.push(name);
+ seriesData.push({
+ name: name,
+ value: Math.round(Math.random() * 100000)
+ });
+ }
+
+ return {
+ legendData: legendData,
+ seriesData: seriesData
+ };
+
+ function makeWord(max: number, min: number) {
+ const nameLen = Math.ceil(Math.random() * max + min);
+ const name = [];
+ for (var i = 0; i < nameLen; i++) {
+ name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
+ }
+ return name.join('');
+ }
+}
+
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-nest.ts b/public/examples/ts/pie-nest.ts
new file mode 100644
index 0000000..90e7374
--- /dev/null
+++ b/public/examples/ts/pie-nest.ts
@@ -0,0 +1,89 @@
+/*
+title: Nested Pies
+category: 'pie, rich'
+titleCN: 嵌套环形图
+difficulty: 5
+*/
+
+option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ data: ['Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others']
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ selectedMode: 'single',
+ radius: [0, '30%'],
+ label: {
+ position: 'inner',
+ fontSize: 14,
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 1548, name: 'Search Engine'},
+ {value: 775, name: 'Direct'},
+ {value: 679, name: 'Marketing', selected: true}
+ ]
+ },
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['45%', '60%'],
+ labelLine: {
+ length: 30,
+ },
+ label: {
+ formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
+ backgroundColor: '#F6F8FC',
+ borderColor: '#8C8D8E',
+ borderWidth: 1,
+ borderRadius: 4,
+
+ rich: {
+ a: {
+ color: '#6E7079',
+ lineHeight: 22,
+ align: 'center'
+ },
+ hr: {
+ borderColor: '#8C8D8E',
+ width: '100%',
+ borderWidth: 1,
+ height: 0
+ },
+ b: {
+ color: '#4C5058',
+ fontSize: 14,
+ fontWeight: 'bold',
+ lineHeight: 33
+ },
+ per: {
+ color: '#fff',
+ backgroundColor: '#4C5058',
+ padding: [3, 4],
+ borderRadius: 4
+ }
+ }
+ },
+ data: [
+ {value: 1048, name: 'Baidu'},
+ {value: 335, name: 'Direct'},
+ {value: 310, name: 'Email'},
+ {value: 251, name: 'Google'},
+ {value: 234, name: 'Union Ads'},
+ {value: 147, name: 'Bing'},
+ {value: 135, name: 'Video Ads'},
+ {value: 102, name: 'Others'}
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-parliament-transition.ts b/public/examples/ts/pie-parliament-transition.ts
new file mode 100644
index 0000000..36727b9
--- /dev/null
+++ b/public/examples/ts/pie-parliament-transition.ts
@@ -0,0 +1,150 @@
+/*
+title: Transition of Parliament and Pie Chart
+category: custom, animtion
+titleCN: 自定义议会图与饼图过渡动画
+difficulty: 10
+videoStart: 1000
+videoEnd: 6000
+*/
+
+const data = [
+ { value: 800, name: 'A' },
+ { value: 635, name: 'B' },
+ { value: 580, name: 'C' },
+ { value: 484, name: 'D' },
+ { value: 300, name: 'E' },
+ { value: 200, name: 'F' }
+];
+
+const defaultPalette = [
+ // '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
+ '#5470c6',
+ '#91cc75',
+ '#fac858',
+ '#ee6666',
+ '#73c0de',
+ '#3ba272',
+ '#fc8452',
+ '#9a60b4',
+ '#ea7ccc'
+];
+
+const radius = ['30%', '80%'];
+
+const pieOption: echarts.EChartsOption = {
+ series: [{
+ type: 'pie',
+ id: 'distribution',
+ radius: radius,
+ label: {
+ show: false
+ },
+ universalTransition: true,
+ animationDurationUpdate: 1000,
+ data: data
+ }]
+};
+
+
+const parliamentOption = (function () {
+ let sum = data.reduce(function (sum, cur) {
+ return sum + cur.value;
+ }, 0);
+
+ let angles: number[] = [];
+ let startAngle = -Math.PI / 2;
+ let curAngle = startAngle;
+ data.forEach(function (item) {
+ angles.push(curAngle);
+ curAngle += (item.value / sum) * Math.PI * 2;
+ });
+ angles.push(startAngle + Math.PI * 2);
+ function parliamentLayout(
+ startAngle: number,
+ endAngle: number,
+ totalAngle: number,
+ r0: number,
+ r1: number,
+ size: number
+ ) {
+ let rowsCount = Math.ceil((r1 - r0) / size);
+ let points = [];
+
+ let r = r0;
+ for (let i = 0; i < rowsCount; i++) {
+ // Recalculate size
+ let totalRingSeatsNumber = Math.round((totalAngle * r) / size);
+ let newSize = (totalAngle * r) / totalRingSeatsNumber;
+ for (
+ let k = Math.floor((startAngle * r) / newSize) * newSize;
+ k < Math.floor((endAngle * r) / newSize) * newSize - 1e-6;
+ k += newSize
+ ) {
+ let angle = k / r;
+ let x = Math.cos(angle) * r;
+ let y = Math.sin(angle) * r;
+ points.push([x, y]);
+ }
+
+ r += size;
+ }
+
+ return points;
+ }
+ return {
+ series: {
+ type: 'custom',
+ id: 'distribution',
+ data: data,
+ coordinateSystem: undefined,
+ universalTransition: true,
+ animationDurationUpdate: 1000,
+ renderItem: function (params, api) {
+ var idx = params.dataIndex;
+ var viewSize = Math.min(api.getWidth(), api.getHeight());
+ var r0 = ((parseFloat(radius[0]) / 100) * viewSize) / 2;
+ var r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2;
+ var cx = api.getWidth() * 0.5;
+ var cy = api.getHeight() * 0.5;
+ var size = viewSize / 50;
+
+ var points = parliamentLayout(
+ angles[idx],
+ angles[idx + 1],
+ Math.PI * 2,
+ r0,
+ r1,
+ size + 3
+ );
+
+ return {
+ type: 'group',
+ children: points.map(function (pt) {
+ return {
+ type: 'circle',
+ autoBatch: true,
+ shape: {
+ cx: cx + pt[0],
+ cy: cy + pt[1],
+ r: size / 2
+ },
+ style: {
+ fill: defaultPalette[idx % defaultPalette.length]
+ }
+ };
+ })
+ };
+ }
+ }
+ } as echarts.EChartsOption;
+})();
+
+
+let currentOption = option = pieOption;
+
+setInterval(function () {
+ currentOption = currentOption === pieOption ? parliamentOption : pieOption;
+ myChart.setOption(currentOption);
+}, 2000);
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-pattern.ts b/public/examples/ts/pie-pattern.ts
new file mode 100644
index 0000000..392c884
--- /dev/null
+++ b/public/examples/ts/pie-pattern.ts
@@ -0,0 +1,62 @@
+/*
+title: Texture on Pie Chart
+category: pie
+titleCN: 饼图纹理
+difficulty: 2
+*/
+
+const piePatternSrc = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMA [...]
+const bgPatternSrc = 'data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAC9+ElEQVR42pSd2Y7kSHJF6/9/TVLPaCQ9qmvJjJ2MYERmdY/edO49EYbCAJIggGAySV/Mzc1td48vx8uZ67Rebx8f959/XK63z7//1/XxsW738/Z49M3ltt0+Pj/+/DvvufPm8cef76fL+Xo7r9ft4+Oyrut244GSl+uVwsv98/p42A7/blT/48/rPW9oc39e6YtP98+fvDkvl+P5TPXTsjz++OOwXKlLLynw8+ft8bF9/uR5vT/o98BToVq2O23eUutCRV4u23a4XOmLr9SyX+pS67ws6317O53P63Jazsvt9n7YHU7parmu++Nh2W5ff7ydrwslKQ8AhWelHVu73D94zzNgMBBaXm6bYxQq3gMD+AEnwMZX3q8tSV3uvAc/tA [...]
+
+const piePatternImg = new Image();
+piePatternImg.src = piePatternSrc;
+const bgPatternImg = new Image();
+bgPatternImg.src = bgPatternSrc;
+
+option = {
+ backgroundColor: {
+ image: bgPatternImg,
+ repeat: 'repeat'
+ },
+ title: {
+ text: '饼图纹理',
+ textStyle: {
+ color: '#235894'
+ }
+ },
+ tooltip: {},
+ series: [{
+ name: 'pie',
+ type: 'pie',
+ selectedMode: 'single',
+ selectedOffset: 30,
+ clockwise: true,
+ label: {
+ fontSize: 18,
+ color: '#235894'
+ },
+ labelLine: {
+ lineStyle: {
+ color: '#235894'
+ }
+ },
+ data: [
+ {value: 1048, name: 'Search Engine'},
+ {value: 735, name: 'Direct'},
+ {value: 580, name: 'Email'},
+ {value: 484, name: 'Union Ads'},
+ {value: 300, name: 'Video Ads'}
+ ],
+ itemStyle: {
+ opacity: 0.7,
+ color: {
+ image: piePatternImg,
+ repeat: 'repeat'
+ },
+ borderWidth: 3,
+ borderColor: '#235894'
+ }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-rich-text.ts b/public/examples/ts/pie-rich-text.ts
new file mode 100644
index 0000000..c3928d5
--- /dev/null
+++ b/public/examples/ts/pie-rich-text.ts
@@ -0,0 +1,137 @@
+/*
+title: Pie Special Label
+category: 'pie, rich'
+titleCN: 富文本标签
+difficulty: 4
+*/
+
+const weatherIcons = {
+ 'Sunny': ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
+ 'Cloudy': ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
+ 'Showers': ROOT_PATH + '/data/asset/img/weather/showers_128.png'
+};
+
+option = {
+ title: {
+ text: 'Weather Statistics',
+ subtext: 'Fake Data',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ bottom: 10,
+ left: 'center',
+ data: ['CityA', 'CityB', 'CityD', 'CityC', 'CityE']
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '65%',
+ center: ['50%', '50%'],
+ selectedMode: 'single',
+ data: [
+ {
+ value: 1548,
+ name: 'CityE',
+ label: {
+ formatter: [
+ '{title|{b}}{abg|}',
+ ' {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
+ '{hr|}',
+ ' {Sunny|}{value|202}{rate|55.3%}',
+ ' {Cloudy|}{value|142}{rate|38.9%}',
+ ' {Showers|}{value|21}{rate|5.8%}'
+ ].join('\n'),
+ backgroundColor: '#eee',
+ borderColor: '#777',
+ borderWidth: 1,
+ borderRadius: 4,
+ rich: {
+ title: {
+ color: '#eee',
+ align: 'center'
+ },
+ abg: {
+ backgroundColor: '#333',
+ width: '100%',
+ align: 'right',
+ height: 25,
+ borderRadius: [4, 4, 0, 0]
+ },
+ Sunny: {
+ height: 30,
+ align: 'left',
+ backgroundColor: {
+ image: weatherIcons.Sunny
+ }
+ },
+ Cloudy: {
+ height: 30,
+ align: 'left',
+ backgroundColor: {
+ image: weatherIcons.Cloudy
+ }
+ },
+ Showers: {
+ height: 30,
+ align: 'left',
+ backgroundColor: {
+ image: weatherIcons.Showers
+ }
+ },
+ weatherHead: {
+ color: '#333',
+ height: 24,
+ align: 'left'
+ },
+ hr: {
+ borderColor: '#777',
+ width: '100%',
+ borderWidth: 0.5,
+ height: 0
+ },
+ value: {
+ width: 20,
+ padding: [0, 20, 0, 30],
+ align: 'left'
+ },
+ valueHead: {
+ color: '#333',
+ width: 20,
+ padding: [0, 20, 0, 30],
+ align: 'center'
+ },
+ rate: {
+ width: 40,
+ align: 'right',
+ padding: [0, 10, 0, 0]
+ },
+ rateHead: {
+ color: '#333',
+ width: 40,
+ align: 'center',
+ padding: [0, 10, 0, 0]
+ }
+ }
+ }
+ },
+ {value: 735, name: 'CityC'},
+ {value: 510, name: 'CityD'},
+ {value: 434, name: 'CityB'},
+ {value: 335, name: 'CityA'}
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-roseType-simple.ts b/public/examples/ts/pie-roseType-simple.ts
new file mode 100644
index 0000000..ac16725
--- /dev/null
+++ b/public/examples/ts/pie-roseType-simple.ts
@@ -0,0 +1,46 @@
+/*
+title: Nightingale Chart
+category: pie
+titleCN: 基础南丁格尔玫瑰图
+shotWidth: 800
+difficulty: 2
+*/
+
+option = {
+ legend: {
+ top: 'bottom'
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ mark: {show: true},
+ dataView: {show: true, readOnly: false},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ series: [
+ {
+ name: 'Nightingale Chart',
+ type: 'pie',
+ radius: [50, 250],
+ center: ['50%', '50%'],
+ roseType: 'area',
+ itemStyle: {
+ borderRadius: 8
+ },
+ data: [
+ {value: 40, name: 'rose 1'},
+ {value: 38, name: 'rose 2'},
+ {value: 32, name: 'rose 3'},
+ {value: 30, name: 'rose 4'},
+ {value: 28, name: 'rose 5'},
+ {value: 26, name: 'rose 6'},
+ {value: 22, name: 'rose 7'},
+ {value: 18, name: 'rose 8'}
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-roseType.ts b/public/examples/ts/pie-roseType.ts
new file mode 100644
index 0000000..1315ab9
--- /dev/null
+++ b/public/examples/ts/pie-roseType.ts
@@ -0,0 +1,84 @@
+/*
+title: Nightingale Chart
+category: pie
+titleCN: 南丁格尔玫瑰图
+difficulty: 2
+*/
+
+option = {
+ title: {
+ text: 'Nightingale Chart',
+ subtext: 'Fake Data',
+ 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},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ series: [
+ {
+ name: 'Radius Mode',
+ type: 'pie',
+ radius: [20, 140],
+ center: ['25%', '50%'],
+ roseType: 'radius',
+ itemStyle: {
+ borderRadius: 5
+ },
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: true
+ }
+ },
+ data: [
+ {value: 40, name: 'rose 1'},
+ {value: 33, name: 'rose 2'},
+ {value: 28, name: 'rose 3'},
+ {value: 22, name: 'rose 4'},
+ {value: 20, name: 'rose 5'},
+ {value: 15, name: 'rose 6'},
+ {value: 12, name: 'rose 7'},
+ {value: 10, name: 'rose 8'}
+ ]
+ },
+ {
+ name: 'Area Mode',
+ type: 'pie',
+ radius: [20, 140],
+ center: ['75%', '50%'],
+ roseType: 'area',
+ itemStyle: {
+ borderRadius: 5
+ },
+ data: [
+ {value: 30, name: 'rose 1'},
+ {value: 28, name: 'rose 2'},
+ {value: 26, name: 'rose 3'},
+ {value: 24, name: 'rose 4'},
+ {value: 22, name: 'rose 5'},
+ {value: 20, name: 'rose 6'},
+ {value: 18, name: 'rose 7'},
+ {value: 16, name: 'rose 8'}
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pie-simple.ts b/public/examples/ts/pie-simple.ts
new file mode 100644
index 0000000..7002ef5
--- /dev/null
+++ b/public/examples/ts/pie-simple.ts
@@ -0,0 +1,44 @@
+/*
+title: Referer of a Website
+category: pie
+titleCN: 某站点用户Access From
+difficulty: 0
+*/
+
+option = {
+ title: {
+ text: 'Referer of a Website',
+ subtext: 'Fake Data',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: '50%',
+ data: [
+ {value: 1048, name: 'Search Engine'},
+ {value: 735, name: 'Direct'},
+ {value: 580, name: 'Email'},
+ {value: 484, name: 'Union Ads'},
+ {value: 300, name: 'Video Ads'}
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/polar-roundCap.ts b/public/examples/ts/polar-roundCap.ts
new file mode 100644
index 0000000..7797749
--- /dev/null
+++ b/public/examples/ts/polar-roundCap.ts
@@ -0,0 +1,51 @@
+/*
+title: Rounded Bar on Polar
+category: bar
+titleCN: 圆角环形图
+difficulty: 7
+*/
+
+option = {
+ angleAxis: {
+ max: 2,
+ startAngle: 30,
+ splitLine: {
+ show: false
+ }
+ },
+ radiusAxis: {
+ type: 'category',
+ data: ['v', 'w', 'x', 'y', 'z'],
+ z: 10
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ data: [4, 3, 2, 1, 0],
+ coordinateSystem: 'polar',
+ name: 'Without Round Cap',
+ itemStyle: {
+ borderColor: 'red',
+ opacity: 0.8,
+ borderWidth: 1
+ }
+ }, {
+ type: 'bar',
+ data: [4, 3, 2, 1, 0],
+ coordinateSystem: 'polar',
+ name: 'With Round Cap',
+ roundCap: true,
+ itemStyle: {
+ borderColor: 'green',
+ opacity: 0.8,
+ borderWidth: 1
+ }
+ }],
+ legend: {
+ show: true,
+ data: ['Without Round Cap', 'With Round Cap']
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/radar-aqi.ts b/public/examples/ts/radar-aqi.ts
new file mode 100644
index 0000000..664fcdb
--- /dev/null
+++ b/public/examples/ts/radar-aqi.ts
@@ -0,0 +1,211 @@
+/*
+title: AQI - Radar Chart
+category: radar
+titleCN: AQI - 雷达图
+difficulty: 1
+*/
+
+// Schema:
+// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
+const dataBJ = [
+ [55,9,56,0.46,18,6,1],
+ [25,11,21,0.65,34,9,2],
+ [56,7,63,0.3,14,5,3],
+ [33,7,29,0.33,16,6,4],
+ [42,24,44,0.76,40,16,5],
+ [82,58,90,1.77,68,33,6],
+ [74,49,77,1.46,48,27,7],
+ [78,55,80,1.29,59,29,8],
+ [267,216,280,4.8,108,64,9],
+ [185,127,216,2.52,61,27,10],
+ [39,19,38,0.57,31,15,11],
+ [41,11,40,0.43,21,7,12],
+ [64,38,74,1.04,46,22,13],
+ [108,79,120,1.7,75,41,14],
+ [108,63,116,1.48,44,26,15],
+ [33,6,29,0.34,13,5,16],
+ [94,66,110,1.54,62,31,17],
+ [186,142,192,3.88,93,79,18],
+ [57,31,54,0.96,32,14,19],
+ [22,8,17,0.48,23,10,20],
+ [39,15,36,0.61,29,13,21],
+ [94,69,114,2.08,73,39,22],
+ [99,73,110,2.43,76,48,23],
+ [31,12,30,0.5,32,16,24],
+ [42,27,43,1,53,22,25],
+ [154,117,157,3.05,92,58,26],
+ [234,185,230,4.09,123,69,27],
+ [160,120,186,2.77,91,50,28],
+ [134,96,165,2.76,83,41,29],
+ [52,24,60,1.03,50,21,30],
+ [46,5,49,0.28,10,6,31]
+];
+
+const dataGZ = [
+ [26,37,27,1.163,27,13,1],
+ [85,62,71,1.195,60,8,2],
+ [78,38,74,1.363,37,7,3],
+ [21,21,36,0.634,40,9,4],
+ [41,42,46,0.915,81,13,5],
+ [56,52,69,1.067,92,16,6],
+ [64,30,28,0.924,51,2,7],
+ [55,48,74,1.236,75,26,8],
+ [76,85,113,1.237,114,27,9],
+ [91,81,104,1.041,56,40,10],
+ [84,39,60,0.964,25,11,11],
+ [64,51,101,0.862,58,23,12],
+ [70,69,120,1.198,65,36,13],
+ [77,105,178,2.549,64,16,14],
+ [109,68,87,0.996,74,29,15],
+ [73,68,97,0.905,51,34,16],
+ [54,27,47,0.592,53,12,17],
+ [51,61,97,0.811,65,19,18],
+ [91,71,121,1.374,43,18,19],
+ [73,102,182,2.787,44,19,20],
+ [73,50,76,0.717,31,20,21],
+ [84,94,140,2.238,68,18,22],
+ [93,77,104,1.165,53,7,23],
+ [99,130,227,3.97,55,15,24],
+ [146,84,139,1.094,40,17,25],
+ [113,108,137,1.481,48,15,26],
+ [81,48,62,1.619,26,3,27],
+ [56,48,68,1.336,37,9,28],
+ [82,92,174,3.29,0,13,29],
+ [106,116,188,3.628,101,16,30],
+ [118,50,0,1.383,76,11,31]
+];
+
+const dataSH = [
+ [91,45,125,0.82,34,23,1],
+ [65,27,78,0.86,45,29,2],
+ [83,60,84,1.09,73,27,3],
+ [109,81,121,1.28,68,51,4],
+ [106,77,114,1.07,55,51,5],
+ [109,81,121,1.28,68,51,6],
+ [106,77,114,1.07,55,51,7],
+ [89,65,78,0.86,51,26,8],
+ [53,33,47,0.64,50,17,9],
+ [80,55,80,1.01,75,24,10],
+ [117,81,124,1.03,45,24,11],
+ [99,71,142,1.1,62,42,12],
+ [95,69,130,1.28,74,50,13],
+ [116,87,131,1.47,84,40,14],
+ [108,80,121,1.3,85,37,15],
+ [134,83,167,1.16,57,43,16],
+ [79,43,107,1.05,59,37,17],
+ [71,46,89,0.86,64,25,18],
+ [97,71,113,1.17,88,31,19],
+ [84,57,91,0.85,55,31,20],
+ [87,63,101,0.9,56,41,21],
+ [104,77,119,1.09,73,48,22],
+ [87,62,100,1,72,28,23],
+ [168,128,172,1.49,97,56,24],
+ [65,45,51,0.74,39,17,25],
+ [39,24,38,0.61,47,17,26],
+ [39,24,39,0.59,50,19,27],
+ [93,68,96,1.05,79,29,28],
+ [188,143,197,1.66,99,51,29],
+ [174,131,174,1.55,108,50,30],
+ [187,143,201,1.39,89,53,31]
+];
+
+const lineStyle = {
+ width: 1,
+ opacity: 0.5
+};
+
+option = {
+ backgroundColor: '#161627',
+ title: {
+ text: 'AQI - 雷达图',
+ left: 'center',
+ textStyle: {
+ color: '#eee'
+ }
+ },
+ legend: {
+ bottom: 5,
+ data: ['Beijing', 'Shanghai', 'Guangzhou'],
+ itemGap: 20,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ selectedMode: 'single'
+ },
+ radar: {
+ indicator: [
+ {name: 'AQI', max: 300},
+ {name: 'PM2.5', max: 250},
+ {name: 'PM10', max: 300},
+ {name: 'CO', max: 5},
+ {name: 'NO2', max: 200},
+ {name: 'SO2', max: 100}
+ ],
+ shape: 'circle',
+ splitNumber: 5,
+ axisName: {
+ color: 'rgb(238, 197, 102)'
+ },
+ splitLine: {
+ lineStyle: {
+ color: [
+ 'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
+ 'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
+ 'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
+ ].reverse()
+ }
+ },
+ splitArea: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(238, 197, 102, 0.5)'
+ }
+ }
+ },
+ series: [
+ {
+ name: 'Beijing',
+ type: 'radar',
+ lineStyle: lineStyle,
+ data: dataBJ,
+ symbol: 'none',
+ itemStyle: {
+ color: '#F9713C'
+ },
+ areaStyle: {
+ opacity: 0.1
+ }
+ },
+ {
+ name: 'Shanghai',
+ type: 'radar',
+ lineStyle: lineStyle,
+ data: dataSH,
+ symbol: 'none',
+ itemStyle: {
+ color: '#B3E4A1'
+ },
+ areaStyle: {
+ opacity: 0.05
+ }
+ },
+ {
+ name: 'Guangzhou',
+ type: 'radar',
+ lineStyle: lineStyle,
+ data: dataGZ,
+ symbol: 'none',
+ itemStyle: {
+ color: 'rgb(238, 197, 102)'
+ },
+ areaStyle: {
+ opacity: 0.05
+ }
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/radar-custom.ts b/public/examples/ts/radar-custom.ts
new file mode 100644
index 0000000..ef964d6
--- /dev/null
+++ b/public/examples/ts/radar-custom.ts
@@ -0,0 +1,133 @@
+/*
+title: Customized Radar Chart
+category: radar
+titleCN: 自定义雷达图
+difficulty: 2
+*/
+
+option = {
+ color: [ '#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
+ title: {
+ text: 'Customized Radar Chart'
+ },
+ legend: {
+ },
+ radar: [
+ {
+ indicator: [
+ { text: 'Indicator1' },
+ { text: 'Indicator2' },
+ { text: 'Indicator3' },
+ { text: 'Indicator4' },
+ { text: 'Indicator5' }
+ ],
+ center: ['25%', '50%'],
+ radius: 120,
+ startAngle: 90,
+ splitNumber: 4,
+ shape: 'circle',
+ axisName: {
+ formatter: '【{value}】',
+ color: '#428BD4'
+ },
+ splitArea: {
+ areaStyle: {
+ color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
+ shadowBlur: 10
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(211, 253, 250, 0.8)'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(211, 253, 250, 0.8)'
+ }
+ }
+ },
+ {
+ indicator: [
+ { text: 'Indicator1', max: 150 },
+ { text: 'Indicator2', max: 150 },
+ { text: 'Indicator3', max: 150 },
+ { text: 'Indicator4', max: 120 },
+ { text: 'Indicator5', max: 108 },
+ { text: 'Indicator6', max: 72 }
+ ],
+ center: ['75%', '50%'],
+ radius: 120,
+ axisName: {
+ color: '#fff',
+ backgroundColor: '#666',
+ borderRadius: 3,
+ padding: [3, 5]
+ }
+
+ }
+ ],
+ series: [
+ {
+ type: 'radar',
+ emphasis: {
+ lineStyle: {
+ width: 4
+ }
+ },
+ data: [
+ {
+ value: [100, 8, 0.40, -80, 2000],
+ name: 'Data A'
+ },
+ {
+ value: [60, 5, 0.30, -100, 1500],
+ name: 'Data B',
+ areaStyle: {
+ color: 'rgba(255, 228, 52, 0.6)'
+ }
+ }
+ ]
+ },
+ {
+ type: 'radar',
+ radarIndex: 1,
+ data: [
+ {
+ value: [120, 118, 130, 100, 99, 70],
+ name: 'Data C',
+ symbol: 'rect',
+ symbolSize: 12,
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ formatter: function (params: any) {
+ return params.value as string;
+ }
+ }
+ },
+ {
+ value: [100, 93, 50, 90, 70, 60],
+ name: 'Data D',
+ areaStyle: {
+ color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
+ {
+ color: 'rgba(255, 145, 124, 0.1)',
+ offset: 0
+ },
+ {
+ color: 'rgba(255, 145, 124, 0.9)',
+ offset: 1
+ }
+ ])
+ }
+ }
+ ]
+ }
+ ]
+};
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/radar-multiple.ts b/public/examples/ts/radar-multiple.ts
new file mode 100644
index 0000000..c64af74
--- /dev/null
+++ b/public/examples/ts/radar-multiple.ts
@@ -0,0 +1,99 @@
+/*
+title: Multiple Radar
+category: radar
+titleCN: 多雷达图
+*/
+
+option = {
+ title: {
+ text: '多雷达图'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ left: 'center',
+ data: ['A Software', 'A Phone', 'Another Phone', 'Precipitation', 'Evaporation']
+ },
+ radar: [
+ {
+ indicator: [
+ {text: 'Brand', max: 100},
+ {text: 'Content', max: 100},
+ {text: 'Usability', max: 100},
+ {text: 'Function', max: 100}
+ ],
+ center: ['25%', '40%'],
+ radius: 80
+ },
+ {
+ indicator: [
+ {text: 'Look', max: 100},
+ {text: 'Photo', max: 100},
+ {text: 'System', max: 100},
+ {text: 'Performance', max: 100},
+ {text: 'Screen', max: 100}
+ ],
+ radius: 80,
+ center: ['50%', '60%'],
+ },
+ {
+ indicator: (function (){
+ var res = [];
+ for (var i = 1; i <= 12; i++) {
+ res.push({text: i + '月', max: 100});
+ }
+ return res;
+ })(),
+ center: ['75%', '40%'],
+ radius: 80
+ }
+ ],
+ series: [
+ {
+ type: 'radar',
+ tooltip: {
+ trigger: 'item'
+ },
+ areaStyle: {},
+ data: [
+ {
+ value: [60, 73, 85, 40],
+ name: 'A Software'
+ }
+ ]
+ },
+ {
+ type: 'radar',
+ radarIndex: 1,
+ areaStyle: {},
+ data: [
+ {
+ value: [85, 90, 90, 95, 95],
+ name: 'A Phone'
+ },
+ {
+ value: [95, 80, 95, 90, 93],
+ name: 'Another Phone'
+ }
+ ]
+ },
+ {
+ type: 'radar',
+ radarIndex: 2,
+ areaStyle: {},
+ data: [
+ {
+ name: 'Precipitation',
+ value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
+ },
+ {
+ name: 'Evaporation',
+ value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
+ }
+ ]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/radar.ts b/public/examples/ts/radar.ts
new file mode 100644
index 0000000..5af7ce9
--- /dev/null
+++ b/public/examples/ts/radar.ts
@@ -0,0 +1,41 @@
+/*
+title: Basic Radar Chart
+category: radar
+titleCN: 基础雷达图
+difficulty: 0
+*/
+
+option = {
+ title: {
+ text: 'Basic Radar Chart'
+ },
+ legend: {
+ data: ['Allocated Budget', 'Actual Spending']
+ },
+ radar: {
+ // shape: 'circle',
+ indicator: [
+ { name: 'Sales', max: 6500},
+ { name: 'Administration', max: 16000},
+ { name: 'Information Technology', max: 30000},
+ { name: 'Customer Support', max: 38000},
+ { name: 'Development', max: 52000},
+ { name: 'Marketing', max: 25000}
+ ]
+ },
+ series: [{
+ name: 'Budget vs spending',
+ type: 'radar',
+ data: [
+ {
+ value: [4200, 3000, 20000, 35000, 50000, 18000],
+ name: 'Allocated Budget'
+ },
+ {
+ value: [5000, 14000, 28000, 26000, 42000, 21000],
+ name: 'Actual Spending'
+ }
+ ]
+ }]
+};
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/radar2.ts b/public/examples/ts/radar2.ts
new file mode 100644
index 0000000..304f15f
--- /dev/null
+++ b/public/examples/ts/radar2.ts
@@ -0,0 +1,74 @@
+/*
+title: Proportion of Browsers
+category: radar
+titleCN: 浏览器占比变化
+difficulty: 3
+*/
+
+option = {
+ title: {
+ text: 'Proportion of Browsers',
+ subtext: 'Fake Data',
+ top: 10,
+ left: 10
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ type: 'scroll',
+ bottom: 10,
+ data: (function (){
+ var list = [];
+ for (var i = 1; i <=28; i++) {
+ list.push(i + 2000 + '');
+ }
+ return list;
+ })()
+ },
+ visualMap: {
+ top: 'middle',
+ right: 10,
+ color: ['red', 'yellow'],
+ calculable: true
+ },
+ radar: {
+ indicator: [
+ { text: 'IE8-', max: 400},
+ { text: 'IE9+', max: 400},
+ { text: 'Safari', max: 400},
+ { text: 'Firefox', max: 400},
+ { text: 'Chrome', max: 400}
+ ]
+ },
+ series: (function (){
+ var series = [];
+ for (var i = 1; i <= 28; i++) {
+ series.push({
+ type: 'radar',
+ symbol: 'none',
+ lineStyle: {
+ width: 1
+ },
+ emphasis: {
+ areaStyle: {
+ color: 'rgba(0,250,0,0.3)'
+ }
+ },
+ data: [{
+ value: [
+ (40 - i) * 10,
+ (38 - i) * 4 + 60,
+ i * 5 + 10,
+ i * 9,
+ i * i /2
+ ],
+ name: i + 2000 + ''
+ }]
+ });
+ }
+ return series as echarts.RadarSeriesOption;
+ })()
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/sankey-energy.ts b/public/examples/ts/sankey-energy.ts
new file mode 100644
index 0000000..706698e
--- /dev/null
+++ b/public/examples/ts/sankey-energy.ts
@@ -0,0 +1,37 @@
+/*
+title: Gradient Edge
+category: sankey
+titleCN: 桑基图渐变色边
+difficulty: 3
+*/
+
+myChart.showLoading();
+$.get(ROOT_PATH + '/data/asset/data/energy.json', function (data) {
+ myChart.hideLoading();
+
+ myChart.setOption(option = {
+ title: {
+ text: 'Sankey Diagram'
+ },
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ series: [
+ {
+ type: 'sankey',
+ data: data.nodes,
+ links: data.links,
+ emphasis: {
+ focus: 'adjacency'
+ },
+ lineStyle: {
+ color: 'gradient',
+ curveness: 0.5
+ }
+ }
+ ]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/sankey-itemstyle.ts b/public/examples/ts/sankey-itemstyle.ts
new file mode 100644
index 0000000..a0a8254
--- /dev/null
+++ b/public/examples/ts/sankey-itemstyle.ts
@@ -0,0 +1,1283 @@
+/*
+title: Specify ItemStyle for Each Node in Sankey
+category: sankey
+titleCN: 桑基图节点自定义样式
+difficulty: 2
+*/
+
+
+option = {
+ title: {
+ subtext: 'Data From lisachristina1234 on GitHub',
+ left: 'center'
+ },
+ backgroundColor: '#FFFFFF',
+ series: [
+ {
+ type: 'sankey',
+ left: 50.0,
+ top: 20.0,
+ right: 150.0,
+ bottom: 25.0,
+ data: [
+ {
+ 'name': 'Werne',
+ 'itemStyle': {
+ 'color': '#f18bbf',
+ 'borderColor': '#f18bbf'
+ }
+ },
+ {
+ 'name': 'Duesseldorf',
+ 'itemStyle': {
+ 'color': '#0078D7',
+ 'borderColor': '#0078D7'
+ }
+ },
+ {
+ 'name': 'Cambridge',
+ 'itemStyle': {
+ 'color': '#3891A7',
+ 'borderColor': '#3891A7'
+ }
+ },
+ {
+ 'name': 'Colma',
+ 'itemStyle': {
+ 'color': '#0037DA',
+ 'borderColor': '#0037DA'
+ }
+ },
+ {
+ 'name': 'W. York',
+ 'itemStyle': {
+ 'color': '#C0BEAF',
+ 'borderColor': '#C0BEAF'
+ }
+ },
+ {
+ 'name': 'Frankfurt am Main',
+ 'itemStyle': {
+ 'color': '#EA005E',
+ 'borderColor': '#EA005E'
+ }
+ },
+ {
+ 'name': 'Metz',
+ 'itemStyle': {
+ 'color': '#D13438',
+ 'borderColor': '#D13438'
+ }
+ },
+ {
+ 'name': 'Orleans',
+ 'itemStyle': {
+ 'color': '#567C73',
+ 'borderColor': '#567C73'
+ }
+ },
+ {
+ 'name': 'Saint-Denis',
+ 'itemStyle': {
+ 'color': '#9ed566',
+ 'borderColor': '#9ed566'
+ }
+ },
+ {
+ 'name': 'Hof',
+ 'itemStyle': {
+ 'color': '#2BCC7F',
+ 'borderColor': '#2BCC7F'
+ }
+ },
+ {
+ 'name': 'Cliffside',
+ 'itemStyle': {
+ 'color': '#809B48',
+ 'borderColor': '#809B48'
+ }
+ },
+ {
+ 'name': 'Leeds',
+ 'itemStyle': {
+ 'color': '#9B2D1F',
+ 'borderColor': '#9B2D1F'
+ }
+ },
+ {
+ 'name': 'Victoria',
+ 'itemStyle': {
+ 'color': '#604878',
+ 'borderColor': '#604878'
+ }
+ },
+ {
+ 'name': 'Erlangen',
+ 'itemStyle': {
+ 'color': '#A5644E',
+ 'borderColor': '#A5644E'
+ }
+ },
+ {
+ 'name': 'Saint Germain en Laye',
+ 'itemStyle': {
+ 'color': '#2D3F3A',
+ 'borderColor': '#2D3F3A'
+ }
+ },
+ {
+ 'name': 'Roissy en Brie',
+ 'itemStyle': {
+ 'color': '#761721',
+ 'borderColor': '#761721'
+ }
+ },
+ {
+ 'name': 'Wokingham',
+ 'itemStyle': {
+ 'color': '#B1BADD',
+ 'borderColor': '#B1BADD'
+ }
+ },
+ {
+ 'name': 'Runcorn',
+ 'itemStyle': {
+ 'color': '#B0CCB0',
+ 'borderColor': '#B0CCB0'
+ }
+ },
+ {
+ 'name': 'Newton',
+ 'itemStyle': {
+ 'color': '#8164A3',
+ 'borderColor': '#8164A3'
+ }
+ },
+ {
+ 'name': 'Morangis',
+ 'itemStyle': {
+ 'color': '#8E562E',
+ 'borderColor': '#8E562E'
+ }
+ },
+ {
+ 'name': 'Metchosin',
+ 'itemStyle': {
+ 'color': '#C1504D',
+ 'borderColor': '#C1504D'
+ }
+ },
+ {
+ 'name': 'Kirkby',
+ 'itemStyle': {
+ 'color': '#CCAF0A',
+ 'borderColor': '#CCAF0A'
+ }
+ },
+ {
+ 'name': 'London',
+ 'itemStyle': {
+ 'color': '#956251',
+ 'borderColor': '#956251'
+ }
+ },
+ {
+ 'name': 'Offenbach',
+ 'itemStyle': {
+ 'color': '#C17529',
+ 'borderColor': '#C17529'
+ }
+ },
+ {
+ 'name': 'Warrington',
+ 'itemStyle': {
+ 'color': '#CEC597',
+ 'borderColor': '#CEC597'
+ }
+ },
+ {
+ 'name': 'Vancouver',
+ 'itemStyle': {
+ 'color': '#9F2936',
+ 'borderColor': '#9F2936'
+ }
+ },
+ {
+ 'name': 'SuperiorCard',
+ 'itemStyle': {
+ 'color': 'rgba(128,155,72,255)',
+ 'borderColor': 'rgba(128,155,72,255)'
+ }
+ },
+ {
+ 'name': 'Lille',
+ 'itemStyle': {
+ 'color': '#ac7430',
+ 'borderColor': '#ac7430'
+ }
+ },
+ {
+ 'name': 'Hamburg',
+ 'itemStyle': {
+ 'color': '#00BCF2',
+ 'borderColor': '#00BCF2'
+ }
+ },
+ {
+ 'name': 'Langley',
+ 'itemStyle': {
+ 'color': '#CD7B38',
+ 'borderColor': '#CD7B38'
+ }
+ },
+ {
+ 'name': 'Les Ulis',
+ 'itemStyle': {
+ 'color': '#424242',
+ 'borderColor': '#424242'
+ }
+ },
+ {
+ 'name': 'Saarbrücken',
+ 'itemStyle': {
+ 'color': '#f63185',
+ 'borderColor': '#f63185'
+ }
+ },
+ {
+ 'name': 'N. Vancouver',
+ 'itemStyle': {
+ 'color': '#9CBC59',
+ 'borderColor': '#9CBC59'
+ }
+ },
+ {
+ 'name': 'Chalk Riber',
+ 'itemStyle': {
+ 'color': '#4F4BD9',
+ 'borderColor': '#4F4BD9'
+ }
+ },
+ {
+ 'name': 'Esher-Molesey',
+ 'itemStyle': {
+ 'color': '#3EC562',
+ 'borderColor': '#3EC562'
+ }
+ },
+ {
+ 'name': 'Chatou',
+ 'itemStyle': {
+ 'color': '#F06F2E',
+ 'borderColor': '#F06F2E'
+ }
+ },
+ {
+ 'name': 'Hannover',
+ 'itemStyle': {
+ 'color': '#C3986D',
+ 'borderColor': '#C3986D'
+ }
+ },
+ {
+ 'name': 'Roncq',
+ 'itemStyle': {
+ 'color': '#4D291C',
+ 'borderColor': '#4D291C'
+ }
+ },
+ {
+ 'name': 'Ingolstadt',
+ 'itemStyle': {
+ 'color': '#009c7a',
+ 'borderColor': '#009c7a'
+ }
+ },
+ {
+ 'name': 'Drancy',
+ 'itemStyle': {
+ 'color': '#986F0B',
+ 'borderColor': '#986F0B'
+ }
+ },
+ {
+ 'name': 'Langford',
+ 'itemStyle': {
+ 'color': '#3C8EA4',
+ 'borderColor': '#3C8EA4'
+ }
+ },
+ {
+ 'name': 'Lebanon',
+ 'itemStyle': {
+ 'color': '#4F82BE',
+ 'borderColor': '#4F82BE'
+ }
+ },
+ {
+ 'name': 'Maidenhead',
+ 'itemStyle': {
+ 'color': '#D38017',
+ 'borderColor': '#D38017'
+ }
+ },
+ {
+ 'name': 'Stoke-on-Trent',
+ 'itemStyle': {
+ 'color': '#A8CDD7',
+ 'borderColor': '#A8CDD7'
+ }
+ },
+ {
+ 'name': 'Peterborough',
+ 'itemStyle': {
+ 'color': '#7A072D',
+ 'borderColor': '#7A072D'
+ }
+ },
+ {
+ 'name': 'Suresnes',
+ 'itemStyle': {
+ 'color': '#859599',
+ 'borderColor': '#859599'
+ }
+ },
+ {
+ 'name': 'Versailles',
+ 'itemStyle': {
+ 'color': '#84AA33',
+ 'borderColor': '#84AA33'
+ }
+ },
+ {
+ 'name': 'Neunkirchen',
+ 'itemStyle': {
+ 'color': '#ff8b67',
+ 'borderColor': '#ff8b67'
+ }
+ },
+ {
+ 'name': 'Vista',
+ 'itemStyle': {
+ 'color': 'rgba(106,82,134,255)',
+ 'borderColor': 'rgba(106,82,134,255)'
+ }
+ },
+ {
+ 'name': 'Westminster',
+ 'itemStyle': {
+ 'color': '#1B587C',
+ 'borderColor': '#1B587C'
+ }
+ },
+ {
+ 'name': 'Kiel',
+ 'itemStyle': {
+ 'color': '#A19574',
+ 'borderColor': '#A19574'
+ }
+ },
+ {
+ 'name': 'Newcastle upon Tyne',
+ 'itemStyle': {
+ 'color': '#918485',
+ 'borderColor': '#918485'
+ }
+ },
+ {
+ 'name': 'Oxon',
+ 'itemStyle': {
+ 'color': '#FFA98C',
+ 'borderColor': '#FFA98C'
+ }
+ },
+ {
+ 'name': 'West Sussex',
+ 'itemStyle': {
+ 'color': '#B0E3C0',
+ 'borderColor': '#B0E3C0'
+ }
+ },
+ {
+ 'name': 'Oak Bay',
+ 'itemStyle': {
+ 'color': '#4BADC7',
+ 'borderColor': '#4BADC7'
+ }
+ },
+ {
+ 'name': 'Milton Keynes',
+ 'itemStyle': {
+ 'color': '#BA144C',
+ 'borderColor': '#BA144C'
+ }
+ },
+ {
+ 'name': 'Eilenburg',
+ 'itemStyle': {
+ 'color': '#F0A22E',
+ 'borderColor': '#F0A22E'
+ }
+ },
+ {
+ 'name': 'ColonialVoice',
+ 'itemStyle': {
+ 'color': 'rgba(64,105,157,255)',
+ 'borderColor': 'rgba(64,105,157,255)'
+ }
+ },
+ {
+ 'name': 'Liverpool',
+ 'itemStyle': {
+ 'color': '#A28E6A',
+ 'borderColor': '#A28E6A'
+ }
+ },
+ {
+ 'name': 'Calgary',
+ 'itemStyle': {
+ 'color': '#9F413E',
+ 'borderColor': '#9F413E'
+ }
+ },
+ {
+ 'name': 'CAD',
+ 'itemStyle': {
+ 'color': '#40699D',
+ 'borderColor': '#40699D'
+ }
+ },
+ {
+ 'name': 'Paris La Defense',
+ 'itemStyle': {
+ 'color': '#989391',
+ 'borderColor': '#989391'
+ }
+ },
+ {
+ 'name': 'Villeneuve-d\'Ascq',
+ 'itemStyle': {
+ 'color': '#886CE4',
+ 'borderColor': '#886CE4'
+ }
+ },
+ {
+ 'name': 'Gloucestershire',
+ 'itemStyle': {
+ 'color': '#964305',
+ 'borderColor': '#964305'
+ }
+ },
+ {
+ 'name': 'Gateshead',
+ 'itemStyle': {
+ 'color': '#485FB5',
+ 'borderColor': '#485FB5'
+ }
+ },
+ {
+ 'name': 'Salzgitter',
+ 'itemStyle': {
+ 'color': '#87a0c7',
+ 'borderColor': '#87a0c7'
+ }
+ },
+ {
+ 'name': 'Woolston',
+ 'itemStyle': {
+ 'color': '#FFE2C5',
+ 'borderColor': '#FFE2C5'
+ }
+ },
+ {
+ 'name': 'Frankfurt',
+ 'itemStyle': {
+ 'color': '#40699D',
+ 'borderColor': '#40699D'
+ }
+ },
+ {
+ 'name': 'Münster',
+ 'itemStyle': {
+ 'color': '#7e7eb2',
+ 'borderColor': '#7e7eb2'
+ }
+ },
+ {
+ 'name': 'York',
+ 'itemStyle': {
+ 'color': '#587C7D',
+ 'borderColor': '#587C7D'
+ }
+ },
+ {
+ 'name': 'High Wycombe',
+ 'itemStyle': {
+ 'color': '#F07F09',
+ 'borderColor': '#F07F09'
+ }
+ },
+ {
+ 'name': 'Stuttgart',
+ 'itemStyle': {
+ 'color': '#E3008C',
+ 'borderColor': '#E3008C'
+ }
+ },
+ {
+ 'name': 'Sooke',
+ 'itemStyle': {
+ 'color': '#4E8542',
+ 'borderColor': '#4E8542'
+ }
+ },
+ {
+ 'name': 'Essen',
+ 'itemStyle': {
+ 'color': '#B58B80',
+ 'borderColor': '#B58B80'
+ }
+ },
+ {
+ 'name': 'München',
+ 'itemStyle': {
+ 'color': '#4dc0a6',
+ 'borderColor': '#4dc0a6'
+ }
+ },
+ {
+ 'name': 'Haney',
+ 'itemStyle': {
+ 'color': '#6A5286',
+ 'borderColor': '#6A5286'
+ }
+ },
+ {
+ 'name': 'Port Hammond',
+ 'itemStyle': {
+ 'color': '#F89746',
+ 'borderColor': '#F89746'
+ }
+ },
+ {
+ 'name': 'Saint Ouen',
+ 'itemStyle': {
+ 'color': '#744DA9',
+ 'borderColor': '#744DA9'
+ }
+ },
+ {
+ 'name': 'Watford',
+ 'itemStyle': {
+ 'color': '#E8B7B7',
+ 'borderColor': '#E8B7B7'
+ }
+ },
+ {
+ 'name': 'GBP',
+ 'itemStyle': {
+ 'color': '#C32D2E',
+ 'borderColor': '#C32D2E'
+ }
+ },
+ {
+ 'name': 'Paderborn',
+ 'itemStyle': {
+ 'color': '#F0C42E',
+ 'borderColor': '#F0C42E'
+ }
+ },
+ {
+ 'name': 'Dunkerque',
+ 'itemStyle': {
+ 'color': '#881798',
+ 'borderColor': '#881798'
+ }
+ },
+ {
+ 'name': 'Colomiers',
+ 'itemStyle': {
+ 'color': '#efa835',
+ 'borderColor': '#efa835'
+ }
+ },
+ {
+ 'name': 'Oxford',
+ 'itemStyle': {
+ 'color': '#D8B25C',
+ 'borderColor': '#D8B25C'
+ }
+ },
+ {
+ 'name': 'Bury',
+ 'itemStyle': {
+ 'color': '#FEB80A',
+ 'borderColor': '#FEB80A'
+ }
+ },
+ {
+ 'name': 'Royal Oak',
+ 'itemStyle': {
+ 'color': '#009DD9',
+ 'borderColor': '#009DD9'
+ }
+ },
+ {
+ 'name': 'Shawnee',
+ 'itemStyle': {
+ 'color': '#F07F09',
+ 'borderColor': '#F07F09'
+ }
+ },
+ {
+ 'name': 'Lancaster',
+ 'itemStyle': {
+ 'color': '#D34817',
+ 'borderColor': '#D34817'
+ }
+ },
+ {
+ 'name': 'DEM',
+ 'itemStyle': {
+ 'color': '#4E342E',
+ 'borderColor': '#4E342E'
+ }
+ },
+ {
+ 'name': 'Grevenbroich',
+ 'itemStyle': {
+ 'color': '#FFA836',
+ 'borderColor': '#FFA836'
+ }
+ },
+ {
+ 'name': 'Distinguish',
+ 'itemStyle': {
+ 'color': 'rgba(159,65,62,255)',
+ 'borderColor': 'rgba(159,65,62,255)'
+ }
+ },
+ {
+ 'name': 'Cheltenham',
+ 'itemStyle': {
+ 'color': '#FF6551',
+ 'borderColor': '#FF6551'
+ }
+ },
+ {
+ 'name': 'Reading',
+ 'itemStyle': {
+ 'color': '#72A376',
+ 'borderColor': '#72A376'
+ }
+ },
+ {
+ 'name': 'Pantin',
+ 'itemStyle': {
+ 'color': '#69797E',
+ 'borderColor': '#69797E'
+ }
+ },
+ {
+ 'name': 'Kassel',
+ 'itemStyle': {
+ 'color': '#e65e20',
+ 'borderColor': '#e65e20'
+ }
+ },
+ {
+ 'name': 'Orly',
+ 'itemStyle': {
+ 'color': '#6E6A68',
+ 'borderColor': '#6E6A68'
+ }
+ },
+ {
+ 'name': 'FRF',
+ 'itemStyle': {
+ 'color': '#5ba33b',
+ 'borderColor': '#5ba33b'
+ }
+ },
+ {
+ 'name': 'Cergy',
+ 'itemStyle': {
+ 'color': '#B4009E',
+ 'borderColor': '#B4009E'
+ }
+ },
+ {
+ 'name': 'Paris',
+ 'itemStyle': {
+ 'color': '#666666',
+ 'borderColor': '#666666'
+ }
+ }
+ ],
+ links: [
+ {
+ 'source': 'FRF',
+ 'target': 'Colomiers',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'SuperiorCard',
+ 'target': 'FRF',
+ 'value': 894.5999908447266
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'München',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Reading',
+ 'value': 188.52999836206436
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Shawnee',
+ 'value': 2346.919983509928
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Kirkby',
+ 'value': 753.4000000059605
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Roncq',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Peterborough',
+ 'value': 999.159998036921
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Frankfurt am Main',
+ 'value': 536.7599945068359
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Oxford',
+ 'value': 1831.3799968883395
+ },
+ {
+ 'source': 'Vista',
+ 'target': 'FRF',
+ 'value': 1789.1999816894531
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Langley',
+ 'value': 1274.8199949413538
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Offenbach',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Villeneuve-d\'Ascq',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Dunkerque',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Eilenburg',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Paris',
+ 'value': 1073.5199890136719
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Maidenhead',
+ 'value': 549.8400026857853
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Sooke',
+ 'value': 1764.499989286065
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Vancouver',
+ 'value': 1528.580000281334
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Hamburg',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'London',
+ 'value': 8619.309983983636
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Oak Bay',
+ 'value': 1565.109990529716
+ },
+ {
+ 'source': 'Distinguish',
+ 'target': 'FRF',
+ 'value': 2683.7999725341797
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Neunkirchen',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Cergy',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Hof',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Paris La Defense',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Westminster',
+ 'value': 1149.7999994903803
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Ingolstadt',
+ 'value': 536.7599945068359
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Saint Ouen',
+ 'value': 0.5899999737739563
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Lille',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Leeds',
+ 'value': 1356.6899970173836
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Morangis',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Orly',
+ 'value': 0.5899999737739563
+ },
+ {
+ 'source': 'SuperiorCard',
+ 'target': 'DEM',
+ 'value': 1431.3599853515625
+ },
+ {
+ 'source': 'Vista',
+ 'target': 'CAD',
+ 'value': 5369.929964579642
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Paris',
+ 'value': 0.6399999856948853
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Liverpool',
+ 'value': 857.1999968588352
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Stoke-on-Trent',
+ 'value': 1131.7099939212203
+ },
+ {
+ 'source': 'Distinguish',
+ 'target': 'DEM',
+ 'value': 2504.8799743652344
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Langford',
+ 'value': 2343.4599857851863
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Kassel',
+ 'value': 536.7599945068359
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'High Wycombe',
+ 'value': 216.83999809622765
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Port Hammond',
+ 'value': 1711.1399984136224
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Duesseldorf',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Gloucestershire',
+ 'value': 422.28999888151884
+ },
+ {
+ 'source': 'Distinguish',
+ 'target': 'GBP',
+ 'value': 10384.949975416064
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Roissy en Brie',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'West Sussex',
+ 'value': 592.1700052022934
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Cliffside',
+ 'value': 2906.2699892893434
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Newcastle upon Tyne',
+ 'value': 1448.2899911925197
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Runcorn',
+ 'value': 1120.4800013303757
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'W. York',
+ 'value': 612.1199932694435
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Kiel',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Woolston',
+ 'value': 833.3199937939644
+ },
+ {
+ 'source': 'Distinguish',
+ 'target': 'CAD',
+ 'value': 6950.059956334531
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Frankfurt',
+ 'value': 715.6799926757812
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Colma',
+ 'value': 0.2199999988079071
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Essen',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Chatou',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Cheltenham',
+ 'value': 573.0499979257584
+ },
+ {
+ 'source': 'SuperiorCard',
+ 'target': 'GBP',
+ 'value': 8228.39999615401
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Haney',
+ 'value': 2310.4499812424183
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Saint Ouen',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Chalk Riber',
+ 'value': 0.9200000166893005
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Salzgitter',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'ColonialVoice',
+ 'target': 'FRF',
+ 'value': 1610.2799835205078
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Stuttgart',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Saint-Denis',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Royal Oak',
+ 'value': 2128.459992274642
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Les Ulis',
+ 'value': 715.6799926757812
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Drancy',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Esher-Molesey',
+ 'value': 911.4700058028102
+ },
+ {
+ 'source': 'SuperiorCard',
+ 'target': 'CAD',
+ 'value': 7388.099954992533
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Bury',
+ 'value': 903.9400005489588
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Watford',
+ 'value': 1326.5300009772182
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Victoria',
+ 'value': 827.3899968340993
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Saarbrücken',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Lancaster',
+ 'value': 685.6899967193604
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Pantin',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Newton',
+ 'value': 1781.909985654056
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Oxon',
+ 'value': 493.6499986946583
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Calgary',
+ 'value': 361.3899962902069
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Münster',
+ 'value': 715.6799926757812
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Grevenbroich',
+ 'value': 536.7599945068359
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Paderborn',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'York',
+ 'value': 3172.9999914616346
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Metchosin',
+ 'value': 1750.7899813987315
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Suresnes',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Versailles',
+ 'value': 894.5999908447266
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Erlangen',
+ 'value': 536.7599945068359
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'Lebanon',
+ 'value': 0.8700000047683716
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Wokingham',
+ 'value': 812.6600027084351
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Cambridge',
+ 'value': 500.36999743431807
+ },
+ {
+ 'source': 'ColonialVoice',
+ 'target': 'GBP',
+ 'value': 8040.7799860313535
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Saint Germain en Laye',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Metz',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'FRF',
+ 'target': 'Orleans',
+ 'value': 357.8399963378906
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Milton Keynes',
+ 'value': 1648.2200061008334
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Warrington',
+ 'value': 2162.8300000429153
+ },
+ {
+ 'source': 'CAD',
+ 'target': 'N. Vancouver',
+ 'value': 1862.4599857926369
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Hannover',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'Vista',
+ 'target': 'GBP',
+ 'value': 9497.539981640875
+ },
+ {
+ 'source': 'DEM',
+ 'target': 'Werne',
+ 'value': 178.9199981689453
+ },
+ {
+ 'source': 'ColonialVoice',
+ 'target': 'DEM',
+ 'value': 1789.1999816894531
+ },
+ {
+ 'source': 'ColonialVoice',
+ 'target': 'CAD',
+ 'value': 7907.36997512728
+ },
+ {
+ 'source': 'GBP',
+ 'target': 'Gateshead',
+ 'value': 1425.7099913656712
+ },
+ {
+ 'source': 'Vista',
+ 'target': 'DEM',
+ 'value': 1968.1199798583984
+ }
+ ],
+ lineStyle: {
+ color: 'source',
+ curveness: 0.5
+ },
+ itemStyle: {
+ color: '#1f77b4',
+ borderColor: '#1f77b4'
+ },
+ label: {
+ color: 'rgba(0,0,0,0.7)',
+ fontFamily: 'Arial',
+ fontSize: 10
+ }
+ }],
+ tooltip: {
+ trigger: 'item'
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/sankey-levels.ts b/public/examples/ts/sankey-levels.ts
new file mode 100644
index 0000000..57e63d0
--- /dev/null
+++ b/public/examples/ts/sankey-levels.ts
@@ -0,0 +1,72 @@
+/*
+title: Sankey with Levels Setting
+category: sankey
+titleCN: 桑基图层级自定义样式
+difficulty: 2
+*/
+
+myChart.showLoading();
+$.get(ROOT_PATH + '/data/asset/data/product.json', function (data) {
+ myChart.hideLoading();
+
+ myChart.setOption(option = {
+ title: {
+ text: 'Sankey Diagram'
+ },
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ series: [
+ {
+ type: 'sankey',
+ data: data.nodes,
+ links: data.links,
+ emphasis: {
+ focus: 'adjacency'
+ },
+ levels: [{
+ depth: 0,
+ itemStyle: {
+ color: '#fbb4ae'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+ }, {
+ depth: 1,
+ itemStyle: {
+ color: '#b3cde3'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+ }, {
+ depth: 2,
+ itemStyle: {
+ color: '#ccebc5'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+ }, {
+ depth: 3,
+ itemStyle: {
+ color: '#decbe4'
+ },
+ lineStyle: {
+ color: 'source',
+ opacity: 0.6
+ }
+ }],
+ lineStyle: {
+ curveness: 0.5
+ }
+ }
+ ]
+ });
+});
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/sankey-nodeAlign-left.ts b/public/examples/ts/sankey-nodeAlign-left.ts
new file mode 100644
index 0000000..1121b1d
--- /dev/null
+++ b/public/examples/ts/sankey-nodeAlign-left.ts
@@ -0,0 +1,38 @@
+/*
+title: Node Align Left in Sankey
+category: sankey
+titleCN: 桑基图左对齐布局
+difficulty: 3
+*/
+
+myChart.showLoading();
+$.get(ROOT_PATH + '/data/asset/data/energy.json', function (data) {
+ myChart.hideLoading();
+
+ myChart.setOption(option = {
+ title: {
+ text: 'Node Align Right'
+ },
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ series: [
+ {
+ type: 'sankey',
+ emphasis: {
+ focus: 'adjacency'
+ },
+ nodeAlign: 'left',
+ data: data.nodes,
+ links: data.links,
+ lineStyle: {
+ color: 'source',
+ curveness: 0.5
+ }
+ }
+ ]
+ });
+});
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/sankey-nodeAlign-right.ts b/public/examples/ts/sankey-nodeAlign-right.ts
new file mode 100644
index 0000000..0c19ce1
--- /dev/null
+++ b/public/examples/ts/sankey-nodeAlign-right.ts
@@ -0,0 +1,40 @@
+/*
+title: Node Align Right in Sankey
+category: sankey
+titleCN: 桑基图右对齐布局
+difficulty: 3
+*/
+
+myChart.showLoading();
+$.get(ROOT_PATH + '/data/asset/data/energy.json', function (data) {
+ myChart.hideLoading();
+
+ myChart.setOption(option = {
+ title: {
+ text: 'Node Align Left'
+ },
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ animation: false,
+ series: [
+ {
+ type: 'sankey',
+ emphasis: {
+ focus: 'adjacency'
+ },
+ nodeAlign: 'right',
+ data: data.nodes,
+ links: data.links,
+ lineStyle: {
+ color: 'source',
+ curveness: 0.5
+ }
+ }
+ ]
+ });
+});
+
+export {};
+
diff --git a/public/examples/ts/sankey-simple.ts b/public/examples/ts/sankey-simple.ts
new file mode 100644
index 0000000..00520bb
--- /dev/null
+++ b/public/examples/ts/sankey-simple.ts
@@ -0,0 +1,56 @@
+/*
+title: Basic Sankey
+category: sankey
+titleCN: 基础桑基图
+difficulty: 0
+*/
+
+option = {
+ series: {
+ type: 'sankey',
+ layout: 'none',
+ emphasis: {
+ focus: 'adjacency'
+ },
+ data: [{
+ name: 'a'
+ }, {
+ name: 'b'
+ }, {
+ name: 'a1'
+ }, {
+ name: 'a2'
+ }, {
+ name: 'b1'
+ }, {
+ name: 'c'
+ }],
+ links: [{
+ source: 'a',
+ target: 'a1',
+ value: 5
+ }, {
+ source: 'a',
+ target: 'a2',
+ value: 3
+ }, {
+ source: 'b',
+ target: 'b1',
+ value: 8
+ }, {
+ source: 'a',
+ target: 'b1',
+ value: 3
+ }, {
+ source: 'b1',
+ target: 'a1',
+ value: 1
+ }, {
+ source: 'b1',
+ target: 'c',
+ value: 2
+ }]
+ }
+};
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/sankey-vertical.ts b/public/examples/ts/sankey-vertical.ts
new file mode 100644
index 0000000..24917c4
--- /dev/null
+++ b/public/examples/ts/sankey-vertical.ts
@@ -0,0 +1,49 @@
+/*
+title: Sankey Orient Vertical
+category: sankey
+titleCN: 垂直方向的桑基图
+difficulty: 1
+*/
+
+option = {
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ animation: false,
+ series: [
+ {
+ type: 'sankey',
+ bottom: '10%',
+ emphasis: {
+ focus: 'adjacency'
+ },
+ data: [
+ {name: 'a'},
+ {name: 'b'},
+ {name: 'a1'},
+ {name: 'b1'},
+ {name: 'c'},
+ {name: 'e'}
+ ],
+ links: [
+ {source: 'a', target: 'a1', value: 5},
+ {source: 'e', target: 'b', value: 3},
+ {source: 'a', target: 'b1', value: 3},
+ {source: 'b1', target: 'a1', value: 1},
+ {source: 'b1', target: 'c', value: 2},
+ {source: 'b', target: 'c', value: 1}
+ ],
+ orient: 'vertical',
+ label: {
+ position: 'top'
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.5
+ }
+ }
+ ]
+}
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/scatter-aggregate-bar.ts b/public/examples/ts/scatter-aggregate-bar.ts
new file mode 100644
index 0000000..ed14b7a
--- /dev/null
+++ b/public/examples/ts/scatter-aggregate-bar.ts
@@ -0,0 +1,189 @@
+/*
+title: Aggregate Scatter to Bar
+category: scatter, animation
+titleCN: 散点图聚合为柱状图动画
+difficulty: 4
+videoStart: 2000
+videoEnd: 6000
+*/
+
+const femaleData = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+ [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+ [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+ [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+ [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+ [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+ [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+ [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+ [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+ [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+ [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+ [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+ [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+ [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+ [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+ [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+ [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+ [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+ [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+ [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+ [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+ [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+ [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+ [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+ [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+ [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+ [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+ [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+ [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+ [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+ [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+ [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+ [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+ [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+ [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+ [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+ [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+ [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+ [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+ [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+ [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+ [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+ [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+ [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+ [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+ [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+ [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+ [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+ [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+ [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+ [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+ [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+];
+var maleDeta = [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
+ [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
+ [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
+ [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
+ [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
+ [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
+ [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
+ [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
+ [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
+ [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
+ [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
+ [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
+ [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
+ [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
+ [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
+ [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
+ [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
+ [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
+ [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
+ [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
+ [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
+ [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
+ [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
+ [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
+ [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
+ [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
+ [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
+ [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
+ [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
+ [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
+ [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
+ [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
+ [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
+ [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
+ [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
+ [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
+ [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
+ [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
+ [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
+ [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
+ [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
+ [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
+ [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
+ [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
+ [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
+ [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
+ [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
+ [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
+ [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
+ [180.3, 83.2], [180.3, 83.2]
+];
+
+function calculateAverage(data: number[][], dim: number) {
+ let total = 0;
+ for (var i = 0; i < data.length; i++) {
+ total += data[i][dim];
+ }
+ return total /= data.length;
+}
+
+
+const scatterOption: echarts.EChartsOption = option = {
+ xAxis: {
+ scale: true
+ },
+ yAxis: {
+ scale: true
+ },
+ series: [{
+ type: 'scatter',
+ id: 'female',
+ dataGroupId: 'female',
+ universalTransition: {
+ enabled: true,
+ delay: function (idx, count) {
+ return Math.random() * 400;
+ }
+ },
+ data: femaleData
+ }, {
+ type: 'scatter',
+ id: 'male',
+ dataGroupId: 'male',
+ universalTransition: {
+ enabled: true,
+ delay: function (idx, count) {
+ return Math.random() * 400;
+ }
+ },
+ data: maleDeta
+ }]
+};
+
+const barOption: echarts.EChartsOption = {
+ xAxis: {
+ type: 'category',
+ data: ['Female', 'Male']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ id: 'total',
+ data: [{
+ value: calculateAverage(maleDeta, 0),
+ groupId: 'male'
+ }, {
+ value: calculateAverage(femaleData, 0),
+ groupId: 'female'
+ }],
+ universalTransition: {
+ enabled: true,
+ seriesKey: ['female', 'male'],
+ delay: function (idx, count) {
+ return Math.random() * 400;
+ }
+ }
+ }]
+};
+
+let currentOption = scatterOption;
+
+setInterval(function () {
+ currentOption = currentOption === scatterOption ? barOption : scatterOption;
+ myChart.setOption(currentOption, true);
+}, 2000);
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/scatter-anscombe-quartet.ts b/public/examples/ts/scatter-anscombe-quartet.ts
new file mode 100644
index 0000000..eeac7f6
--- /dev/null
+++ b/public/examples/ts/scatter-anscombe-quartet.ts
@@ -0,0 +1,147 @@
+/*
+title: Anscomb's quartet
+category: scatter
+titleCN: Anscomb's quartet
+difficulty: 1
+*/
+
+const dataAll = [
+ [
+ [10.0, 8.04],
+ [8.0, 6.95],
+ [13.0, 7.58],
+ [9.0, 8.81],
+ [11.0, 8.33],
+ [14.0, 9.96],
+ [6.0, 7.24],
+ [4.0, 4.26],
+ [12.0, 10.84],
+ [7.0, 4.82],
+ [5.0, 5.68]
+ ],
+ [
+ [10.0, 9.14],
+ [8.0, 8.14],
+ [13.0, 8.74],
+ [9.0, 8.77],
+ [11.0, 9.26],
+ [14.0, 8.10],
+ [6.0, 6.13],
+ [4.0, 3.10],
+ [12.0, 9.13],
+ [7.0, 7.26],
+ [5.0, 4.74]
+ ],
+ [
+ [10.0, 7.46],
+ [8.0, 6.77],
+ [13.0, 12.74],
+ [9.0, 7.11],
+ [11.0, 7.81],
+ [14.0, 8.84],
+ [6.0, 6.08],
+ [4.0, 5.39],
+ [12.0, 8.15],
+ [7.0, 6.42],
+ [5.0, 5.73]
+ ],
+ [
+ [8.0, 6.58],
+ [8.0, 5.76],
+ [8.0, 7.71],
+ [8.0, 8.84],
+ [8.0, 8.47],
+ [8.0, 7.04],
+ [8.0, 5.25],
+ [19.0, 12.50],
+ [8.0, 5.56],
+ [8.0, 7.91],
+ [8.0, 6.89]
+ ]
+];
+
+const markLineOpt: echarts.MarkLineComponentOption = {
+ animation: false,
+ label: {
+ formatter: 'y = 0.5 * x + 3',
+ align: 'right'
+ },
+ lineStyle: {
+ type: 'solid'
+ },
+ tooltip: {
+ formatter: 'y = 0.5 * x + 3'
+ },
+ data: [[{
+ coord: [0, 3],
+ symbol: 'none'
+ }, {
+ coord: [20, 13],
+ symbol: 'none'
+ }]]
+};
+
+option = {
+ title: {
+ text: 'Anscombe\'s quartet',
+ left: 'center',
+ top: 0
+ },
+ grid: [
+ {left: '7%', top: '7%', width: '38%', height: '38%'},
+ {right: '7%', top: '7%', width: '38%', height: '38%'},
+ {left: '7%', bottom: '7%', width: '38%', height: '38%'},
+ {right: '7%', bottom: '7%', width: '38%', height: '38%'}
+ ],
+ tooltip: {
+ formatter: 'Group {a}: ({c})'
+ },
+ xAxis: [
+ {gridIndex: 0, min: 0, max: 20},
+ {gridIndex: 1, min: 0, max: 20},
+ {gridIndex: 2, min: 0, max: 20},
+ {gridIndex: 3, min: 0, max: 20}
+ ],
+ yAxis: [
+ {gridIndex: 0, min: 0, max: 15},
+ {gridIndex: 1, min: 0, max: 15},
+ {gridIndex: 2, min: 0, max: 15},
+ {gridIndex: 3, min: 0, max: 15}
+ ],
+ series: [
+ {
+ name: 'I',
+ type: 'scatter',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ data: dataAll[0],
+ markLine: markLineOpt
+ },
+ {
+ name: 'II',
+ type: 'scatter',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: dataAll[1],
+ markLine: markLineOpt
+ },
+ {
+ name: 'III',
+ type: 'scatter',
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ data: dataAll[2],
+ markLine: markLineOpt
+ },
+ {
+ name: 'IV',
+ type: 'scatter',
+ xAxisIndex: 3,
+ yAxisIndex: 3,
+ data: dataAll[3],
+ markLine: markLineOpt
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-aqi-color.ts b/public/examples/ts/scatter-aqi-color.ts
new file mode 100644
index 0000000..a9a5131
--- /dev/null
+++ b/public/examples/ts/scatter-aqi-color.ts
@@ -0,0 +1,262 @@
+/*
+title: Scatter Aqi Color
+category: scatter
+titleCN: AQI 气泡图
+difficulty: 7
+*/
+
+const dataBJ = [
+ [1,55,9,56,0.46,18,6,"良"],
+ [2,25,11,21,0.65,34,9,"优"],
+ [3,56,7,63,0.3,14,5,"良"],
+ [4,33,7,29,0.33,16,6,"优"],
+ [5,42,24,44,0.76,40,16,"优"],
+ [6,82,58,90,1.77,68,33,"良"],
+ [7,74,49,77,1.46,48,27,"良"],
+ [8,78,55,80,1.29,59,29,"良"],
+ [9,267,216,280,4.8,108,64,"重度污染"],
+ [10,185,127,216,2.52,61,27,"中度污染"],
+ [11,39,19,38,0.57,31,15,"优"],
+ [12,41,11,40,0.43,21,7,"优"],
+ [13,64,38,74,1.04,46,22,"良"],
+ [14,108,79,120,1.7,75,41,"轻度污染"],
+ [15,108,63,116,1.48,44,26,"轻度污染"],
+ [16,33,6,29,0.34,13,5,"优"],
+ [17,94,66,110,1.54,62,31,"良"],
+ [18,186,142,192,3.88,93,79,"中度污染"],
+ [19,57,31,54,0.96,32,14,"良"],
+ [20,22,8,17,0.48,23,10,"优"],
+ [21,39,15,36,0.61,29,13,"优"],
+ [22,94,69,114,2.08,73,39,"良"],
+ [23,99,73,110,2.43,76,48,"良"],
+ [24,31,12,30,0.5,32,16,"优"],
+ [25,42,27,43,1,53,22,"优"],
+ [26,154,117,157,3.05,92,58,"中度污染"],
+ [27,234,185,230,4.09,123,69,"重度污染"],
+ [28,160,120,186,2.77,91,50,"中度污染"],
+ [29,134,96,165,2.76,83,41,"轻度污染"],
+ [30,52,24,60,1.03,50,21,"良"],
+ [31,46,5,49,0.28,10,6,"优"]
+];
+
+const dataGZ = [
+ [1,26,37,27,1.163,27,13,"优"],
+ [2,85,62,71,1.195,60,8,"良"],
+ [3,78,38,74,1.363,37,7,"良"],
+ [4,21,21,36,0.634,40,9,"优"],
+ [5,41,42,46,0.915,81,13,"优"],
+ [6,56,52,69,1.067,92,16,"良"],
+ [7,64,30,28,0.924,51,2,"良"],
+ [8,55,48,74,1.236,75,26,"良"],
+ [9,76,85,113,1.237,114,27,"良"],
+ [10,91,81,104,1.041,56,40,"良"],
+ [11,84,39,60,0.964,25,11,"良"],
+ [12,64,51,101,0.862,58,23,"良"],
+ [13,70,69,120,1.198,65,36,"良"],
+ [14,77,105,178,2.549,64,16,"良"],
+ [15,109,68,87,0.996,74,29,"轻度污染"],
+ [16,73,68,97,0.905,51,34,"良"],
+ [17,54,27,47,0.592,53,12,"良"],
+ [18,51,61,97,0.811,65,19,"良"],
+ [19,91,71,121,1.374,43,18,"良"],
+ [20,73,102,182,2.787,44,19,"良"],
+ [21,73,50,76,0.717,31,20,"良"],
+ [22,84,94,140,2.238,68,18,"良"],
+ [23,93,77,104,1.165,53,7,"良"],
+ [24,99,130,227,3.97,55,15,"良"],
+ [25,146,84,139,1.094,40,17,"轻度污染"],
+ [26,113,108,137,1.481,48,15,"轻度污染"],
+ [27,81,48,62,1.619,26,3,"良"],
+ [28,56,48,68,1.336,37,9,"良"],
+ [29,82,92,174,3.29,0,13,"良"],
+ [30,106,116,188,3.628,101,16,"轻度污染"],
+ [31,118,50,0,1.383,76,11,"轻度污染"]
+];
+
+const dataSH = [
+ [1,91,45,125,0.82,34,23,"良"],
+ [2,65,27,78,0.86,45,29,"良"],
+ [3,83,60,84,1.09,73,27,"良"],
+ [4,109,81,121,1.28,68,51,"轻度污染"],
+ [5,106,77,114,1.07,55,51,"轻度污染"],
+ [6,109,81,121,1.28,68,51,"轻度污染"],
+ [7,106,77,114,1.07,55,51,"轻度污染"],
+ [8,89,65,78,0.86,51,26,"良"],
+ [9,53,33,47,0.64,50,17,"良"],
+ [10,80,55,80,1.01,75,24,"良"],
+ [11,117,81,124,1.03,45,24,"轻度污染"],
+ [12,99,71,142,1.1,62,42,"良"],
+ [13,95,69,130,1.28,74,50,"良"],
+ [14,116,87,131,1.47,84,40,"轻度污染"],
+ [15,108,80,121,1.3,85,37,"轻度污染"],
+ [16,134,83,167,1.16,57,43,"轻度污染"],
+ [17,79,43,107,1.05,59,37,"良"],
+ [18,71,46,89,0.86,64,25,"良"],
+ [19,97,71,113,1.17,88,31,"良"],
+ [20,84,57,91,0.85,55,31,"良"],
+ [21,87,63,101,0.9,56,41,"良"],
+ [22,104,77,119,1.09,73,48,"轻度污染"],
+ [23,87,62,100,1,72,28,"良"],
+ [24,168,128,172,1.49,97,56,"中度污染"],
+ [25,65,45,51,0.74,39,17,"良"],
+ [26,39,24,38,0.61,47,17,"优"],
+ [27,39,24,39,0.59,50,19,"优"],
+ [28,93,68,96,1.05,79,29,"良"],
+ [29,188,143,197,1.66,99,51,"中度污染"],
+ [30,174,131,174,1.55,108,50,"中度污染"],
+ [31,187,143,201,1.39,89,53,"中度污染"]
+];
+
+const schema = [
+ {name: 'date', index: 0, text: '日'},
+ {name: 'AQIindex', index: 1, text: 'AQI指数'},
+ {name: 'PM25', index: 2, text: 'PM2.5'},
+ {name: 'PM10', index: 3, text: 'PM10'},
+ {name: 'CO', index: 4, text: '一氧化碳（CO）'},
+ {name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
+ {name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
+];
+
+
+const itemStyle = {
+ opacity: 0.8,
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowColor: 'rgba(0,0,0,0.3)'
+};
+
+option = {
+ color: [
+ '#dd4444', '#fec42c', '#80F1BE'
+ ],
+ legend: {
+ top: 10,
+ data: ['北京', '上海', '广州'],
+ textStyle: {
+ fontSize: 16
+ }
+ },
+ grid: {
+ left: '10%',
+ right: 150,
+ top: '18%',
+ bottom: '10%'
+ },
+ tooltip: {
+ backgroundColor: 'rgba(255,255,255,0.7)',
+ formatter: function (param: any) {
+ var value = param.value;
+ return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ + param.seriesName + ' ' + value[0] + '日：'
+ + value[7]
+ + '</div>'
+ + schema[1].text + '：' + value[1] + '<br>'
+ + schema[2].text + '：' + value[2] + '<br>'
+ + schema[3].text + '：' + value[3] + '<br>'
+ + schema[4].text + '：' + value[4] + '<br>'
+ + schema[5].text + '：' + value[5] + '<br>'
+ + schema[6].text + '：' + value[6] + '<br>';
+ }
+ },
+ xAxis: {
+ type: 'value',
+ name: '日期',
+ nameGap: 16,
+ nameTextStyle: {
+ fontSize: 16
+ },
+ max: 31,
+ splitLine: {
+ show: false
+ },
+ },
+ yAxis: {
+ type: 'value',
+ name: 'AQI指数',
+ nameLocation: 'end',
+ nameGap: 20,
+ nameTextStyle: {
+ fontSize: 16
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ visualMap: [
+ {
+ left: 'right',
+ top: '10%',
+ dimension: 2,
+ min: 0,
+ max: 250,
+ itemWidth: 30,
+ itemHeight: 120,
+ calculable: true,
+ precision: 0.1,
+ text: ['圆形大小：PM2.5'],
+ textGap: 30,
+ inRange: {
+ symbolSize: [10, 70]
+ },
+ outOfRange: {
+ symbolSize: [10, 70],
+ color: ['rgba(255,255,255,0.4)']
+ },
+ controller: {
+ inRange: {
+ color: ['#c23531']
+ },
+ outOfRange: {
+ color: ['#999']
+ }
+ }
+ },
+ {
+ left: 'right',
+ bottom: '5%',
+ dimension: 6,
+ min: 0,
+ max: 50,
+ itemHeight: 120,
+ text: ['明暗：二氧化硫'],
+ textGap: 30,
+ inRange: {
+ colorLightness: [0.9, 0.5]
+ },
+ outOfRange: {
+ color: ['rgba(255,255,255,0.4)']
+ },
+ controller: {
+ inRange: {
+ color: ['#c23531']
+ },
+ outOfRange: {
+ color: ['#999']
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '北京',
+ type: 'scatter',
+ itemStyle: itemStyle,
+ data: dataBJ
+ },
+ {
+ name: '上海',
+ type: 'scatter',
+ itemStyle: itemStyle,
+ data: dataSH
+ },
+ {
+ name: '广州',
+ type: 'scatter',
+ itemStyle: itemStyle,
+ data: dataGZ
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-clustering.ts b/public/examples/ts/scatter-clustering.ts
new file mode 100644
index 0000000..6e65962
--- /dev/null
+++ b/public/examples/ts/scatter-clustering.ts
@@ -0,0 +1,133 @@
+/*
+title: Clustering Process
+category: scatter
+titleCN: 数据聚合
+difficulty: 1
+*/
+
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.clustering);
+
+const data = [
+ [3.275154, 2.957587],
+ [-3.344465, 2.603513],
+ [0.355083, -3.376585],
+ [1.852435, 3.547351],
+ [-2.078973, 2.552013],
+ [-0.993756, -0.884433],
+ [2.682252, 4.007573],
+ [-3.087776, 2.878713],
+ [-1.565978, -1.256985],
+ [2.441611, 0.444826],
+ [-0.659487, 3.111284],
+ [-0.459601, -2.618005],
+ [2.17768, 2.387793],
+ [-2.920969, 2.917485],
+ [-0.028814, -4.168078],
+ [3.625746, 2.119041],
+ [-3.912363, 1.325108],
+ [-0.551694, -2.814223],
+ [2.855808, 3.483301],
+ [-3.594448, 2.856651],
+ [0.421993, -2.372646],
+ [1.650821, 3.407572],
+ [-2.082902, 3.384412],
+ [-0.718809, -2.492514],
+ [4.513623, 3.841029],
+ [-4.822011, 4.607049],
+ [-0.656297, -1.449872],
+ [1.919901, 4.439368],
+ [-3.287749, 3.918836],
+ [-1.576936, -2.977622],
+ [3.598143, 1.97597],
+ [-3.977329, 4.900932],
+ [-1.79108, -2.184517],
+ [3.914654, 3.559303],
+ [-1.910108, 4.166946],
+ [-1.226597, -3.317889],
+ [1.148946, 3.345138],
+ [-2.113864, 3.548172],
+ [0.845762, -3.589788],
+ [2.629062, 3.535831],
+ [-1.640717, 2.990517],
+ [-1.881012, -2.485405],
+ [4.606999, 3.510312],
+ [-4.366462, 4.023316],
+ [0.765015, -3.00127],
+ [3.121904, 2.173988],
+ [-4.025139, 4.65231],
+ [-0.559558, -3.840539],
+ [4.376754, 4.863579],
+ [-1.874308, 4.032237],
+ [-0.089337, -3.026809],
+ [3.997787, 2.518662],
+ [-3.082978, 2.884822],
+ [0.845235, -3.454465],
+ [1.327224, 3.358778],
+ [-2.889949, 3.596178],
+ [-0.966018, -2.839827],
+ [2.960769, 3.079555],
+ [-3.275518, 1.577068],
+ [0.639276, -3.41284]
+];
+
+var CLUSTER_COUNT = 6;
+var DIENSIION_CLUSTER_INDEX = 2;
+var COLOR_ALL = [
+ '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+];
+var pieces = [];
+for (var i = 0; i < CLUSTER_COUNT; i++) {
+ pieces.push({
+ value: i,
+ label: 'cluster ' + i,
+ color: COLOR_ALL[i]
+ });
+}
+
+option = {
+ dataset: [{
+ source: data
+ }, {
+ transform: {
+ type: 'ecStat:clustering',
+ // print: true,
+ config: {
+ clusterCount: CLUSTER_COUNT,
+ outputType: 'single',
+ outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
+ }
+ }
+ }],
+ tooltip: {
+ position: 'top'
+ },
+ visualMap: {
+ type: 'piecewise',
+ top: 'middle',
+ min: 0,
+ max: CLUSTER_COUNT,
+ left: 10,
+ splitNumber: CLUSTER_COUNT,
+ dimension: DIENSIION_CLUSTER_INDEX,
+ pieces: pieces
+ },
+ grid: {
+ left: 120
+ },
+ xAxis: {
+ },
+ yAxis: {
+ },
+ series: {
+ type: 'scatter',
+ encode: { tooltip: [0, 1] },
+ symbolSize: 15,
+ itemStyle: {
+ borderColor: '#555'
+ },
+ datasetIndex: 1
+ }
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-effect.ts b/public/examples/ts/scatter-effect.ts
new file mode 100644
index 0000000..1ba7518
--- /dev/null
+++ b/public/examples/ts/scatter-effect.ts
@@ -0,0 +1,80 @@
+/*
+title: Effect Scatter Chart
+category: scatter
+titleCN: 涟漪特效散点图
+difficulty: 2
+*/
+
+option = {
+ xAxis: {
+ scale: true
+ },
+ yAxis: {
+ scale: true
+ },
+ series: [{
+ type: 'effectScatter',
+ symbolSize: 20,
+ data: [
+ [172.7, 105.2],
+ [153.4, 42]
+ ]
+ }, {
+ type: 'scatter',
+ data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+ [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+ [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+ [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+ [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+ [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+ [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+ [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+ [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+ [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+ [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+ [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+ [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+ [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+ [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+ [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+ [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+ [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+ [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+ [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+ [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+ [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+ [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+ [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+ [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+ [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+ [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+ [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+ [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+ [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+ [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+ [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+ [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+ [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+ [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+ [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+ [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+ [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+ [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+ [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+ [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+ [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+ [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+ [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+ [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+ [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+ [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+ [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+ [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+ [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+ [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+ [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+ ],
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-exponential-regression.ts b/public/examples/ts/scatter-exponential-regression.ts
new file mode 100644
index 0000000..959dcf8
--- /dev/null
+++ b/public/examples/ts/scatter-exponential-regression.ts
@@ -0,0 +1,86 @@
+/*
+title: Exponential Regression
+category: scatter
+titleCN: 指数回归（使用统计插件）
+difficulty: 1
+*/
+
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.regression);
+
+option = {
+ dataset: [{
+ source: [
+ [1, 4862.4],
+ [2, 5294.7],
+ [3, 5934.5],
+ [4, 7171.0],
+ [5, 8964.4],
+ [6, 10202.2],
+ [7, 11962.5],
+ [8, 14928.3],
+ [9, 16909.2],
+ [10, 18547.9],
+ [11, 21617.8],
+ [12, 26638.1],
+ [13, 34634.4],
+ [14, 46759.4],
+ [15, 58478.1],
+ [16, 67884.6],
+ [17, 74462.6],
+ [18, 79395.7]
+ ]
+ }, {
+ transform: {
+ type: 'ecStat:regression',
+ config: {
+ method: 'exponential',
+ // 'end' by default
+ // formulaOn: 'start'
+ }
+ }
+ }],
+ title: {
+ text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
+ subtext: 'By ecStat.regression',
+ sublink: 'https://github.com/ecomfe/echarts-stat',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ xAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ }
+ },
+ yAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ }
+ },
+ series: [{
+ name: 'scatter',
+ type: 'scatter',
+ datasetIndex: 0
+ },{
+ name: 'line',
+ type: 'line',
+ smooth: true,
+ datasetIndex: 1,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-label-align-right.ts b/public/examples/ts/scatter-label-align-right.ts
new file mode 100644
index 0000000..ed9d3d2
--- /dev/null
+++ b/public/examples/ts/scatter-label-align-right.ts
@@ -0,0 +1,58 @@
+/*
+title: Align Label on the Top
+category: scatter
+titleCN: 散点图标签顶部对齐
+difficulty: 4
+*/
+
+const data = [
+ [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,42 [...]
+ [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[643 [...]
+];
+
+option = {
+ xAxis: {
+ splitLine: { show: false }
+ },
+ yAxis: {
+ splitLine: { show: false },
+ scale: true
+ },
+ grid: {
+ left: 40,
+ right: 130
+ },
+ series: [{
+ name: '1990',
+ data: data[0],
+ type: 'scatter',
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'self'
+ },
+ labelLayout: function () {
+ return {
+ x: myChart.getWidth() - 100,
+ moveOverlap: 'shiftY'
+ };
+ },
+ labelLine: {
+ show: true,
+ length2: 5,
+ lineStyle: {
+ color: '#bbb'
+ }
+ },
+ label: {
+ show: true,
+ formatter: function (param: any) {
+ return param.data[3];
+ },
+ position: 'right',
+ minMargin: 2
+ }
+ }]
+};
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-label-align-top.ts b/public/examples/ts/scatter-label-align-top.ts
new file mode 100644
index 0000000..5b62763
--- /dev/null
+++ b/public/examples/ts/scatter-label-align-top.ts
@@ -0,0 +1,53 @@
+/*
+title: Align Label on the Top
+category: scatter
+titleCN: 散点图标签顶部对齐
+difficulty: 4
+*/
+
+
+const data = [
+ [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,42 [...]
+ [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[643 [...]
+];
+
+option = {
+ xAxis: {},
+ yAxis: {
+ scale: true
+ },
+ series: [{
+ name: '1990',
+ data: data[0],
+ type: 'scatter',
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'self'
+ },
+ labelLayout: {
+ y: 20,
+ align: 'center',
+ hideOverlap: true,
+ moveOverlap: 'shiftX'
+ },
+ labelLine: {
+ show: true,
+ length2: 5,
+ lineStyle: {
+ color: '#bbb'
+ }
+ },
+ label: {
+ show: true,
+ formatter: function (param: any) {
+ return param.data[3];
+ },
+ minMargin: 10,
+ position: 'top'
+ }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-large.ts b/public/examples/ts/scatter-large.ts
new file mode 100644
index 0000000..349a0d0
--- /dev/null
+++ b/public/examples/ts/scatter-large.ts
@@ -0,0 +1,72 @@
+/*
+title: Large Scatter
+category: scatter
+titleCN: 大规模散点图
+difficulty: 5
+*/
+
+function genData(len: number, offset?: number) {
+ let arr = new Float32Array(len * 2);
+ let off = 0;
+
+ for (let i = 0; i < len; i++) {
+ let x = +Math.random() * 10;
+ let y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10;
+ arr[off++] = x;
+ arr[off++] = y;
+ }
+ return arr;
+}
+
+const data1 = genData(5e5);
+const data2 = genData(5e5, 10);
+
+option = {
+ title: {
+ text: echarts.format.addCommas(data1.length / 2 + data2.length / 2) + ' Points'
+ },
+ tooltip: {},
+ toolbox: {
+ left: 'center',
+ feature: {
+ dataZoom: {}
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ right: 10
+ },
+ xAxis: [{
+ }],
+ yAxis: [{
+ }],
+ dataZoom: [{
+ type: 'inside'
+ }, {
+ type: 'slider'
+ }],
+ animation: false,
+ series: [{
+ name: 'A',
+ type: 'scatter',
+ data: data1,
+ dimensions: ['x', 'y'],
+ symbolSize: 3,
+ itemStyle: {
+ opacity: 0.4
+ },
+ large: true
+ }, {
+ name: 'B',
+ type: 'scatter',
+ data: data2,
+ dimensions: ['x', 'y'],
+ symbolSize: 3,
+ itemStyle: {
+ opacity: 0.4
+ },
+ large: true
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-linear-regression.ts b/public/examples/ts/scatter-linear-regression.ts
new file mode 100644
index 0000000..cc64fcd
--- /dev/null
+++ b/public/examples/ts/scatter-linear-regression.ts
@@ -0,0 +1,269 @@
+/*
+title: Linear Regression
+category: scatter
+titleCN: 线性回归（使用统计插件）
+difficulty: 2
+*/
+
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.regression);
+
+const data = [
+ [0.067732, 3.176513],
+ [0.42781, 3.816464],
+ [0.995731, 4.550095],
+ [0.738336, 4.256571],
+ [0.981083, 4.560815],
+ [0.526171, 3.929515],
+ [0.378887, 3.52617],
+ [0.033859, 3.156393],
+ [0.132791, 3.110301],
+ [0.138306, 3.149813],
+ [0.247809, 3.476346],
+ [0.64827, 4.119688],
+ [0.731209, 4.282233],
+ [0.236833, 3.486582],
+ [0.969788, 4.655492],
+ [0.607492, 3.965162],
+ [0.358622, 3.5149],
+ [0.147846, 3.125947],
+ [0.63782, 4.094115],
+ [0.230372, 3.476039],
+ [0.070237, 3.21061],
+ [0.067154, 3.190612],
+ [0.925577, 4.631504],
+ [0.717733, 4.29589],
+ [0.015371, 3.085028],
+ [0.33507, 3.44808],
+ [0.040486, 3.16744],
+ [0.212575, 3.364266],
+ [0.617218, 3.993482],
+ [0.541196, 3.891471],
+ [0.045353, 3.143259],
+ [0.126762, 3.114204],
+ [0.556486, 3.851484],
+ [0.901144, 4.621899],
+ [0.958476, 4.580768],
+ [0.274561, 3.620992],
+ [0.394396, 3.580501],
+ [0.87248, 4.618706],
+ [0.409932, 3.676867],
+ [0.908969, 4.641845],
+ [0.166819, 3.175939],
+ [0.665016, 4.26498],
+ [0.263727, 3.558448],
+ [0.231214, 3.436632],
+ [0.552928, 3.831052],
+ [0.047744, 3.182853],
+ [0.365746, 3.498906],
+ [0.495002, 3.946833],
+ [0.493466, 3.900583],
+ [0.792101, 4.238522],
+ [0.76966, 4.23308],
+ [0.251821, 3.521557],
+ [0.181951, 3.203344],
+ [0.808177, 4.278105],
+ [0.334116, 3.555705],
+ [0.33863, 3.502661],
+ [0.452584, 3.859776],
+ [0.69477, 4.275956],
+ [0.590902, 3.916191],
+ [0.307928, 3.587961],
+ [0.148364, 3.183004],
+ [0.70218, 4.225236],
+ [0.721544, 4.231083],
+ [0.666886, 4.240544],
+ [0.124931, 3.222372],
+ [0.618286, 4.021445],
+ [0.381086, 3.567479],
+ [0.385643, 3.56258],
+ [0.777175, 4.262059],
+ [0.116089, 3.208813],
+ [0.115487, 3.169825],
+ [0.66351, 4.193949],
+ [0.254884, 3.491678],
+ [0.993888, 4.533306],
+ [0.295434, 3.550108],
+ [0.952523, 4.636427],
+ [0.307047, 3.557078],
+ [0.277261, 3.552874],
+ [0.279101, 3.494159],
+ [0.175724, 3.206828],
+ [0.156383, 3.195266],
+ [0.733165, 4.221292],
+ [0.848142, 4.413372],
+ [0.771184, 4.184347],
+ [0.429492, 3.742878],
+ [0.162176, 3.201878],
+ [0.917064, 4.648964],
+ [0.315044, 3.510117],
+ [0.201473, 3.274434],
+ [0.297038, 3.579622],
+ [0.336647, 3.489244],
+ [0.666109, 4.237386],
+ [0.583888, 3.913749],
+ [0.085031, 3.22899],
+ [0.687006, 4.286286],
+ [0.949655, 4.628614],
+ [0.189912, 3.239536],
+ [0.844027, 4.457997],
+ [0.333288, 3.513384],
+ [0.427035, 3.729674],
+ [0.466369, 3.834274],
+ [0.550659, 3.811155],
+ [0.278213, 3.598316],
+ [0.918769, 4.692514],
+ [0.886555, 4.604859],
+ [0.569488, 3.864912],
+ [0.066379, 3.184236],
+ [0.335751, 3.500796],
+ [0.426863, 3.743365],
+ [0.395746, 3.622905],
+ [0.694221, 4.310796],
+ [0.27276, 3.583357],
+ [0.503495, 3.901852],
+ [0.067119, 3.233521],
+ [0.038326, 3.105266],
+ [0.599122, 3.865544],
+ [0.947054, 4.628625],
+ [0.671279, 4.231213],
+ [0.434811, 3.791149],
+ [0.509381, 3.968271],
+ [0.749442, 4.25391],
+ [0.058014, 3.19471],
+ [0.482978, 3.996503],
+ [0.466776, 3.904358],
+ [0.357767, 3.503976],
+ [0.949123, 4.557545],
+ [0.41732, 3.699876],
+ [0.920461, 4.613614],
+ [0.156433, 3.140401],
+ [0.656662, 4.206717],
+ [0.616418, 3.969524],
+ [0.853428, 4.476096],
+ [0.133295, 3.136528],
+ [0.693007, 4.279071],
+ [0.178449, 3.200603],
+ [0.199526, 3.299012],
+ [0.073224, 3.209873],
+ [0.286515, 3.632942],
+ [0.182026, 3.248361],
+ [0.621523, 3.995783],
+ [0.344584, 3.563262],
+ [0.398556, 3.649712],
+ [0.480369, 3.951845],
+ [0.15335, 3.145031],
+ [0.171846, 3.181577],
+ [0.867082, 4.637087],
+ [0.223855, 3.404964],
+ [0.528301, 3.873188],
+ [0.890192, 4.633648],
+ [0.106352, 3.154768],
+ [0.917886, 4.623637],
+ [0.014855, 3.078132],
+ [0.567682, 3.913596],
+ [0.068854, 3.221817],
+ [0.603535, 3.938071],
+ [0.53205, 3.880822],
+ [0.651362, 4.176436],
+ [0.901225, 4.648161],
+ [0.204337, 3.332312],
+ [0.696081, 4.240614],
+ [0.963924, 4.532224],
+ [0.98139, 4.557105],
+ [0.987911, 4.610072],
+ [0.990947, 4.636569],
+ [0.736021, 4.229813],
+ [0.253574, 3.50086],
+ [0.674722, 4.245514],
+ [0.939368, 4.605182],
+ [0.235419, 3.45434],
+ [0.110521, 3.180775],
+ [0.218023, 3.38082],
+ [0.869778, 4.56502],
+ [0.19683, 3.279973],
+ [0.958178, 4.554241],
+ [0.972673, 4.63352],
+ [0.745797, 4.281037],
+ [0.445674, 3.844426],
+ [0.470557, 3.891601],
+ [0.549236, 3.849728],
+ [0.335691, 3.492215],
+ [0.884739, 4.592374],
+ [0.918916, 4.632025],
+ [0.441815, 3.75675],
+ [0.116598, 3.133555],
+ [0.359274, 3.567919],
+ [0.814811, 4.363382],
+ [0.387125, 3.560165],
+ [0.982243, 4.564305],
+ [0.78088, 4.215055],
+ [0.652565, 4.174999],
+ [0.87003, 4.58664],
+ [0.604755, 3.960008],
+ [0.255212, 3.529963],
+ [0.730546, 4.213412],
+ [0.493829, 3.908685],
+ [0.257017, 3.585821],
+ [0.833735, 4.374394],
+ [0.070095, 3.213817],
+ [0.52707, 3.952681],
+ [0.116163, 3.129283]
+];
+
+
+option = {
+ dataset: [{
+ source: data
+ }, {
+ transform: {
+ type: 'ecStat:regression'
+ // 'linear' by default.
+ // config: { method: 'linear', formulaOn: 'end'}
+ }
+ }],
+ title: {
+ text: 'Linear Regression',
+ subtext: 'By ecStat.regression',
+ sublink: 'https://github.com/ecomfe/echarts-stat',
+ left: 'center'
+ },
+ legend: {
+ bottom: 5
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ xAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ },
+ yAxis: {
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ },
+ series: [{
+ name: 'scatter',
+ type: 'scatter'
+ }, {
+ name: 'line',
+ type: 'line',
+ datasetIndex: 1,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-logarithmic-regression.ts b/public/examples/ts/scatter-logarithmic-regression.ts
new file mode 100644
index 0000000..86d7e8f
--- /dev/null
+++ b/public/examples/ts/scatter-logarithmic-regression.ts
@@ -0,0 +1,135 @@
+/*
+title: Logarithmic Regression
+category: scatter
+titleCN: 对数回归（使用统计插件）
+difficulty: 16
+*/
+
+
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.regression);
+
+option = {
+ dataset: [{
+ source: [
+ [28604,77,17096869,'Australia',1990],
+ [31163,77.4,27662440,'Canada',1990],
+ [1516,68,1154605773,'China',1990],
+ [13670,74.7,10582082,'Cuba',1990],
+ [28599,75,4986705,'Finland',1990],
+ [29476,77.1,56943299,'France',1990],
+ [31476,75.4,78958237,'Germany',1990],
+ [28666,78.1,254830,'Iceland',1990],
+ [1777,57.7,870601776,'India',1990],
+ [29550,79.1,122249285,'Japan',1990],
+ [2076,67.9,20194354,'North Korea',1990],
+ [12087,72,42972254,'South Korea',1990],
+ [24021,75.4,3397534,'New Zealand',1990],
+ [43296,76.8,4240375,'Norway',1990],
+ [10088,70.8,38195258,'Poland',1990],
+ [19349,69.6,147568552,'Russia',1990],
+ [10670,67.3,53994605,'Turkey',1990],
+ [26424,75.7,57110117,'United Kingdom',1990],
+ [37062,75.4,252847810,'United States',1990],
+ [44056,81.8,23968973,'Australia',2015],
+ [43294,81.7,35939927,'Canada',2015],
+ [13334,76.9,1376048943,'China',2015],
+ [21291,78.5,11389562,'Cuba',2015],
+ [38923,80.8,5503457,'Finland',2015],
+ [37599,81.9,64395345,'France',2015],
+ [44053,81.1,80688545,'Germany',2015],
+ [42182,82.8,329425,'Iceland',2015],
+ [5903,66.8,1311050527,'India',2015],
+ [36162,83.5,126573481,'Japan',2015],
+ [1390,71.4,25155317,'North Korea',2015],
+ [34644,80.7,50293439,'South Korea',2015],
+ [34186,80.6,4528526,'New Zealand',2015],
+ [64304,81.6,5210967,'Norway',2015],
+ [24787,77.3,38611794,'Poland',2015],
+ [23038,73.13,143456918,'Russia',2015],
+ [19360,76.5,78665830,'Turkey',2015],
+ [38225,81.4,64715810,'United Kingdom',2015],
+ [53354,79.1,321773631,'United States',2015]
+ ]
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 4, eq: 1990 }
+ }
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 4, eq: 2015 }
+ }
+ }, {
+ transform: {
+ type: 'ecStat:regression',
+ config: {
+ method: 'logarithmic'
+ }
+ }
+ }],
+ title: {
+ text: '1990 and 2015 per capita life expectancy and GDP',
+ subtext: 'By ecStat.regression',
+ sublink: 'https://github.com/ecomfe/echarts-stat',
+ left: 'center'
+ },
+ legend: {
+ data: ['1990', '2015'],
+ bottom: 10
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ xAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ },
+ visualMap: {
+ show: false,
+ dimension: 2,
+ min: 20000,
+ max: 1500000000,
+ seriesIndex: [0, 1],
+ inRange: {
+ symbolSize: [10, 70]
+ }
+ },
+ series: [{
+ name: '1990',
+ type: 'scatter',
+ datasetIndex: 1
+ },{
+ name: '2015',
+ type: 'scatter',
+ datasetIndex: 2
+ }, {
+ name: 'line',
+ type: 'line',
+ smooth: true,
+ datasetIndex: 3,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
+ }]
+}
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-map-brush.ts b/public/examples/ts/scatter-map-brush.ts
new file mode 100644
index 0000000..51a5586
--- /dev/null
+++ b/public/examples/ts/scatter-map-brush.ts
@@ -0,0 +1,647 @@
+/*
+title: Scatter Map Brush
+category: scatter
+titleCN: Scatter Map Brush
+*/
+
+interface DataItem {
+ name: string
+ value: number
+}
+const geoCoordMap: Record<string, number[]> = {
+ "海门":[121.15,31.89],
+ "鄂尔多斯":[109.781327,39.608266],
+ "招远":[120.38,37.35],
+ "舟山":[122.207216,29.985295],
+ "齐齐哈尔":[123.97,47.33],
+ "盐城":[120.13,33.38],
+ "赤峰":[118.87,42.28],
+ "青岛":[120.33,36.07],
+ "乳山":[121.52,36.89],
+ "金昌":[102.188043,38.520089],
+ "泉州":[118.58,24.93],
+ "莱西":[120.53,36.86],
+ "日照":[119.46,35.42],
+ "胶南":[119.97,35.88],
+ "南通":[121.05,32.08],
+ "拉萨":[91.11,29.97],
+ "云浮":[112.02,22.93],
+ "梅州":[116.1,24.55],
+ "文登":[122.05,37.2],
+ "上海":[121.48,31.22],
+ "攀枝花":[101.718637,26.582347],
+ "威海":[122.1,37.5],
+ "承德":[117.93,40.97],
+ "厦门":[118.1,24.46],
+ "汕尾":[115.375279,22.786211],
+ "潮州":[116.63,23.68],
+ "丹东":[124.37,40.13],
+ "太仓":[121.1,31.45],
+ "曲靖":[103.79,25.51],
+ "烟台":[121.39,37.52],
+ "福州":[119.3,26.08],
+ "瓦房店":[121.979603,39.627114],
+ "即墨":[120.45,36.38],
+ "抚顺":[123.97,41.97],
+ "玉溪":[102.52,24.35],
+ "张家口":[114.87,40.82],
+ "阳泉":[113.57,37.85],
+ "莱州":[119.942327,37.177017],
+ "湖州":[120.1,30.86],
+ "汕头":[116.69,23.39],
+ "昆山":[120.95,31.39],
+ "宁波":[121.56,29.86],
+ "湛江":[110.359377,21.270708],
+ "揭阳":[116.35,23.55],
+ "荣成":[122.41,37.16],
+ "连云港":[119.16,34.59],
+ "葫芦岛":[120.836932,40.711052],
+ "常熟":[120.74,31.64],
+ "东莞":[113.75,23.04],
+ "河源":[114.68,23.73],
+ "淮安":[119.15,33.5],
+ "泰州":[119.9,32.49],
+ "南宁":[108.33,22.84],
+ "营口":[122.18,40.65],
+ "惠州":[114.4,23.09],
+ "江阴":[120.26,31.91],
+ "蓬莱":[120.75,37.8],
+ "韶关":[113.62,24.84],
+ "嘉峪关":[98.289152,39.77313],
+ "广州":[113.23,23.16],
+ "延安":[109.47,36.6],
+ "太原":[112.53,37.87],
+ "清远":[113.01,23.7],
+ "中山":[113.38,22.52],
+ "昆明":[102.73,25.04],
+ "寿光":[118.73,36.86],
+ "盘锦":[122.070714,41.119997],
+ "长治":[113.08,36.18],
+ "深圳":[114.07,22.62],
+ "珠海":[113.52,22.3],
+ "宿迁":[118.3,33.96],
+ "咸阳":[108.72,34.36],
+ "铜川":[109.11,35.09],
+ "平度":[119.97,36.77],
+ "佛山":[113.11,23.05],
+ "海口":[110.35,20.02],
+ "江门":[113.06,22.61],
+ "章丘":[117.53,36.72],
+ "肇庆":[112.44,23.05],
+ "大连":[121.62,38.92],
+ "临汾":[111.5,36.08],
+ "吴江":[120.63,31.16],
+ "石嘴山":[106.39,39.04],
+ "沈阳":[123.38,41.8],
+ "苏州":[120.62,31.32],
+ "茂名":[110.88,21.68],
+ "嘉兴":[120.76,30.77],
+ "长春":[125.35,43.88],
+ "胶州":[120.03336,36.264622],
+ "银川":[106.27,38.47],
+ "张家港":[120.555821,31.875428],
+ "三门峡":[111.19,34.76],
+ "锦州":[121.15,41.13],
+ "南昌":[115.89,28.68],
+ "柳州":[109.4,24.33],
+ "三亚":[109.511909,18.252847],
+ "自贡":[104.778442,29.33903],
+ "吉林":[126.57,43.87],
+ "阳江":[111.95,21.85],
+ "泸州":[105.39,28.91],
+ "西宁":[101.74,36.56],
+ "宜宾":[104.56,29.77],
+ "呼和浩特":[111.65,40.82],
+ "成都":[104.06,30.67],
+ "大同":[113.3,40.12],
+ "镇江":[119.44,32.2],
+ "桂林":[110.28,25.29],
+ "张家界":[110.479191,29.117096],
+ "宜兴":[119.82,31.36],
+ "北海":[109.12,21.49],
+ "西安":[108.95,34.27],
+ "金坛":[119.56,31.74],
+ "东营":[118.49,37.46],
+ "牡丹江":[129.58,44.6],
+ "遵义":[106.9,27.7],
+ "绍兴":[120.58,30.01],
+ "扬州":[119.42,32.39],
+ "常州":[119.95,31.79],
+ "潍坊":[119.1,36.62],
+ "重庆":[106.54,29.59],
+ "台州":[121.420757,28.656386],
+ "南京":[118.78,32.04],
+ "滨州":[118.03,37.36],
+ "贵阳":[106.71,26.57],
+ "无锡":[120.29,31.59],
+ "本溪":[123.73,41.3],
+ "克拉玛依":[84.77,45.59],
+ "渭南":[109.5,34.52],
+ "马鞍山":[118.48,31.56],
+ "宝鸡":[107.15,34.38],
+ "焦作":[113.21,35.24],
+ "句容":[119.16,31.95],
+ "北京":[116.46,39.92],
+ "徐州":[117.2,34.26],
+ "衡水":[115.72,37.72],
+ "包头":[110,40.58],
+ "绵阳":[104.73,31.48],
+ "乌鲁木齐":[87.68,43.77],
+ "枣庄":[117.57,34.86],
+ "杭州":[120.19,30.26],
+ "淄博":[118.05,36.78],
+ "鞍山":[122.85,41.12],
+ "溧阳":[119.48,31.43],
+ "库尔勒":[86.06,41.68],
+ "安阳":[114.35,36.1],
+ "开封":[114.35,34.79],
+ "济南":[117,36.65],
+ "德阳":[104.37,31.13],
+ "温州":[120.65,28.01],
+ "九江":[115.97,29.71],
+ "邯郸":[114.47,36.6],
+ "临安":[119.72,30.23],
+ "兰州":[103.73,36.03],
+ "沧州":[116.83,38.33],
+ "临沂":[118.35,35.05],
+ "南充":[106.110698,30.837793],
+ "天津":[117.2,39.13],
+ "富阳":[119.95,30.07],
+ "泰安":[117.13,36.18],
+ "诸暨":[120.23,29.71],
+ "郑州":[113.65,34.76],
+ "哈尔滨":[126.63,45.75],
+ "聊城":[115.97,36.45],
+ "芜湖":[118.38,31.33],
+ "唐山":[118.02,39.63],
+ "平顶山":[113.29,33.75],
+ "邢台":[114.48,37.05],
+ "德州":[116.29,37.45],
+ "济宁":[116.59,35.38],
+ "荆州":[112.239741,30.335165],
+ "宜昌":[111.3,30.7],
+ "义乌":[120.06,29.32],
+ "丽水":[119.92,28.45],
+ "洛阳":[112.44,34.7],
+ "秦皇岛":[119.57,39.95],
+ "株洲":[113.16,27.83],
+ "石家庄":[114.48,38.03],
+ "莱芜":[117.67,36.19],
+ "常德":[111.69,29.05],
+ "保定":[115.48,38.85],
+ "湘潭":[112.91,27.87],
+ "金华":[119.64,29.12],
+ "岳阳":[113.09,29.37],
+ "长沙":[113,28.21],
+ "衢州":[118.88,28.97],
+ "廊坊":[116.7,39.53],
+ "菏泽":[115.480656,35.23375],
+ "合肥":[117.27,31.86],
+ "武汉":[114.31,30.52],
+ "大庆":[125.03,46.58]
+};
+
+const data: DataItem[] = [
+ {name: "海门", value: 9},
+ {name: "鄂尔多斯", value: 12},
+ {name: "招远", value: 12},
+ {name: "舟山", value: 12},
+ {name: "齐齐哈尔", value: 14},
+ {name: "盐城", value: 15},
+ {name: "赤峰", value: 16},
+ {name: "青岛", value: 18},
+ {name: "乳山", value: 18},
+ {name: "金昌", value: 19},
+ {name: "泉州", value: 21},
+ {name: "莱西", value: 21},
+ {name: "日照", value: 21},
+ {name: "胶南", value: 22},
+ {name: "南通", value: 23},
+ {name: "拉萨", value: 24},
+ {name: "云浮", value: 24},
+ {name: "梅州", value: 25},
+ {name: "文登", value: 25},
+ {name: "上海", value: 25},
+ {name: "攀枝花", value: 25},
+ {name: "威海", value: 25},
+ {name: "承德", value: 25},
+ {name: "厦门", value: 26},
+ {name: "汕尾", value: 26},
+ {name: "潮州", value: 26},
+ {name: "丹东", value: 27},
+ {name: "太仓", value: 27},
+ {name: "曲靖", value: 27},
+ {name: "烟台", value: 28},
+ {name: "福州", value: 29},
+ {name: "瓦房店", value: 30},
+ {name: "即墨", value: 30},
+ {name: "抚顺", value: 31},
+ {name: "玉溪", value: 31},
+ {name: "张家口", value: 31},
+ {name: "阳泉", value: 31},
+ {name: "莱州", value: 32},
+ {name: "湖州", value: 32},
+ {name: "汕头", value: 32},
+ {name: "昆山", value: 33},
+ {name: "宁波", value: 33},
+ {name: "湛江", value: 33},
+ {name: "揭阳", value: 34},
+ {name: "荣成", value: 34},
+ {name: "连云港", value: 35},
+ {name: "葫芦岛", value: 35},
+ {name: "常熟", value: 36},
+ {name: "东莞", value: 36},
+ {name: "河源", value: 36},
+ {name: "淮安", value: 36},
+ {name: "泰州", value: 36},
+ {name: "南宁", value: 37},
+ {name: "营口", value: 37},
+ {name: "惠州", value: 37},
+ {name: "江阴", value: 37},
+ {name: "蓬莱", value: 37},
+ {name: "韶关", value: 38},
+ {name: "嘉峪关", value: 38},
+ {name: "广州", value: 38},
+ {name: "延安", value: 38},
+ {name: "太原", value: 39},
+ {name: "清远", value: 39},
+ {name: "中山", value: 39},
+ {name: "昆明", value: 39},
+ {name: "寿光", value: 40},
+ {name: "盘锦", value: 40},
+ {name: "长治", value: 41},
+ {name: "深圳", value: 41},
+ {name: "珠海", value: 42},
+ {name: "宿迁", value: 43},
+ {name: "咸阳", value: 43},
+ {name: "铜川", value: 44},
+ {name: "平度", value: 44},
+ {name: "佛山", value: 44},
+ {name: "海口", value: 44},
+ {name: "江门", value: 45},
+ {name: "章丘", value: 45},
+ {name: "肇庆", value: 46},
+ {name: "大连", value: 47},
+ {name: "临汾", value: 47},
+ {name: "吴江", value: 47},
+ {name: "石嘴山", value: 49},
+ {name: "沈阳", value: 50},
+ {name: "苏州", value: 50},
+ {name: "茂名", value: 50},
+ {name: "嘉兴", value: 51},
+ {name: "长春", value: 51},
+ {name: "胶州", value: 52},
+ {name: "银川", value: 52},
+ {name: "张家港", value: 52},
+ {name: "三门峡", value: 53},
+ {name: "锦州", value: 54},
+ {name: "南昌", value: 54},
+ {name: "柳州", value: 54},
+ {name: "三亚", value: 54},
+ {name: "自贡", value: 56},
+ {name: "吉林", value: 56},
+ {name: "阳江", value: 57},
+ {name: "泸州", value: 57},
+ {name: "西宁", value: 57},
+ {name: "宜宾", value: 58},
+ {name: "呼和浩特", value: 58},
+ {name: "成都", value: 58},
+ {name: "大同", value: 58},
+ {name: "镇江", value: 59},
+ {name: "桂林", value: 59},
+ {name: "张家界", value: 59},
+ {name: "宜兴", value: 59},
+ {name: "北海", value: 60},
+ {name: "西安", value: 61},
+ {name: "金坛", value: 62},
+ {name: "东营", value: 62},
+ {name: "牡丹江", value: 63},
+ {name: "遵义", value: 63},
+ {name: "绍兴", value: 63},
+ {name: "扬州", value: 64},
+ {name: "常州", value: 64},
+ {name: "潍坊", value: 65},
+ {name: "重庆", value: 66},
+ {name: "台州", value: 67},
+ {name: "南京", value: 67},
+ {name: "滨州", value: 70},
+ {name: "贵阳", value: 71},
+ {name: "无锡", value: 71},
+ {name: "本溪", value: 71},
+ {name: "克拉玛依", value: 72},
+ {name: "渭南", value: 72},
+ {name: "马鞍山", value: 72},
+ {name: "宝鸡", value: 72},
+ {name: "焦作", value: 75},
+ {name: "句容", value: 75},
+ {name: "北京", value: 79},
+ {name: "徐州", value: 79},
+ {name: "衡水", value: 80},
+ {name: "包头", value: 80},
+ {name: "绵阳", value: 80},
+ {name: "乌鲁木齐", value: 84},
+ {name: "枣庄", value: 84},
+ {name: "杭州", value: 84},
+ {name: "淄博", value: 85},
+ {name: "鞍山", value: 86},
+ {name: "溧阳", value: 86},
+ {name: "库尔勒", value: 86},
+ {name: "安阳", value: 90},
+ {name: "开封", value: 90},
+ {name: "济南", value: 92},
+ {name: "德阳", value: 93},
+ {name: "温州", value: 95},
+ {name: "九江", value: 96},
+ {name: "邯郸", value: 98},
+ {name: "临安", value: 99},
+ {name: "兰州", value: 99},
+ {name: "沧州", value: 100},
+ {name: "临沂", value: 103},
+ {name: "南充", value: 104},
+ {name: "天津", value: 105},
+ {name: "富阳", value: 106},
+ {name: "泰安", value: 112},
+ {name: "诸暨", value: 112},
+ {name: "郑州", value: 113},
+ {name: "哈尔滨", value: 114},
+ {name: "聊城", value: 116},
+ {name: "芜湖", value: 117},
+ {name: "唐山", value: 119},
+ {name: "平顶山", value: 119},
+ {name: "邢台", value: 119},
+ {name: "德州", value: 120},
+ {name: "济宁", value: 120},
+ {name: "荆州", value: 127},
+ {name: "宜昌", value: 130},
+ {name: "义乌", value: 132},
+ {name: "丽水", value: 133},
+ {name: "洛阳", value: 134},
+ {name: "秦皇岛", value: 136},
+ {name: "株洲", value: 143},
+ {name: "石家庄", value: 147},
+ {name: "莱芜", value: 148},
+ {name: "常德", value: 152},
+ {name: "保定", value: 153},
+ {name: "湘潭", value: 154},
+ {name: "金华", value: 157},
+ {name: "岳阳", value: 169},
+ {name: "长沙", value: 175},
+ {name: "衢州", value: 177},
+ {name: "廊坊", value: 193},
+ {name: "菏泽", value: 194},
+ {name: "合肥", value: 229},
+ {name: "武汉", value: 273},
+ {name: "大庆", value: 279}
+];
+
+var convertData = function (data: DataItem[]) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
+ }
+ }
+ return res;
+};
+
+var convertedData = [
+ convertData(data),
+ convertData(data.sort(function (a, b) {
+ return b.value - a.value;
+ }).slice(0, 6))
+];
+
+
+option = {
+ backgroundColor: '#404a59',
+ animation: true,
+ animationDuration: 1000,
+ animationEasing: 'cubicInOut',
+ animationDurationUpdate: 1000,
+ animationEasingUpdate: 'cubicInOut',
+ title: [
+ {
+ text: '全国主要城市 PM 2.5',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ {
+ id: 'statistic',
+ right: 120,
+ top: 40,
+ width: 100,
+ textStyle: {
+ color: '#fff',
+ fontSize: 16
+ }
+ }
+ ],
+ toolbox: {
+ iconStyle: {
+ borderColor: '#fff'
+ },
+ emphasis: {
+ iconStyle: {
+ borderColor: '#b1e4ff'
+ }
+ }
+ },
+ brush: {
+ outOfBrush: {
+ color: '#abc'
+ },
+ brushStyle: {
+ borderWidth: 2,
+ color: 'rgba(0,0,0,0.2)',
+ borderColor: 'rgba(0,0,0,0.5)',
+ },
+ seriesIndex: [0, 1],
+ throttleType: 'debounce',
+ throttleDelay: 300,
+ geoIndex: 0
+ },
+ geo: {
+ map: 'china',
+ left: '10',
+ right: '35%',
+ center: [117.98561551896913, 31.205000490896193],
+ zoom: 2.5,
+ emphasis: {
+ itemStyle: {
+ areaColor: '#2a333d'
+ },
+ label: {
+ show: false
+ }
+ },
+ roam: true,
+ itemStyle: {
+ areaColor: '#323c48',
+ borderColor: '#111'
+ }
+ },
+ tooltip : {
+ trigger: 'item'
+ },
+ grid: {
+ right: 40,
+ top: 100,
+ bottom: 40,
+ width: '30%'
+ },
+ xAxis: {
+ type: 'value',
+ scale: true,
+ position: 'top',
+ boundaryGap: false,
+ splitLine: {show: false},
+ axisLine: {show: false},
+ axisTick: {show: false},
+ axisLabel: {margin: 2, color: '#aaa'},
+ },
+ yAxis: {
+ type: 'category',
+ name: 'TOP 20',
+ nameGap: 16,
+ axisLine: {show: false, lineStyle: {color: '#ddd'}},
+ axisTick: {show: false, lineStyle: {color: '#ddd'}},
+ axisLabel: {interval: 0, color: '#ddd'},
+ data: []
+ },
+ series : [
+ {
+ name: 'pm2.5',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: convertedData[0],
+ symbolSize: function (val) {
+ return Math.max(val[2] / 10, 8);
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: false
+ },
+ itemStyle: {
+ color: '#ddb926'
+ },
+ emphasis: {
+ label: {
+ show: true
+ }
+ }
+ },
+ {
+ name: 'Top 5',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ data: convertedData[1],
+ symbolSize: function (val) {
+ return Math.max(val[2] / 10, 8);
+ },
+ showEffectOn: 'emphasis',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ emphasis: {
+ scale: true
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: true
+ },
+ itemStyle: {
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
+ },
+ zlevel: 1
+ },
+ {
+ id: 'bar',
+ zlevel: 2,
+ type: 'bar',
+ itemStyle: {
+ color: '#ddb926'
+ },
+ data: []
+ }
+ ]
+};
+
+
+myChart.on('brushselected', renderBrushed);
+
+// myChart.setOption(option);
+
+setTimeout(function () {
+ myChart.dispatchAction({
+ type: 'brush',
+ areas: [
+ {
+ geoIndex: 0,
+ brushType: 'polygon',
+ coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77],[118.76,34.63],[118.6,34.6],[118.46,34.6],[118.33,34.57],[118.05,34.56],[117.6,34.56],[117.41,34.56],[117.25,34.56],[117.11,34.56],[117.02,34.56],[117,34.56],[116.94,34.56],[116.94,34.55],[116.9,34.5],[116.88,34.44],[116.88,34.37],[116.88,34.33],[116.88,34.24],[116.92,34.15],[116.98,34.09],[117.05,34.06],[117.19,33.96],[117.29,33.9],[117.43,33.8],[117.49,33.75],[117.54,33.68],[117.6,33.65],[117.62,33. [...]
+ }
+ ]
+ });
+}, 0);
+
+
+function renderBrushed(params: any) {
+ const mainSeries = params.batch[0].selected[0];
+
+ const selectedItems = [];
+ const categoryData = [];
+ const barData = [];
+ const maxBar = 30;
+ let sum = 0;
+ let count = 0;
+
+ for (var i = 0; i < mainSeries.dataIndex.length; i++) {
+ var rawIndex = mainSeries.dataIndex[i];
+ var dataItem = convertedData[0][rawIndex];
+ var pmValue = dataItem.value[2];
+
+ sum += pmValue;
+ count++;
+
+ selectedItems.push(dataItem);
+ }
+
+ selectedItems.sort(function (a, b) {
+ return a.value[2] - b.value[2];
+ });
+
+ for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
+ categoryData.push(selectedItems[i].name);
+ barData.push(selectedItems[i].value[2]);
+ }
+
+ myChart.setOption<echarts.EChartsOption>({
+ yAxis: {
+ data: categoryData
+ },
+ xAxis: {
+ axisLabel: {show: !!count}
+ },
+ title: {
+ id: 'statistic',
+ text: count ? '平均: ' + (sum / count).toFixed(4) : ''
+ },
+ series: {
+ id: 'bar',
+ data: barData
+ }
+ });
+}
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/scatter-matrix.ts b/public/examples/ts/scatter-matrix.ts
new file mode 100644
index 0000000..f49a383
--- /dev/null
+++ b/public/examples/ts/scatter-matrix.ts
@@ -0,0 +1,302 @@
+/*
+title: Scatter Matrix
+category: 'parallel, scatter'
+titleCN: 散点矩阵和平行坐标
+difficulty: 10
+*/
+
+// Schema:
+// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
+const schema = [
+ {name: 'AQIindex', index: 1, text: 'AQI'},
+ {name: 'PM25', index: 2, text: 'PM 2.5'},
+ {name: 'PM10', index: 3, text: 'PM 10'},
+ {name: 'CO', index: 4, text: 'CO'},
+ {name: 'NO2', index: 5, text: 'NO₂'},
+ {name: 'SO2', index: 6, text: 'SO₂'},
+ {name: '等级', index: 7, text: '等级'}
+];
+
+const rawData = [
+ [55,9,56,0.46,18,6,"良", "北京"],
+ [25,11,21,0.65,34,9,"优", "北京"],
+ [56,7,63,0.3,14,5,"良", "北京"],
+ [33,7,29,0.33,16,6,"优", "北京"],
+ [42,24,44,0.76,40,16,"优", "北京"],
+ [82,58,90,1.77,68,33,"良", "北京"],
+ [74,49,77,1.46,48,27,"良", "北京"],
+ [78,55,80,1.29,59,29,"良", "北京"],
+ [267,216,280,4.8,108,64,"重度", "北京"],
+ [185,127,216,2.52,61,27,"中度", "北京"],
+ [39,19,38,0.57,31,15,"优", "北京"],
+ [41,11,40,0.43,21,7,"优", "北京"],
+ [64,38,74,1.04,46,22,"良", "北京"],
+ [108,79,120,1.7,75,41,"轻度", "北京"],
+ [108,63,116,1.48,44,26,"轻度", "北京"],
+ [33,6,29,0.34,13,5,"优", "北京"],
+ [94,66,110,1.54,62,31,"良", "北京"],
+ [186,142,192,3.88,93,79,"中度", "北京"],
+ [57,31,54,0.96,32,14,"良", "北京"],
+ [22,8,17,0.48,23,10,"优", "北京"],
+ [39,15,36,0.61,29,13,"优", "北京"],
+ [94,69,114,2.08,73,39,"良", "北京"],
+ [99,73,110,2.43,76,48,"良", "北京"],
+ [31,12,30,0.5,32,16,"优", "北京"],
+ [42,27,43,1,53,22,"优", "北京"],
+ [154,117,157,3.05,92,58,"中度", "北京"],
+ [234,185,230,4.09,123,69,"重度", "北京"],
+ [160,120,186,2.77,91,50,"中度", "北京"],
+ [134,96,165,2.76,83,41,"轻度", "北京"],
+ [52,24,60,1.03,50,21,"良", "北京"],
+ [46,5,49,0.28,10,6,"优", "北京"],
+
+ [26,37,27,1.163,27,13,"优", "广州"],
+ [85,62,71,1.195,60,8,"良", "广州"],
+ [78,38,74,1.363,37,7,"良", "广州"],
+ [21,21,36,0.634,40,9,"优", "广州"],
+ [41,42,46,0.915,81,13,"优", "广州"],
+ [56,52,69,1.067,92,16,"良", "广州"],
+ [64,30,28,0.924,51,2,"良", "广州"],
+ [55,48,74,1.236,75,26,"良", "广州"],
+ [76,85,113,1.237,114,27,"良", "广州"],
+ [91,81,104,1.041,56,40,"良", "广州"],
+ [84,39,60,0.964,25,11,"良", "广州"],
+ [64,51,101,0.862,58,23,"良", "广州"],
+ [70,69,120,1.198,65,36,"良", "广州"],
+ [77,105,178,2.549,64,16,"良", "广州"],
+ [109,68,87,0.996,74,29,"轻度", "广州"],
+ [73,68,97,0.905,51,34,"良", "广州"],
+ [54,27,47,0.592,53,12,"良", "广州"],
+ [51,61,97,0.811,65,19,"良", "广州"],
+ [91,71,121,1.374,43,18,"良", "广州"],
+ [73,102,182,2.787,44,19,"良", "广州"],
+ [73,50,76,0.717,31,20,"良", "广州"],
+ [84,94,140,2.238,68,18,"良", "广州"],
+ [93,77,104,1.165,53,7,"良", "广州"],
+ [99,130,227,3.97,55,15,"良", "广州"],
+ [146,84,139,1.094,40,17,"轻度", "广州"],
+ [113,108,137,1.481,48,15,"轻度", "广州"],
+ [81,48,62,1.619,26,3,"良", "广州"],
+ [56,48,68,1.336,37,9,"良", "广州"],
+ [82,92,174,3.29,0,13,"良", "广州"],
+ [106,116,188,3.628,101,16,"轻度", "广州"],
+ [118,50,0,1.383,76,11,"轻度", "广州"],
+
+ [91,45,125,0.82,34,23,"良", "上海"],
+ [65,27,78,0.86,45,29,"良", "上海"],
+ [83,60,84,1.09,73,27,"良", "上海"],
+ [109,81,121,1.28,68,51,"轻度", "上海"],
+ [106,77,114,1.07,55,51,"轻度", "上海"],
+ [109,81,121,1.28,68,51,"轻度", "上海"],
+ [106,77,114,1.07,55,51,"轻度", "上海"],
+ [89,65,78,0.86,51,26,"良", "上海"],
+ [53,33,47,0.64,50,17,"良", "上海"],
+ [80,55,80,1.01,75,24,"良", "上海"],
+ [117,81,124,1.03,45,24,"轻度", "上海"],
+ [99,71,142,1.1,62,42,"良", "上海"],
+ [95,69,130,1.28,74,50,"良", "上海"],
+ [116,87,131,1.47,84,40,"轻度", "上海"],
+ [108,80,121,1.3,85,37,"轻度", "上海"],
+ [134,83,167,1.16,57,43,"轻度", "上海"],
+ [79,43,107,1.05,59,37,"良", "上海"],
+ [71,46,89,0.86,64,25,"良", "上海"],
+ [97,71,113,1.17,88,31,"良", "上海"],
+ [84,57,91,0.85,55,31,"良", "上海"],
+ [87,63,101,0.9,56,41,"良", "上海"],
+ [104,77,119,1.09,73,48,"轻度", "上海"],
+ [87,62,100,1,72,28,"良", "上海"],
+ [168,128,172,1.49,97,56,"中度", "上海"],
+ [65,45,51,0.74,39,17,"良", "上海"],
+ [39,24,38,0.61,47,17,"优", "上海"],
+ [39,24,39,0.59,50,19,"优", "上海"],
+ [93,68,96,1.05,79,29,"良", "上海"],
+ [188,143,197,1.66,99,51,"中度", "上海"],
+ [174,131,174,1.55,108,50,"中度", "上海"],
+ [187,143,201,1.39,89,53,"中度", "上海"]
+];
+
+const CATEGORY_DIM_COUNT = 6;
+const GAP = 2;
+const BASE_LEFT = 5;
+const BASE_TOP = 10;
+// const GRID_WIDTH = 220;
+// const GRID_HEIGHT = 220;
+const GRID_WIDTH = (100 - BASE_LEFT - GAP) / CATEGORY_DIM_COUNT - GAP;
+const GRID_HEIGHT = (100 - BASE_TOP - GAP) / CATEGORY_DIM_COUNT - GAP;
+const CATEGORY_DIM = 7;
+const SYMBOL_SIZE = 4;
+
+function retrieveScatterData(data, dimX, dimY) {
+ var result = [];
+ for (var i = 0; i < data.length; i++) {
+ var item = [data[i][dimX], data[i][dimY]];
+ item[CATEGORY_DIM] = data[i][CATEGORY_DIM];
+ result.push(item);
+ }
+ return result;
+}
+
+function generateGrids(option) {
+ var index = 0;
+
+ for (var i = 0; i < CATEGORY_DIM_COUNT; i++) {
+ for (var j = 0; j < CATEGORY_DIM_COUNT; j++) {
+ if (CATEGORY_DIM_COUNT - i + j >= CATEGORY_DIM_COUNT) {
+ continue;
+ }
+
+ option.grid.push({
+ left: BASE_LEFT + i * (GRID_WIDTH + GAP) + '%',
+ top: BASE_TOP + j * (GRID_HEIGHT + GAP) + '%',
+ width: GRID_WIDTH + '%',
+ height: GRID_HEIGHT + '%'
+ });
+
+ option.brush.xAxisIndex && option.brush.xAxisIndex.push(index);
+ option.brush.yAxisIndex && option.brush.yAxisIndex.push(index);
+
+ option.xAxis.push({
+ splitNumber: 3,
+ position: 'top',
+ axisLine: {
+ show: j === 0,
+ onZero: false
+ },
+ axisTick: {
+ show: j === 0,
+ inside: true
+ },
+ axisLabel: {
+ show: j === 0
+ },
+ type: 'value',
+ gridIndex: index,
+ scale: true
+ });
+
+ option.yAxis.push({
+ splitNumber: 3,
+ position: 'right',
+ axisLine: {
+ show: i === CATEGORY_DIM_COUNT - 1,
+ onZero: false
+ },
+ axisTick: {
+ show: i === CATEGORY_DIM_COUNT - 1,
+ inside: true
+ },
+ axisLabel: {
+ show: i === CATEGORY_DIM_COUNT - 1
+ },
+ type: 'value',
+ gridIndex: index,
+ scale: true
+ });
+
+ option.series.push({
+ type: 'scatter',
+ symbolSize: SYMBOL_SIZE,
+ xAxisIndex: index,
+ yAxisIndex: index,
+ data: retrieveScatterData(rawData, i, j)
+ });
+
+ option.visualMap.seriesIndex.push(option.series.length - 1);
+
+ index++;
+ }
+ }
+}
+
+
+var option = {
+ animation: false,
+ brush: {
+ brushLink: 'all',
+ xAxisIndex: [],
+ yAxisIndex: [],
+ inBrush: {
+ opacity: 1
+ }
+ },
+ visualMap: {
+ type: 'piecewise',
+ categories: ["北京", "上海", "广州"],
+ dimension: CATEGORY_DIM,
+ orient: 'horizontal',
+ top: 0,
+ left: 'center',
+ inRange: {
+ color: ['#51689b', '#ce5c5c', '#fbc357']
+ },
+ outOfRange: {
+ color: '#ddd'
+ },
+ seriesIndex: [0]
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ parallelAxis: [
+ {dim: 0, name: schema[0].text},
+ {dim: 1, name: schema[1].text},
+ {dim: 2, name: schema[2].text},
+ {dim: 3, name: schema[3].text},
+ {dim: 4, name: schema[4].text},
+ {dim: 5, name: schema[5].text},
+ {dim: 6, name: schema[6].text,
+ type: 'category', data: ['优', '良', '轻度', '中度', '重度', '严重']
+ }
+ ],
+ parallel: {
+ bottom: '5%',
+ left: '2%',
+ height: '30%',
+ width: '55%',
+ parallelAxisDefault: {
+ type: 'value',
+ name: 'AQI指数',
+ nameLocation: 'end',
+ nameGap: 20,
+ splitNumber: 3,
+ nameTextStyle: {
+ fontSize: 14
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#555'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#555'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: '#555'
+ }
+ }
+ },
+ grid: [],
+ xAxis: [],
+ yAxis: [],
+ series: [
+ {
+ name: 'parallel',
+ type: 'parallel',
+ smooth: true,
+ lineStyle: {
+ width: 1,
+ opacity: 0.3
+ },
+ data: rawData
+ }
+ ]
+};
+
+generateGrids(option);
+
+export {}
\ No newline at end of file
diff --git a/src/common/store.js b/src/common/store.js
index 36206f8..95a0d0f 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -49,7 +49,7 @@ export function parseSourceCode(code) {
// remove front matter
.replace(/\/\*[\w\W]*?\*\//, '').trim()
// ts code needs add `export {}` to be a module. remove it.
- .replace(/export\s+\{\s*\}$/g, '');
+ .replace(/export\s+\{\s*\}\s*;?$/g, '');
}
let hashId = 123;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org