This is an automated email from the ASF dual-hosted git repository.
bigosmallm pushed a commit to branch feature/echarts
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/echarts by this push:
new 72f5c3d Add DataZoom functionality; Separate out example apps; Clean
up.
72f5c3d is described below
commit 72f5c3da3f22892d843fd478ac2464924293acaf
Author: Om Muppirala <[email protected]>
AuthorDate: Tue Mar 27 14:49:27 2018 -0700
Add DataZoom functionality; Separate out example apps; Clean up.
---
examples/royale/ECharts/asconfig.json | 2 +-
.../ECharts/src/{Main.mxml => BasicExample.mxml} | 14 ++--
.../src/{Main.mxml => DataZoomExample.mxml} | 39 +++++++----
examples/royale/ECharts/src/EchartsExample.as | 50 --------------
examples/royale/ECharts/src/echarts/DataZoom.as | 80 ++++++++++++++++++++++
.../royale/ECharts/src/echarts/DataZoomList.as | 27 ++++++++
.../royale/ECharts/src/echarts/EChartsOptions.as | 41 +++++++++--
examples/royale/ECharts/src/echarts/XAxis.as | 16 ++++-
examples/royale/ECharts/src/echarts/YAxis.as | 26 +++++--
9 files changed, 210 insertions(+), 85 deletions(-)
diff --git a/examples/royale/ECharts/asconfig.json
b/examples/royale/ECharts/asconfig.json
index bf0e474..199c007 100644
--- a/examples/royale/ECharts/asconfig.json
+++ b/examples/royale/ECharts/asconfig.json
@@ -8,6 +8,6 @@
},
"files":
[
- "src/Main.mxml"
+ "src/DataZoomExample.mxml"
]
}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/Main.mxml
b/examples/royale/ECharts/src/BasicExample.mxml
similarity index 71%
copy from examples/royale/ECharts/src/Main.mxml
copy to examples/royale/ECharts/src/BasicExample.mxml
index 709ea88..4b83e5b 100644
--- a/examples/royale/ECharts/src/Main.mxml
+++ b/examples/royale/ECharts/src/BasicExample.mxml
@@ -6,13 +6,13 @@
>
<fx:Script>
<![CDATA[
- [Bindable] private var data:Array;
+ [Bindable] private var xAxisData:Array;
[Bindable] private var salesData:Array;
[Bindable] private var profitData:Array;
private function onAppInitialize(event:Event):void
{
- this.data = ["shirt","cardign","chiffon
shirt","pants","heels","socks"];
+ this.xAxisData = ["shirt","cardign","chiffon
shirt","pants","heels","socks"];
this.salesData = [5, 20, 36, 10, 10, 20];
this.profitData = [15, 12, 45, 8, 9, 54];
}
@@ -25,11 +25,11 @@
<ns2:chartOptions>
<ns2:EChartsOptions>
<ns2:title>
- <ns2:Title text="Sales vs. Profit" show="true"
+ <ns2:Title text="Basic Example" show="true"
link="https://ecomfe.github.io/echarts-examples/public/index.html";
target="_self" />
</ns2:title>
<ns2:xAxis>
- <ns2:XAxis data="{this.data}" position="top" />
+ <ns2:XAxis data="{this.xAxisData}" position="top"
/>
</ns2:xAxis>
<ns2:yAxis>
<ns2:YAxis/>
@@ -37,10 +37,8 @@
<ns2:seriesList>
<ns2:SeriesList>
<ns2:series>
- <fx:Array>
- <ns2:Series name="Sales" type="bar"
data="{this.salesData}" />
- <ns2:Series name="Profit" type="line"
data="{this.profitData}" />
- </fx:Array>
+ <ns2:Series name="Sales" type="bar"
data="{this.salesData}" />
+ <ns2:Series name="Profit" type="line"
data="{this.profitData}" />
</ns2:series>
</ns2:SeriesList>
</ns2:seriesList>
diff --git a/examples/royale/ECharts/src/Main.mxml
b/examples/royale/ECharts/src/DataZoomExample.mxml
similarity index 50%
rename from examples/royale/ECharts/src/Main.mxml
rename to examples/royale/ECharts/src/DataZoomExample.mxml
index 709ea88..bdb7f66 100644
--- a/examples/royale/ECharts/src/Main.mxml
+++ b/examples/royale/ECharts/src/DataZoomExample.mxml
@@ -6,15 +6,23 @@
>
<fx:Script>
<![CDATA[
- [Bindable] private var data:Array;
- [Bindable] private var salesData:Array;
- [Bindable] private var profitData:Array;
+ [Bindable] private var seriesData:Array;
+ [Bindable] private var xAxisIndex:Array;
+ [Bindable] private var yAxisIndex:Array;
private function onAppInitialize(event:Event):void
{
- this.data = ["shirt","cardign","chiffon
shirt","pants","heels","socks"];
- this.salesData = [5, 20, 36, 10, 10, 20];
- this.profitData = [15, 12, 45, 8, 9, 54];
+ this.seriesData = [
+ // The first column corresponds to xAxis,
+ // and the second coloum corresponds to yAxis.
+ [1, 11],
+ [3, 9],
+ [12, 24],
+ [90, 80],
+ ];
+
+ this.xAxisIndex = [0];
+ this.yAxisIndex = [0];
}
]]>
@@ -25,25 +33,30 @@
<ns2:chartOptions>
<ns2:EChartsOptions>
<ns2:title>
- <ns2:Title text="Sales vs. Profit" show="true"
+ <ns2:Title text="DataZoom example" show="true"
link="https://ecomfe.github.io/echarts-examples/public/index.html";
target="_self" />
</ns2:title>
<ns2:xAxis>
- <ns2:XAxis data="{this.data}" position="top" />
+ <ns2:XAxis type="value" />
</ns2:xAxis>
<ns2:yAxis>
- <ns2:YAxis/>
+ <ns2:YAxis type="value"/>
</ns2:yAxis>
<ns2:seriesList>
<ns2:SeriesList>
<ns2:series>
- <fx:Array>
- <ns2:Series name="Sales" type="bar"
data="{this.salesData}" />
- <ns2:Series name="Profit" type="line"
data="{this.profitData}" />
- </fx:Array>
+ <ns2:Series type="line"
data="{this.seriesData}" />
</ns2:series>
</ns2:SeriesList>
</ns2:seriesList>
+ <ns2:dataZoomList>
+ <ns2:DataZoomList>
+ <ns2:dataZoom>
+ <ns2:DataZoom id="xAxisZoom" type="slider"
xAxisIndex="{[0]}" filterMode="filter"/>
+ <ns2:DataZoom id="yAxisZoom" type="slider"
yAxisIndex="{[0]}" filterMode="filter"/>
+ </ns2:dataZoom>
+ </ns2:DataZoomList>
+ </ns2:dataZoomList>
</ns2:EChartsOptions>
</ns2:chartOptions>
</ns2:ECharts>
diff --git a/examples/royale/ECharts/src/EchartsExample.as
b/examples/royale/ECharts/src/EchartsExample.as
deleted file mode 100644
index 094d030..0000000
--- a/examples/royale/ECharts/src/EchartsExample.as
+++ /dev/null
@@ -1,50 +0,0 @@
-package {
- import goog.global;
- import echarts.ECharts;
-
- public class EchartsExample {
-
- private var echartsContainer:HTMLDivElement;
- private var echartsInstance:Object;
- private var instance:ECharts;
-
- public function start():void {
- setupEchartsContainer();
- createEchartsInstance();
- }
-
- private function setupEchartsContainer():void
- {
- echartsContainer = HTMLDivElement(document.createElement("div"));
- echartsContainer.setAttribute("style", "width:
600px;height:400px;");
- document.body.appendChild(echartsContainer);
- }
-
- private function createEchartsInstance():void
- {
- echartsInstance = global["echarts"].init(echartsContainer);
-
- var option:Object =
- {
- title: {
- text: 'ECharts entry example'
- },
- tooltip: {},
- legend: {
- data:['Sales']
- },
- xAxis: {
- data: ["shirt","cardign","chiffon
shirt","pants","heels","socks"]
- },
- yAxis: {},
- series: [{
- name: 'Sales',
- type: 'bar',
- data: [5, 20, 36, 10, 10, 20]
- }]
- };
-
- echartsInstance.setOption(option);
- }
- }
-}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/DataZoom.as
b/examples/royale/ECharts/src/echarts/DataZoom.as
new file mode 100644
index 0000000..756763c
--- /dev/null
+++ b/examples/royale/ECharts/src/echarts/DataZoom.as
@@ -0,0 +1,80 @@
+package echarts
+{
+ import org.apache.royale.events.EventDispatcher;
+
+ public class DataZoom extends EventDispatcher{
+ private var _id:String;
+ private var _xAxisIndex:Array;
+ private var _yAxisIndex:Array;
+ private var _type:String;
+ private var _filterMode:String;
+
+ [Bindable("dataZoomChanged")]
+ public function get id():String
+ {
+ return _id;
+ }
+
+ public function set id(value:String):void
+ {
+ _id = value;
+ dispatchEvent(new Event("dataZoomChanged"));
+ }
+
+ [Bindable("dataZoomChanged")]
+ public function get xAxisIndex():Array
+ {
+ return _xAxisIndex;
+ }
+
+ public function set xAxisIndex(value:Array):void
+ {
+ _xAxisIndex = value;
+ dispatchEvent(new Event("dataZoomChanged"));
+ }
+
+ [Bindable("dataZoomChanged")]
+ public function get yAxisIndex():Array
+ {
+ return _yAxisIndex;
+ }
+
+ public function set yAxisIndex(value:Array):void
+ {
+ _yAxisIndex = value;
+ dispatchEvent(new Event("dataZoomChanged"));
+ }
+
+ [Bindable("dataZoomChanged")]
+ public function get type():String
+ {
+ return _type;
+ }
+
+ public function set type(value:String):void
+ {
+ _type = value;
+ dispatchEvent(new Event("dataZoomChanged"));
+ }
+
+ [Bindable("dataZoomChanged")]
+ public function get filterMode():String
+ {
+ return _filterMode;
+ }
+
+ public function set filterMode(value:String):void
+ {
+ _filterMode = value;
+ dispatchEvent(new Event("dataZoomChanged"));
+ }
+
+ public function get obj():Object {
+ return {id: this.id,
+ xAxisIndex: this.xAxisIndex,
+ yAxisIndex: this.yAxisIndex,
+ type: this.type,
+ filterMode: this.filterMode};
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/DataZoomList.as
b/examples/royale/ECharts/src/echarts/DataZoomList.as
new file mode 100644
index 0000000..14c64aa
--- /dev/null
+++ b/examples/royale/ECharts/src/echarts/DataZoomList.as
@@ -0,0 +1,27 @@
+package echarts
+{
+
+ import org.apache.royale.events.EventDispatcher;
+
+ public class DataZoomList extends EventDispatcher{
+ private var _dataZoomArray:Array = [];
+
+ [Bindable("dataZoomListChanged")]
+ public function get dataZoom():Array {
+ return _dataZoomArray;
+ }
+
+ public function set dataZoom(v:Array):void {
+ _dataZoomArray = v;
+ for(var i:int=0; i<_dataZoomArray.length; i++) {
+ _dataZoomArray[i].addEventListener("dataZoomChanged",
handleDataZoomChanged);
+ }
+ dispatchEvent(new Event("dataZoomListChanged"));
+ }
+
+ protected function handleDataZoomChanged(event:Event):void {
+ dispatchEvent(new Event("dataZoomListChanged"));
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/EChartsOptions.as
b/examples/royale/ECharts/src/echarts/EChartsOptions.as
index 3fd0527..207311d 100644
--- a/examples/royale/ECharts/src/echarts/EChartsOptions.as
+++ b/examples/royale/ECharts/src/echarts/EChartsOptions.as
@@ -8,8 +8,9 @@ package echarts
public class EChartsOptions extends EventDispatcher{
private var _title:Title = new Title();
private var _xAxis:XAxis;
- private var _yAxis:YAxis = new YAxis();
+ private var _yAxis:YAxis;
private var _seriesList:SeriesList;
+ private var _dataZoomList:DataZoomList;
public function EChartsOptions() {
@@ -49,6 +50,7 @@ package echarts
public function set yAxis(value:YAxis):void
{
_yAxis = value;
+ this._xAxis.addEventListener("yAxisChanged",
this.optionsChanged);
dispatchEvent(new Event("chartOptionsChanged"));
}
@@ -65,18 +67,43 @@ package echarts
dispatchEvent(new Event("chartOptionsChanged"));
}
+ [Bindable("chartOptionsChanged")]
+ public function get dataZoomList():DataZoomList
+ {
+ return _dataZoomList;
+ }
+
+ public function set dataZoomList(value:DataZoomList):void
+ {
+ _dataZoomList = value;
+ _dataZoomList.addEventListener("dataZoomListChanged",
this.optionsChanged);
+ dispatchEvent(new Event("chartOptionsChanged"));
+ }
+
public function get options():Object {
return {title: this.title,
xAxis: this.xAxis.obj,
- yAxis: this.yAxis,
- series: getSeriesValues()};
+ yAxis: this.yAxis.obj,
+ series: getSeriesValues(),
+ dataZoom: getDataZoomValues()};
}
protected function getSeriesValues():Array {
- var a:Array =
this.seriesList.series.map(function(item:Series):Object {
- return item.obj;
- });
- return a;
+ if(this.seriesList) {
+ return
this.seriesList.series.map(function(item:Series):Object {
+ return item.obj;
+ });
+ }
+ else return [];
+ }
+
+ protected function getDataZoomValues():Array {
+ if(this.dataZoomList) {
+ return
this.dataZoomList.dataZoom.map(function(item:DataZoom):Object {
+ return item.obj;
+ });
+ }
+ else return [];
}
protected function optionsChanged(event:Event):void {
diff --git a/examples/royale/ECharts/src/echarts/XAxis.as
b/examples/royale/ECharts/src/echarts/XAxis.as
index 92cd868..67e81a4 100644
--- a/examples/royale/ECharts/src/echarts/XAxis.as
+++ b/examples/royale/ECharts/src/echarts/XAxis.as
@@ -5,6 +5,7 @@ package echarts
public class XAxis extends EventDispatcher{
private var _data:Array;
private var _position:String;
+ private var _type:String;
[Bindable("xAxisChanged")]
public function get data():Array
@@ -30,9 +31,22 @@ package echarts
dispatchEvent(new Event("xAxisChanged"));
}
+ [Bindable("xAxisChanged")]
+ public function get type():String
+ {
+ return _type;
+ }
+
+ public function set type(value:String):void
+ {
+ _type = value;
+ dispatchEvent(new Event("xAxisChanged"));
+ }
+
public function get obj():Object {
return {data: this.data,
- position: this.position};
+ position: this.position,
+ type: this.type};
}
}
}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/YAxis.as
b/examples/royale/ECharts/src/echarts/YAxis.as
index 210877e..0132c7b 100644
--- a/examples/royale/ECharts/src/echarts/YAxis.as
+++ b/examples/royale/ECharts/src/echarts/YAxis.as
@@ -1,9 +1,25 @@
package echarts
{
- /**
- * @royalesuppresspublicvarwarning
- */
- public class YAxis{
-
+
+ import org.apache.royale.events.EventDispatcher;
+
+ public class YAxis extends EventDispatcher{
+ private var _type:String;
+
+ [Bindable("yAxisChanged")]
+ public function get type():String
+ {
+ return _type;
+ }
+
+ public function set type(value:String):void
+ {
+ _type = value;
+ dispatchEvent(new Event("yAxisChanged"));
+ }
+
+ public function get obj():Object {
+ return {type: this.type};
+ }
}
}
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
[email protected].
