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. CodeForcesGym 100517H Hentium Scheduling

    Hentium Scheduling Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForc ...

  2. 编程数学(A-1)-(B-1)-一个数的负次方怎么算

    一个数的负几次方就是这个数的几次方的倒数.当这个数是正整数时,也就是说一个数的负n次方就是这个数的n次方分之一.例如: 2的-2次方=2的2次方分之1=4分之13的-2次方=3的2次方分之1=9分之1 ...

  3. set/multiset用法详解

    集合 使用set或multiset之前,必须加入头文件<set> Set.multiset都是集合类,差别在与set中不允许有重复元素,multiset中允许有重复元素. sets和mul ...

  4. POJ 3169_Layout

    大早上水一发=.= 题意: n头牛按编号顺序站成一列,给定n头牛之间的位置关系,求出第n头牛和第一头牛之间的最大距离. 分析: 差分约束系统,这题不等式关系还是挺好找的.注意因为按照顺序排列,所以有d ...

  5. codevs——1742 爬楼梯

    1742 爬楼梯  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的 ...

  6. Visual studio 2008 的语法高亮插件 WordLight

    前段时间一直在使用matlab,今天需要使用vs2008,而用惯了matlab,习惯了其中一项选中变量高亮的设置,突然回来使用VS,感到各种不适应,顿时想到了一个词:矫情 呵呵,于是在网上找各种插件, ...

  7. 网易互娱2017实习生招聘游戏研发工程师在线笔试第二场 C

    偶尔碰到这题,简单数位DP题,然而我已生疏了…… 这次算是重新想到的,看来对DP的理解有增进了…… dp[i][j][k],表示前i为,mod为j,是否出现2.3.5的剩下的数位可组成的数字.答案就是 ...

  8. day03-hdfs的客户端操作\hdfs的java客户端编程

    5.hdfs的客户端操作 客户端的理解 hdfs的客户端有多种形式: 1.网页形式 2.命令行形式 3.客户端在哪里运行,没有约束,只要运行客户端的机器能够跟hdfs集群联网 文件的切块大小和存储的副 ...

  9. react 项目实战(八)图书管理与自动完成

    图书管理 src / pages / BookAdd.js   // 图书添加页 /** * 图书添加页面 */ import React from 'react'; // 布局组件 import H ...

  10. td里面嵌套img标签后如何消除图片间隔

      td里面嵌套image标签后如何消除图片间隔 CreateTime--2018年3月7日16:18:12 Author:Marydon 情景还原: <body> <div sty ...