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立体柱状图的更多相关文章

  1. NVIDIA® Quadro® 四路缓冲 3D立体方案

    http://www.nvidia.cn/object/quadro_pro_graphics_boards_cn.html NVIDIA® Quadro® 专业显卡让地球学家以及时装设计师等许多专业 ...

  2. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  3. 3D立体照片墙

    代码如下:   <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  4. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  5. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  6. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  7. Unity3D实现3D立体游戏原理及过程

    Unity3D实现3D立体游戏原理及过程 183 0 0     下面的教程是我今天整理的资料,教大家一步步完成自己的3D立体游戏,并向大家介绍一些3D成像的原理.     理论上,每个普通的非立体3 ...

  8. 新版蜀山剑侠传3D立体格斗全方位剖析

    国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...

  9. CorelDRAW X8制作金属质感3D立体按钮

    本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...

随机推荐

  1. 前端开发:HTML

    静态页面: 没有与用户进行交互,而仅仅是用户浏览的一个网页 动态网页:就是用户不仅仅可以浏览网页,还可以与服务器交互 Web前端应用场景:公司官网(在PC通过浏览器访问公司网站).移动端网页(在手机上 ...

  2. fread了解一下

    神奇读入挂^_^ 记得加头文件#include const int BufferSize=100*1000; char buffer[BufferSize],*head,*tail; bool not ...

  3. [NOIP2005] 提高组 洛谷P1053 篝火晚会

    题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有n个同学,编号从1到n.一开始,同学们按照 ...

  4. msp430入门编程05

    msp430中C语言的运算符和表达式 msp430中C语言的程序结构06 msp430中C语言的函数及实现07 msp430中C语言操作端口I/O10 msp430中C语言的模块化头文件及实现11 m ...

  5. AOJ -0033 Ball(DFS)

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=22516 一道需要思考的搜索题. 题意:十个球按给定顺序从图中所示容器中下落, ...

  6. 从零开始写STL-容器-双端队列

    从零开始写STL-容器-双端队列 什么是双端队列?在介绍vector源码,我们发现在vector前端插入元素往往会引起大量元素的重新分配,双端队列(deque)就是为了解决这一问题,双端队列中在首端和 ...

  7. sql将日期按照年月分组并统计数量

    SELECT DATE_FORMAT(releaseDate,"%Y年%m月") AS dates,COUNT(*) FROM t_diary GROUP BY DATE_FORM ...

  8. 搬砖--杭电校赛(dfs)

    搬砖 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submissi ...

  9. Builder设计模式

    Builder模式,又称生成器或构建者模式,属于对象创建型模式,侧重于一步一步的构建复杂对象,只有在构建完成后才会返回生成的对象.Builder模式将一个复杂对象的构建与它的表示分离,使得同样的构建过 ...

  10. Port forwarding with xinetd Ask

    https://stackoverflow.com/questions/21716673/port-forwarding-with-xinetd --------------------------- ...