eccharts-gl 3D立体柱状图

echarts-gl继承于echarts
echarts-gl官方实例https://echarts.baidu.com/examples/index.html#chart-type-globe
代码:
<div id="main" style="width: 500px;height: 400px;margin: 0 auto;"></div>
js
function getData() {
var pieChart = echarts.init(document.getElementById('main'));
var hours = ['90-100', '80-89', '70-79', '60-69', '<60'];
var days = ['', '', '', '', ''];
var best=$("#best").val()==undefined?0.0:$("#best").val();
var good=$("#good").val()==undefined?0.0:$("#good").val();
var midd=$("#medium").val()==undefined?0.0:$("#medium").val();
var pass=$("#pass").val()==undefined?0.0:$("#pass").val();
var fail=$("#fail").val()==undefined?0.0:$("#fail").val();
var bestRate=$("#bestRate").val()==undefined?0.0:$("#bestRate").val();
var goodRate=$("#goodRate").val()==undefined?0.0:$("#goodRate").val();
var middRate=$("#mediumRate").val()==undefined?0.0:$("#mediumRate").val();
var passRate=$("#passRate").val()==undefined?0.0:$("#passRate").val();
var failRate=$("#failRate").val()==undefined?0.0:$("#failRate").val();
var data = [[,,best],[,,good],[,,midd],[,,pass],[,,fail],
[,,bestRate],[,,goodRate],[,,middRate],[,,passRate],[,,failRate]];
var colorList=new Array();
var option = {
tooltip: {
},
xAxis3D: {
type: 'category',
data: hours,
name:'分数区间'
},
yAxis3D: {
type: 'category',
data: days,
},
zAxis3D: {
type: 'value',
name:'数据'
},
grid3D: {
boxWidth: ,
boxDepth: ,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
animation: false,
series: [{
name:"人数",
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[], item[], item[]],
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: ,
borderWidth:
}
},
itemStyle:{
normal: {
// 定制显示(按顺序)
color: function(params) {
var arr = params.data.value;
if(arr[]==){
colorList.push('#C33531');
}else{
colorList.push('#4A235A');
}
return colorList[params.dataIndex]
}
},
}
}]
}
pieChart.setOption(option);
}
eccharts-gl 3D立体柱状图的更多相关文章
- NVIDIA® Quadro® 四路缓冲 3D立体方案
http://www.nvidia.cn/object/quadro_pro_graphics_boards_cn.html NVIDIA® Quadro® 专业显卡让地球学家以及时装设计师等许多专业 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- 3D立体照片墙
代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效,周围小图组 ...
- Unity3D实现3D立体游戏原理及过程
Unity3D实现3D立体游戏原理及过程 183 0 0 下面的教程是我今天整理的资料,教大家一步步完成自己的3D立体游戏,并向大家介绍一些3D成像的原理. 理论上,每个普通的非立体3 ...
- 新版蜀山剑侠传3D立体格斗全方位剖析
国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...
- CorelDRAW X8制作金属质感3D立体按钮
本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...
随机推荐
- BNUOJ 5629 胜利大逃亡(续)
胜利大逃亡(续) Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 1 ...
- HDU1241&POJ2386 dfs简单题
2道题目都差不多,就是问和相邻所有点都有相同数据相连的作为一个联通快,问有多少个连通块 因为最近对搜索题目很是畏惧,总是需要看别人代码才能上手,就先拿这两道简单的dfs题目来练练手,顺便理一理dfs的 ...
- hdu 3622 二分+2-sat
/* 二分+2-sat 题意:在一个二维平面上给你n个炸弹,和2*n个位置,每一行的两个位置只能有一个放炸弹 现在炸弹爆炸有一个半径,当炸弹爆炸时两个炸弹的半径化成的圆不能相交,求最大半径 二分半径, ...
- 算法(1):查找&排序
算法(Algorithm):一个计算过程,解决问题的方法 程序 = 数据结构+算法 时间复杂度: 当算法过程中出现循环折半的时候,复杂度式子中会出现 O(logn) 时间复杂度小结: 1. 时间复杂度 ...
- [NOIP2004] 提高组 洛谷P1090 合并果子
题目描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和.可 ...
- Tyvj 1176 火焰巨魔的惆怅
Tyvj 1176 火焰巨魔的惆怅 背景 TYVJ2月月赛第一道 巨魔家族在某天受到了其他种族的屠杀,作为一个英雄,他主动担任了断后的任务,但是,在巨魔家族整体转移过后,火焰巨魔却被困住了,他出逃的方 ...
- [bzoj1578][Usaco2009 Feb]Stock Market 股票市场_完全背包dp
Stock Market 股票市场 bzoj-1578 Usaco-2009 Feb 题目大意:给定一个$S\times D$的大矩阵$T$,其中$T[i][j]$表示第i支股票第j天的价格.给定初始 ...
- Ubuntu 16.04 GNOME在桌面左侧添加启动器(Launcher)
安装Dash to Dock: git clone https://github.com/micheleg/dash-to-dock.git cd dash-to-dock/ make make in ...
- linux复制文件/移动文件从一个文件夹到另一个文件夹
cp ~/baidu/* ~/zhidao/cp -r逐层复制mv /data/link /usr/local 移动文件夹 解决方法 1.在cp命令后,加一个选项 -r . cp -r /TEST/ ...
- base64加解密字符串
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOExceptio ...