AIroot UISYS 工具的模块封装能力很强,可以方便的融合第三方插件的能力。可以按照开发者的思想对已有插件升级改造,
例如 ECharts。
ECharts是目前国内数据可视化经常使用的插件,它基于canvas渲染,比以往的图形控件更加流程。 今天我们用 AIroot UISYS来封装ECharts,来作为一个标签,然后直接引入我们的HTML代码中。
<!-- 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 说明 可以按照以下操作。
<@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最贴近原生代码量少,不用绕脑子,直接用原生插件,非常好。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。