js特效网站模板下载,龙岩做网站开发大概价格,手机桂林生活网,腾讯企业邮箱如何注册ECharts图形组件在1.0发布的时候我就已经有所关注#xff0c;今天在做项目的时候遇到了图标的需求#xff0c;在HT for Web上也有图形组件的功能#xff0c;但是在尝试了下具体实现后#xff0c;发现HT for Web的图形组件是以矢量的格式来呈现的#xff0c;在展现上可以有… ECharts图形组件在1.0发布的时候我就已经有所关注今天在做项目的时候遇到了图标的需求在HT for Web上也有图形组件的功能但是在尝试了下具体实现后发现HT for Web的图形组件是以矢量的格式来呈现的在展现上可以有很多的自定义和数据绑定等特性但是其在交互的设计上就显得比较弱势。 因此我就在想是否可在项目中将ECharts图形组件代替HT for Web的图形组件呢在对ECharts做了初步的了解后发现两者都是基于Div和canvas的应用于是我开始做大胆的尝试终于功夫不负苦心人下面就来看下Demo的具体展现效果吧 这是从ECharts官方Demo中拷贝下来的两个例子其中在布局上用到了HT for Web的SplitView组件将两个chart以上下比例32分割。 光看这个例子并无法很直观的看出ECharts和HT for Web应用的结合接下来我们来看下HT for Web拓扑图组件与ECharts图形组件的整合效果 在这个Demo中就整合了HT for Web的Tree组件GraphView拓扑图组件和ECharts图形组件并采用HT for Web的SplitView组件做布局。 说了这么多现在我们来看下具体代码的实现吧 ht.Chart function(option){var self this,view self._view document.createElement(div);view.style.position absolute;view.style.setProperty(box-sizing, border-box, null);self._option option;
};
ht.Default.def(ht.Chart, Object, {ms_v: 1,ms_fire: 1,ms_ac: [chart, option, isFirst],validateImpl: function(){var self this,chart self._chart;if(!chart){chart self._chart echarts.init(self.getView());chart.setOption(self._option);}chart.resize();}
});你没有看错最核心的代码就这些下面就来介绍下代码设计的具体逻辑 这串代码其实很好理解就是在系统中定义ht.Chart这个类然后让类具有view和fire的特性最后在validateImpl方法中具体实现chart的初始化和渲染。具体的使用就是通过new关键字来创建ht.Chart的实例并传入标准的ECharts配置参数或在new的时候不传参在创建对象后通过setOption(option)方法来设置。 最后我为大家录制了具体页面的操作效果视频欢迎大家欣赏。 http://v.youku.com/v_show/id_XOTEyNzUyNDIw.html
