首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >UISYS封装ECharts插件

UISYS封装ECharts插件

作者头像
金刚
修改2020-01-06 11:04:09
8200
修改2020-01-06 11:04:09
举报

摘要

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,作为首页。 整体目录结构如下:
dir.PNG
dir.PNG
  1. 打开UISYS工具,发布 MyTest目录,如下(我的MyTest目录放在E:/juswork/test/ 目录下,各位自己电脑随意):
cmd.PNG
cmd.PNG

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 说明 可以按照以下操作。

  • 可以访问 <b>http://127.0.0.1/index.doc</b>
    doc.PNG
    doc.PNG
    然后查看下charts.Echarts 这是UISYS工具的默认分析模块能力,可以快速生成模块的API文档。
info.PNG
info.PNG
  • 下面我们做个首页命名为 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>
  • 最后打开如下网址,如果看到下图说明成功了。
result.PNG
result.PNG

总结

轻松实现。

这套例子写的非常简单,如果考虑到兼容框架的特性,实际上还有很多要做。

写插件吗,我觉得UISYS最贴近原生代码量少,不用绕脑子,直接用原生插件,非常好。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 摘要
    • 1. 准备
      • 2. 实现代码
      • 总结
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档