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传输

相关文章