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;width: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圖