`

当ECharts碰到TWaver

阅读更多

百度公司的ECharts发展迅速,已经成为HTML5 Chart的佼佼者,这让大家骄傲:中国人终于也有世界级的开源通用UI产品了。正如其网站所说,它是百度的,是中国的,也是世界的。想想那些年,我们追逐感慨过的chart产品,fusionchart、highchart等等不计其数,随着HTML5的迅速普及和ECharts的疯狂发展,大家可以忘掉那些产品了。其他商业chart产品基本上也离颤抖中关门的日子不远了。

TWaver各个分支也都有chart模块。虽然它不是核心组件,但是也有和TWaver的MVC框架紧密结合的便利,一些简单的应用场景是完全可以应付的。但和ECharts相比,毫无疑问ECharts表现力更丰富、功能更强大。其实TWaver和ECharts功能并不冲突和重叠,相反他们完全可以一起配合使用:TWaver做拓扑图、3D图,ECharts负责图表。很多TWaver的客户也是这样做的。

下面我们就尝试把ECharts和TWaver 3D场景进行结合,让两者都迸发出更精彩的火花。

首先用ECharts创建3个常见图表:

var chart1 = ec.init(document.getElementById('chart1'));                                 
var chart2 = ec.init(document.getElementById('chart2'));                                 
var chart3 = ec.init(document.getElementById('chart3'));  

 

ECharts通过单独的options可以把图表要显示的内容和样式全都定义清楚,这一点确实很方便。例如下面的options定义:

option1 = {
    title : {
        text: '某楼盘销售情况',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['意向','预购','成交']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710]
        },
        {
            name:'预购',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'意向',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
};
 
chart1.setOption(option1);

 三个图表显示如下:

chart1

chart2

chart3

 

接下来我们创建一个TWaver 3D立方体,放在另外的canvas上:

var box = new mono.DataBox();
var camera = new mono.PerspectiveCamera(30, 1.5, 0.1, 10000);
camera.setPosition(800,1000,1500);
 
var network= new mono.Network3D(box, camera, canvas);
var interaction = new mono.DefaultInteraction(network);
network.setInteractions([new mono.SelectionInteraction(network), interaction]);
 
var cube=new mono.Cube(1000,500,1000);
box.add(cube);

 最后一步,是把3个chart贴在立方体的3个面上,并能保持动态更新。ECharts的每个chart都有一个getImage()方法,可以很方便的拿到这个chart当前的“截图”。这样就方便了,我们把它“抓”下来,贴到cube的一个面上即可:

//截图chart生成图片
var image=chart1.getImage();
//图片生成加载完毕后,更新立方体顶面贴图
image.onload=function(){          
  cube.setStyle('top.m.texture.image', image);
} 

 把3个chart都如法炮制,分别贴在立方体的三个面上,效果就出来了:

441

再setInterval增加一个循环,把贴图不停的更新到立面上,这样就能让chart在3D场景中实时更新了。
442

由此可见,我们完全可以在项目中同时使用TWaver和ECharts进行数据呈现:TWaver负责拓扑图、通用组件、3D等部分,ECharts负责图表呈现部分。既可以2D相互搭配使用,也可以在3D中融合使用,充分发挥两个产品的特长。

分享到:
评论

相关推荐

    twaver.js使用示例

    “twaver.js使用示例”这一标题表明了我们即将探讨的是一个关于twaver.js的实践应用案例。Twaver.js是一款强大的图形化建模和可视化库,主要用于创建复杂的网络拓扑图、流程图、组织结构图等。这个标题暗示我们将...

    EChartsX是ECharts团队推出的全新3D可视化库

    EChartsX,作为ECharts团队精心打造的全新3D可视化库,旨在为开发者提供更为丰富且高效的3D数据展示解决方案。这个扩展库充分利用了WebGL技术的潜力,结合了QTEK这一强大的WebGL库,以及ZRender,一个专业的Canvas2D...

    TWaver的3d图形组件库,小demo

    "TWaver的3d图形组件库,小demo" 提示我们这是一个基于TWaver库的3D图形展示实例。TWaver是一个专业级的图表和数据可视化工具,它提供了HTML5版本的3D图形组件,允许开发者在Web应用中创建交互式的三维图形。 ...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织结构等场景。5.9.0是该库的一个特定版本,可能包含了新功能、性能优化或错误修复。 描述简单明了,"twaver-html5-5.9.0-api"直接...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    flex Twaver组件使用

    当`DataBox`中的数据发生变化时,这些变化会自动反映到与其关联的所有视图组件上,实现了数据和视图的双向绑定。 总的来说,TWaver Flex组件是构建富互联网应用的强大工具,它简化了图形界面的开发,提高了数据管理...

    TWaver HTML5 开发指南代码

    TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的绘制,尤其适合在Web上创建交互式的机房、网络设备、服务器架构等展示。 一、TWaver概述 TWaver是一个高效且灵活的JavaScript库,专门用于...

    Twaver-html5.zip

    Twaver学习案例的例子

    twaver-java-4.1

    【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...

    基于TWaver实现的3D机房Demo

    【基于TWaver实现的3D机房Demo】 在IT行业中,3D可视化技术正在逐步渗透到各个领域,尤其是在数据中心管理方面。TWaver是一款强大的WebGL3D框架,它为开发者提供了一个高效、灵活的工具,用于创建交互式的3D应用...

    twaver web实例源码

    【标题】"Twaver Web实例源码"是一个关于使用Twaver与ExtJS结合的Web应用程序开发的学习资源。Twaver是一款强大的图形化建模和可视化工具,常用于数据可视化、网络拓扑图、流程图等场景。ExtJS则是一个流行的...

    Twaver 3.7性能测试报告

    ### Twaver 3.7性能测试报告分析 #### 概述 Twaver是一款由Serva Software开发的强大软件工具,主要用于支持复杂网络环境中的数据管理和处理。本次报告主要针对Twaver Java版本(Twaver Java)在不同节点配置及连接...

    twaver拓扑

    【描述】提到"支持各种常见类型的图形",意味着twaver具备绘制不同形状和符号的能力,包括但不限于节点、链路、多边形、圆形、矩形、线段等。这些图形可以代表服务器、路由器、交换机、传感器等硬件设备,也可以代表...

    TWaver文档

    根据给定的文件信息,我们可以总结出以下有关TWaver的关键知识点: ### TWaver概述 - **TWaver**是由赛瓦软件开发的一款图形界面组件解决方案,主要用于数据的图形化展示,尤其是在电信行业拥有广泛的应用。 - **...

    TWaver HTML5 Developer Guide

    TWaver HTML5 Developer Guide是关于TWaver HTML5组件套件的官方开发文档,由Serva Software发布。TWaver HTML5是一套基于HTML5的图形组件库,它提供了一整套用于构建网络拓扑图、树形结构、表格和图表等功能丰富的...

    twaver-java-3.7

    **标题:“twaver-java-3.7”** **描述:“twaver-java-3.7 文档”** **标签:“twaver java 3.7”** 本文将深入探讨Twaver Java 3.7版本的相关知识,这是一个强大的数据可视化库,特别适用于Java开发人员。...

    TWaver-java-4.1试用版jar包

    【标题】"TWaver-java-4.1试用版jar包" 涉及的核心知识点是TWaver,这是一个专门用于数据可视化和图表绘制的Java库。TWaver提供了一个全面的解决方案,帮助开发者创建复杂的图表、仪表盘以及交互式的数据可视化应用...

    twaver-flex-3.6.5 官方demo

    【标题】"twaver-flex-3.6.5 官方demo" 提供的是一个基于Flex技术的Twaver图形库的演示版本。Twaver是一款强大的数据可视化和建模工具,广泛应用于网络、系统和业务流程的图形化表示。在3.6.5这个版本中,官方提供了...

    twaver for flex 开发手册

    - **连线绑定**:连线可以绑定到特定的数据元素,当数据发生变化时,连线也会自动更新。 - **twaver.Follower**:一种特殊类型的节点,可以跟随另一个节点移动。 - **twaver.ISubNetwork**:接口定义了子网络的...

Global site tag (gtag.js) - Google Analytics