按照官方文档，第一次接触了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="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="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