ECharts-gl中三维图片旋转问题
ECharts-gl中三维图片旋转问题
一开始用ECharts-gl库进行绘图的时候很多东西不是很熟，下面我稍微讲解下如何对三维图片进行旋转的操作以及代码的附上，有兴趣的读者可以自行测试。
主程序代码：
<div id='main' style="position: absolute;width: 80%;height: 80%;"></div>
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
option = {
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
zAxis3D: {
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]]
}
}),
shading: 'color',
label: {
show: false,
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
itemStyle: {
opacity: 0.4
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
直接运行代码，你将得到一个三维柱形图（图片就不附上了），那么接下来我们如何进行旋转呢？
首先，对于旋转我们要清晰两个概念①alpha：上下旋转角度，视角绕x轴旋转，针对上下视角；②beta：左右旋转角度，视角绕y轴旋转，针对左右视角。所以我们最终要进行的操作就是alpha和beta两个值，同时在ECharts-gl中也是有定义。下面来看看代码。
var betaAngle = 0;
document.getElementById("leftbtn").onclick = function () {
betaAngle += 30;
myChart.setOption({
grid3D: {
viewControl: {
beta: 30 + betaAngle
},
boxWidth: 300,
boxDepth: 150,
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
}
});
}
由例子可以知道，利用了js中鼠标点击事件，预先设置button->"leftbtn"（读者可以自行设置在自己想要的位置，这里就不举例 了），每次通过点击按钮"leftbtn"，betaAngle就会+30度角，左转30度角，点击n次，就会左转n*30度角。细心的读者就会发现如果角度换成-30就会变成右转。
同理可得，增添alpha属性在viewControl中，就能得到上下旋转的点击事件。
ECharts-gl中三维图片旋转问题相关推荐
- echart 三维可视化地图_使用 ECharts GL 实现三维可视化 - 入门款
(题图是使用 ECharts GL 渲染的纽约市建筑群) ECharts GL (后面统一简称 GL)为 ECharts 补充了丰富的三维可视化组件,这篇文章我们会简单介绍如何基于 GL 实现一些常见 ...
- 在html中让图片旋转180度,gif图片旋转教程:怎么把gif旋转90度/180度 附gif图片旋转软件...
视频可以用视频编辑软件将视频旋转90度>>gif旋转90度或180度呢,往下看,你可在本文中找到答案. 先睹为快,看看旋转的效果对比图: 原图 顺时旋 ...
- echarts地图中增加图片的实例
这个是自己从官网扒来的实例,自己进行了一些修改,没有什么技术难度,就是增加了一些参数,直接上代码吧 var geoCoordMap = {'上海': [121.4648,31.2891],'东莞': ...
- css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画
可重复使用的变数transition-timing-function 属性,比内置更强大ease ,ease-in ,ease-out 和ease-in-out . HTML CSS :root { ...
- java web图片旋转_修正web项目中图片旋转方向
# 使用 imagemagick 旋转 查看照片 EXIF 信息,Exif 中的图片旋转信息储存在``Orientation``中. ``` identify -verbose xxx.jpg ``` ...
- 该如何旋转EDIUS 8中的图片
刚刚接触EDIUS非线性编辑软件吗?觉得很难找到开破点吗?不要着急,新一篇EDIUS 8入门教程又来了.上一次我们讲了如何使用EDIUS 8让所有的图片素材都变成相同大小的,是不是很简单啊,这次我们再 ...
- exif.js html图片旋转,exif获取图片旋转角度
任何旋转,都可以用一个旋转轴 ω CGAffineTransform _trans = sticker.transform; CGFloat rotate = acosf(_trans.a);... ...
- 三星Android5.0系统以上 相册中选择相片后 图片旋转了90度问题
这个问题在实际应用开发中也是无意中碰到,下面给出代码解决 其中avatar为头像地址,path为在相册中选择完的相片地址 int degree = ImageUtils.readPictureDegr ...
- css 中图片旋转,倾斜,位移,平滑
在开发中,我们常常需要对图片有一些绚丽的效果,比如是图片旋转,平移,倾斜等.其实这些在css3中都已经存在,整理下作为demo,以后参考使用,也希望供大家交流学习.如果不足,多多指导. <!DO ...
最新文章
- Kali Linux Web***测试之 WebSploit
- 常见linux网络端口对照表(excel),常见子网掩码对照表Excel下载（反、正掩码）-数通工程师的傍身笔记...
- mysql数据库ip地址_MySQL数据库存储IP地址的方法
- 一些有关使用EF的错误用法展开的思考
- iOS事件拦截(实现触摸任意位置隐藏指定view)
- 谁敢花35万再加盟瑞幸？
- 自动化创建tornado项目
- python records库_Python Records库使用举例
- 均匀带电的无限大平面划成无限长直线积分计算场强
- mysql的架构及查询sql的执行流程（一）
- 现代操作系统-原理与实现(上)【银杏书-读书笔记】
- [动态规划]ACM预选赛F题 侠客行
- Linux 下 Android NDK 编译 openssl
- 大学四年的最后一篇日志，致敬2012-2016那些似水流年
- HTTP和AJAX重点知识
- 如何将pdf中一些特定页提取存储在另一个pdf中
- 安装部署Ceph Calamari
- 解密小米生态链：从构建到定义产品
- 泰拉瑞亚 Terraria Mac版
- Python自动化ppt制作工牌