按照官方文檔，第一次接觸了Echarts GL,是一次很有趣的體驗^_^，不過在官網上下載的echarts-gl.js和echarts.js版本兼容不好，時常會報一些錯誤。先看看我解決錯誤的方法（很lowO(∩_∩)O哈哈~）
錯誤：
Uncaught Error: echarts version is too old, needs 4.0.3 or higher at versionTooOldMsg (echarts-gl.js:28712) at checkVersion (echarts-gl.js:28718) at Object.__webpack_exports__.a (echarts-gl.js:28723) at __webpack_require__ (echarts-gl.js:30) at Object.<anonymous> (echarts-gl.js:28612) at __webpack_require__ (echarts-gl.js:30) at module.exports (echarts-gl.js:73) at echarts-gl.js:76 at webpackUniversalModuleDefinition (echarts-gl.js:9) at echarts-gl.js:10 versionTooOldMsg @ echarts-gl.js:28712 checkVersion @ echarts-gl.js:28718 __webpack_exports__.a @ echarts-gl.js:28723 __webpack_require__ @ echarts-gl.js:30 (anonymous) @ echarts-gl.js:28612 __webpack_require__ @ echarts-gl.js:30 module.exports @ echarts-gl.js:73 (anonymous) @ echarts-gl.js:76 webpackUniversalModuleDefinition @ echarts-gl.js:9 (anonymous) @ echarts-gl.js:10
解決方法：
注釋echarts-gl.js中報錯的幾行！！！
還有好多類似的錯誤，我都直接注釋-_-||
下面是第一個例子的測試：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>EChartGL Test</title> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/echarts-gl.js"></script> </head> <body> <div id="main" style="width:800px;height:600px;"></div> <script type="text/javascript"> function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) { return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) { var exponent = -( ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2))) + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2))) ); return amplitude * Math.pow(Math.E, exponent); }.bind(null, amplitude, x0, y0, sigmaX, sigmaY); } // 創建一個高斯分布函數 var gaussian = makeGaussian(50, 0, 0, 20, 20); var data = []; for (var i = 0; i < 1000; i++) { // x, y 隨機分布 var x = Math.random() * 100 - 50; var y = Math.random() * 100 - 50; var z = gaussian(x, y); data.push([x, y, z]); } //基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'),'light'); var option = { // 需要注意的是我們不能跟 grid 一樣省略 grid3D grid3D: {}, // 默認情況下, x, y, z 分別是從 0 到 1 的數值軸 xAxis3D: {}, yAxis3D: {}, zAxis3D: {max: 100 }, series: [{ type: 'scatter3D', data: data }] } myChart.setOption(option); </script> </body> </html>
效果圖：
使用真實數據的三維散點圖：
從 http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json 獲取這份數據。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>EChartGL Test</title> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/echarts-gl.js"></script> </head> <body> <div id="main" style="width:800px;height:600px;"></div> <script type="text/javascript"> //基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'),'light'); $.get('asset/life-expectancy-table.json', function (data) { myChart.setOption({ grid3D: {}, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, dataset: { source: data }, series: [ { type: 'scatter3D', symbolSize: 2.5 } ] }) }); </script> </body> </html>
效果如下：
默認會把前三列，也就是Income，Life Expectancy，Population分別放到 x、 y、 z 軸上。
使用 encode 屬性我們還可以將指定列的數據映射到指定的坐標軸上，從而省去很多繁瑣的數據轉換代碼。
還有幾個例子，如果有興趣可以看看官方文檔：http://echarts.baidu.com/tutorial.html