Echarts GL初次体验

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