当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);
三个图表显示如下:
接下来我们创建一个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的更多相关文章
- 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- 在React 组件中使用Echarts
在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的E ...
- echarts .NET类库开源
前言: 2012年从长沙跑到深圳,2016年又从深圳回到长沙,兜兜转转一圈,又回到了原点.4年在深圳就呆了一家公司,回长沙也是因为深圳公司无力为继,长沙股东老板挽留,想想自己年纪也不小了.就回来了,在 ...
- TWaver初学实战——基于HTML5的交互式地铁图
每天坐地铁,经常看地铁图,有一天突然想到,地铁图不也是一种拓扑结果吗?TWaver到底能与地铁图擦出怎样的火花呢? 想到就干,先到网上找幅参考图.各种风格的地铁图还挺多,甚至有大学生自主设计制作, ...
- Echarts折线图表断点如何补全
Echarts折线图如何补全断点以及如何隐藏断点的title 做报表的时候,尤其是做图表的时候时常会碰到某一记录的值中缺少某个时间段(比如月份或季度)的值,导致图表显示残缺不全,for example ...
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts的学习
博客1.:https://zrysmt.github.io/ 博客2:http://blog.csdn.net/future_todo/article/details/60956942 工作中一个需求 ...
- Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
- Echarts横坐标倾斜,顶部显示数字
最近项目使用到Echarts,所以学习了下 根据API,实现Echarts很简单,在这就不多说了,下面就说说项目中碰到的一些需求 1.由于横坐标很多,导致数据不能展示完整,所以需要设置横坐标样式倾斜展 ...
随机推荐
- springMVC之异常处理
1. 自己定义一个异常类: UserException.java public class UserException extends RuntimeException { private stati ...
- luogu 4427 求和
bjoi 2018 求和 唯一一道可能切的题一个数组还没开long long就成0分了 题目大意: 一棵有根树,并且希望多次询问这棵树上一段路径上所有节点深度的k次方和,而且每次的k可能是不同的 此处 ...
- 洛谷 P2585 [ ZJOI 2006 ] 三色二叉树 —— 树形DP
题目:https://www.luogu.org/problemnew/show/P2585 首先,三色其实记录两种状态:是绿色,不是绿色 即可,因为红蓝可以随意取反: 一开始因为懒得还原出树,所以写 ...
- 洛谷P3690 LCT模板
题目:https://www.luogu.org/problemnew/show/P3690 自己竟然从没有钻研过LCT上的连通性问题! 于是被最后一个点卡了,似乎因为 find 函数只能找出连通性而 ...
- 洛谷P2827 蚯蚓——思路题
题目:https://www.luogu.org/problemnew/show/P2827 思路... 用优先队列模拟做的话,时间主要消耗在每次的排序上: 能不能不要每次排序呢? 关注先后被砍的两条 ...
- Java IO 输入输出流 详解 (一)***
首先看个图: 这是Javaio 比较基本的一些处理流,除此之外我们还会提到一些比较深入的基于io的处理类,比如console类,SteamTokenzier,Externalizable接口,Seri ...
- 杂项-Java:Tomcat
ylbtech-杂项-Java:Tomcat 1.返回顶部 1. Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目, ...
- ASP.Net 下载大文件的实现 (转)
原文:http://www.cnblogs.com/luisliu/p/4253815.html 当我们的网站需要支持下载大文件时,如果不做控制可能会导致用户在访问下载页面时发生无响应,使得浏览器崩溃 ...
- Objective-C 对象的类型与动态结合
创建: 2018/01/21 更新: 2018/01/22 标题前增加 [Objective-C] 完成: 2018/01/24 更新: 2018/01/24 加红加粗属性方法的声明 [不直接获取内部 ...
- Liunx中虚拟机远程复制文件SCP命令
1.首先在虚拟机中新建 CentOSA .CentOSB 从远处复制文件到本地目录 scp -r root@192.168.1.24:/root/aa ./ 从CentosB虚拟机器上的/root/a ...