用UISYS封装ECharts作为模块应用

摘要

AIroot UISYS 工具的模块封装能力很强，可以方便的融合第三方插件的能力。可以按照开发者的思想对已有插件升级改造，
例如 ECharts。

ECharts是目前国内数据可视化经常使用的插件，它基于canvas渲染，比以往的图形控件更加流程。
今天我们用 AIroot UISYS来封装ECharts，来作为一个标签，然后直接引入我们的HTML代码中。

1. 准备

1. 我们新建一个目录，命名为 MyTest，然后下载 Echarts 的 js 包保存到当前目录的js文件夹下。
2. 新建 charts 文件夹，里面放 ECharts.ui （如果想引入其他Charts，例如HighChart等都可以加入）
3. 在 MyTest 目录下，新建 Index.ui，作为首页。
   整体目录结构如下：
   
4. 打开UISYS工具，发布 MyTest目录，如下（我的MyTest目录放在E:/juswork/test/ 目录下，各位自己电脑随意）：
   

2. 实现代码

• 以下是 ECharts.ui 的实现代码：

<!-- charts/ECharts.ui -->
<div width="400" height="300">
	<!-- 这里会替换为Echarts的内容 -->
</div>
<script>
	import js/echarts.min.js;
	private var myChart = null;
	//默认获取宽度
	private var _width from "width";
	//默认获取高度
	private var _height from "height";
	function init(){
		width = _width;
		height = _height;
		// 基于准备好的dom，初始化echarts实例
		myChart = echarts.init(dom);
	}
	//设置ECharts的option属性，这是Echarts生成图的关键属性
	public set option(value){
		myChart.setOption(value);
	}
	//设置宽度
	public set width(value){
		dom.style.width = value + "px";
		if(myChart){
			myChart.resize();
		}
	}
	//设置高度
	public set height(value){
		dom.style.height = value + "px";
		if(myChart){
			myChart.resize();
		}
	}
</script>

有ECharts原生开发经验的朋友，看上面的代码实际上就是实现了一边Echarts的初始化操作。
其中option 方法是 ECharts.ui 模块的setter属性。如果想看这个模块的 API 说明 可以按照以下操作。

• 可以访问 http://127.0.0.1/index.doc
  
• 然后查看下charts.Echarts
  这是UISYS工具的默认分析模块能力，可以快速生成模块的API文档。
  

• 下面我们做个首页命名为 Index.ui，测试下这个 Echarts.ui 模块是否好用

<@pub/>
<div>
	<charts.ECharts id="chart0" width="600" height="400" />
	<charts.ECharts id="chart1" width="600" height="400" />
</div>
<script>
	function init(){
		chart0.option =  {
			title: {
				text: 'Chart 0 Example'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["A","B","C","D","E","F"]
			},
			yAxis: {},
			series: [{
				name: 'Number',
				type: 'line',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		chart1.option =  {
			title: {
				text: 'Chart 1 Example'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["A","B","C","D","E","F"]
			},
			yAxis: {},
			series: [{
				name: 'Number',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
	}
</script>

• 最后打开如下网址，如果看到下图说明成功了。
  
  轻松实现。
  这套例子写的非常简单，如果考虑到兼容框架的特性，实际上还有很多要做。
  写插件吗，我觉得UISYS最贴近原生代码量少，不用绕脑子，直接用原生插件，非常好。