百度公司的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);

  

三个图表显示如下:

接下来我们创建一个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都如法炮制,分别贴在立方体的三个面上,效果就出来了:

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

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

 

当ECharts碰到TWaver的更多相关文章

  1. 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  2. 在React 组件中使用Echarts

    在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的E ...

  3. echarts .NET类库开源

    前言: 2012年从长沙跑到深圳,2016年又从深圳回到长沙,兜兜转转一圈,又回到了原点.4年在深圳就呆了一家公司,回长沙也是因为深圳公司无力为继,长沙股东老板挽留,想想自己年纪也不小了.就回来了,在 ...

  4. TWaver初学实战——基于HTML5的交互式地铁图

    每天坐地铁,经常看地铁图,有一天突然想到,地铁图不也是一种拓扑结果吗?TWaver到底能与地铁图擦出怎样的火花呢?   想到就干,先到网上找幅参考图.各种风格的地铁图还挺多,甚至有大学生自主设计制作, ...

  5. Echarts折线图表断点如何补全

    Echarts折线图如何补全断点以及如何隐藏断点的title 做报表的时候,尤其是做图表的时候时常会碰到某一记录的值中缺少某个时间段(比如月份或季度)的值,导致图表显示残缺不全,for example ...

  6. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  7. echarts的学习

    博客1.:https://zrysmt.github.io/ 博客2:http://blog.csdn.net/future_todo/article/details/60956942 工作中一个需求 ...

  8. Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  9. Echarts横坐标倾斜,顶部显示数字

    最近项目使用到Echarts,所以学习了下 根据API,实现Echarts很简单,在这就不多说了,下面就说说项目中碰到的一些需求 1.由于横坐标很多,导致数据不能展示完整,所以需要设置横坐标样式倾斜展 ...

随机推荐

  1. [办公自动化]凭证纸打印 IE 默认设置

    财务人员需要打印凭证纸,系统windows7,打印机HP P1106 在自定义纸张类型中设置凭证纸. 属性,打印首选项,“纸张和质量”选卡处,单击自定义(需要管理员权限) 输入“PZ” 宽148 高2 ...

  2. CI框架下的get_instance() 函数

    你随便下个CI框架的源码都会看到很多的get_instance() 函数,这个函数是用来获取CI 的全局超级对象,CI 是单例模式的框架,所有全局有一个超级对象.因为只有一个实例,所以无论这个函数使用 ...

  3. Robot Framework 初学者上手资料

    首先要声明一下这是从http://www.cnblogs.com/yufeihlf/p/5949984.html拷贝的. 在这里只是自己的一个笔记,方便日后添加.修改内容. 总结下Robot Fram ...

  4. RK3288][Android6.0] 调试笔记 --- 关闭按键音后无法录音问题【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/70052413 Platform: ROCKCHIPOS: Android 6.0Kernel ...

  5. Array.Copy vs Buffer.BlockCopy

    http://stackoverflow.com/questions/1389821/array-copy-vs-buffer-blockcopy Since the parameters to Bu ...

  6. build_native.py文件分析(2)

    def build(ndk_build_param,android_platform,build_mode): ////获取ndk_root -- NDK_ROOT = os.environ['NDK ...

  7. android删除短信

    代码如下: //删除短信 getContentResolver().delete(Uri.parse("content://sms/#"),"address=?" ...

  8. Mybatis 分页实现

    一.插件 PageHelper(推荐使用) 原理:利用Mybatis的拦截器,截获需要分页的sql语句,在语句后面加分页条件,及获取总记录数等属性. 注意 插件属性类 参考一 参考二 实例: 第一步: ...

  9. 【WIP】C基础语法

    创建: 2017/06/17 更新: 2017/10/14 标题加上[WIP],增加创建时间 更新: 2018/02/05 被Objective-C引用部分加上id方便链接,代码放进代码模板      ...

  10. robotframework - selenium 分层思路

    前言: 对于每一条用例来说,调用“百度搜索”关键字,输入搜索内容,输入预期结果即可.不同关心用例是如何执行的.如果百度输入框的定位发生了变化,只用去修改“百度搜索”关键字即可,不用对每一条用例做任何修 ...