eccharts-gl 3D立体柱状图
2024-08-26 23:13:56
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);
}
最新文章
- Maven安装最佳实践(Windows平台)
- linux 终端全局代理设置
- 新浪微博授权失败:applications over the unaudited use restrictions
- Sqoop实现关系型数据库到hive的数据传输
- 滑雪(dp好题)
- VS2015中DataGridView的DataGridViewComBoboxCell列值无效及数据绑定错误的解决方法
- NSThread的一些细节
- jquery 提交数据
- ( ̄y▽ ̄)~ 智能手机II
- 通讯录--(适配iOS7/8/9)
- Zepto源码分析-架构
- shapes 不规则边界
- hexo 博客支持PWA和压缩博文
- PS 滤镜——素描算法(二)
- 学习iOS最权威的网站
- [Atcoder SoundHound Contest 2018]E.+ Graph
- laravel中的Auth认证:
- win10与centos7的双系统U盘安装(一:制作u盘启动盘)
- navicat连接oracle方法及其安装包
- 关于form表单提交到Servlet的时候出现tomcat启动错误的解决方法