Echarts异步数据json传输

今天应项目需要进行统计分析,显示炫酷的柱状图,就想到了Echarts,本来认为应该是很简单的 Echarts异步数据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>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<title>Insert title here</title>
</head>
<body>
项目概览
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    
    require.config({
		paths:{
		echarts:'http://echarts.baidu.com/build/dist',
		}
		});

		require(
		[
		'echarts',
		'echarts/chart/bar',
		'echarts/chart/line',
		],
		//回调函数内执行图表对象的初始化
	    function(ec) {
	        var myChart = ec.init(document.getElementById('main'));
	        $.getJSON("TongJiServlet?method=findAllXmmc&callback=?",
				function(data){
	        	console.dir("datas:"+data);
                console.dir("categories:"+data.categories);
                console.dir("data:"+data.data);
	        	myChart.setOption({
		        	title: {
		                text: 'ECharts 入门示例'
		            },
		            tooltip: {},
		            legend: {
		                data:['销量']
		            },
		            xAxis: {
		                data: data.categories
		            },
		            yAxis: {
		                    type : 'value',
		                    axisLabel: {
		                          show: true,
		                          interval: 'auto',
		                          formatter: '{value} %'
		                        }
		            },
		            series: [{
		                name: '销量',
		                type: 'bar',
		                data: data.data
		            }]
		        }); 
              
            });
	    }
		);
    </script>
</body>
</html>

我遇到了如下问题:

(1).Echarts is not defined 很坑的一个问题啊!解决方法:自己导入Echarts.js文件会出现这种问题,我将他改成连网得到百度上的js文件

<script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script>

并把初始化的代码放在了回调函数中就不再报这个错误啦

(2).要保证传过来的是json格式的对象,不然会得不到数据的.

在传输的时候要加上callback=?并且在后台得到然后将它与json数据一块拼接传回前台,另外json格式是 ({categories[],data[]})形式

例如:({categories:["dsfdsfds","llalala","ssdsds","1234","3cddddd","dfddfdf","fdfdfdfdfdfdfd"],data:[20,30,49,37,2,9,8]})

秒客网

Echarts异步数据json传输

相关文章