随着大数据的到来，越来越多的数据需求需要开发，而这些需求不可避免需要使用JS画出图表，而大多后端JAVA开发人员对JS不太熟悉，导致身心倍受折磨，今天记录以下最近我使用echarts的步骤，供参考：
一、环境说明
前端框架：echarts、Jquery
后端框架：SPRINGMVC
二、开发过程
前端代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 400px"></div>
<script type="text/javascript">
$(function() {
$.ajax({
url : "http://www.qunar.com/getJson", //获取JSON地址
dataType : "text",
success : function(data) {
var result = eval(data);// 路径配置
require.config({
paths : {
‘echarts‘ : ‘http://echarts.baidu.com/build/echarts‘,
‘echarts/chart/bar‘ : ‘http://echarts.baidu.com/build/echarts‘
}
});
var myChart;
// 使用
require([ ‘echarts‘, ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById(‘main‘));
// 为echarts对象加载数据
myChart.setOption(result[0]);
});}
});
});
</script>
</body>
</html>
对于我来说，编写这些JS最困难了。
1、首先需要AJAX获取数据
2、需要与echarts相互结合
3、option这个对象是核心，后端需要生成的也是这个对象。
获取的后端数据：
[{"calculable":true,"graphType":null,"legend":{"data":["报表"]},"series":[{"data":[1,2,3],"name":"报表","type":"bar"}],"title":{"color":"red","fontSize":24,"link":"http://www.qunar.com","subText":"报表","text":"去哪儿-报表"},"tootip":{"show":true},"xAxis":{"data":[1,2,3],"type":"category"},"yAxis":{"data":[],"type":"value"}}]
后端如何生成这些JSON数据就不在这里说了，任何提供REST服务或者SpringMVC都能实现。这里需要注意的是，如果想要长期使用echarts，建议还是好好阅读文档，因为任何的小错误，都可能导致效果相差很大。