echart.gl.js实现动态3D柱状图
一、总结
一句话总结：演示页面的源代码里面一定有所需的所有的js。
二、【js实践篇】——echart.gl.js实现动态3D柱状图
前言
本公司的项目需求主要是根据各个省的信用度的高低情况做一个动态的3D动态，能够展示省的信用高低值！
内容
1.准备工作
- jquery.min.js
- 最新的echart.min.js,官网在此自行下载
- echart-gl.min.js
2.代码实现
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
<meta charset="UTF-8">
</head>
<body>
<div id="main" style="height: 600px;600px;"></div>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/echarts.js" ></script>
<script type="text/javascript" src="js/echarts-gl.min.js" ></script>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('main'));
var xdata=[];
var ydata=[''];
$.getJSON('cityCredit.json',function(obj,index){
//读取json文件文件，遍历对象重新组合成data
var data=echarts.util.map(obj, function(item, index) {
return {
//index值x值，2指示y值，item.value指z值。其中x值代表省的变化，z值代表信用的变化
value: [ index,2, item.value],
//柱状图的填充颜色
itemStyle:{
color:'#66D9EF'
}
}
});
for(var i=0;i<obj.length;i++){
xdata.push(obj[i].name);//获取省名
}
initChart(xdata,data1,hours)
})
function initChart(xdata,ydata,citydata){
option = {
tooltip: {
type: ''
},
xAxis3D: {
type: 'category',
name: '',
data: xdata,
axisTick: {
show: true
},
},
yAxis3D: {
type: 'category',
name: '',
data: ydata,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
}
},
zAxis3D: {
type: 'value',
name: '',
axisTick: {
show: false
},
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
zlevel: -10,
axisPointer: {
show: false
},
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
name: '',
barSize: 11,
data: citydata,
label: {
show: false,
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
itemStyle: {
opacity: 0.4
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
}
}
}]
}
chart.setOption(option)
}
</script>
</body>
</html>-
效果图
总结
效果还有待改进，先分享给大家，有什么好的提议请留言喔！！ 具体例子下载—–3Dbar图