                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Echarts3.0入門基礎(chǔ)與實(shí)戰(zhàn)

寫好的圖表頁面,加上動(dòng)態(tài)數(shù)據(jù)后頁面變成了空白

前臺(tái)jsp頁面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<head>
? ?<meta charset="utf-8">
? ?<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script 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' // 使用柱狀圖就加載bar模塊，按需加載
? ? ? ? ? ?],
? ? ? ? ? ?function (ec) {
? ? ? ? ? ? ? ?// 基于準(zhǔn)備好的dom，初始化echarts圖表
? ? ? ? ? ? ? ?var myChart = ec.init(document.getElementById('main'));

? ? ? ? ? ? ? ?var option = {
? ? ? ? ? ? ? ? ? ?title:{
? ? ? ? ? ? ? ? ? ? ? ?show:true,
? ? ? ? ? ? ? ? ? ? ? ?text:'這是一個(gè)柱狀圖'
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ?toolbox:{
? ? ? ? ? ? ? ? ? ? ? ?show:true,
? ? ? ? ? ? ? ? ? ? ? ?//添加頁面上的按鈕
? ? ? ? ? ? ? ? ? ? ? ?feature:{
? ? ? ? ? ? ? ? ? ? ? ? ? ?dataView:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?show:true
? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ?restore:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?show:true
? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ?dataZoom:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?show:true
? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ?saveAsImage:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?show:true
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ?tooltip: {
? ? ? ? ? ? ? ? ? ? ? ?show: true
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ?legend: {
? ? ? ? ? ? ? ? ? ? ? ?data:['年齡']
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ?xAxis : [
? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ?type : 'category',
? ? ? ? ? ? ? ? ? ? ? ? ? ?data : []
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?],
? ? ? ? ? ? ? ? ? ?yAxis : [
? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ?type : 'value'
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?],
? ? ? ? ? ? ? ? ? ?series : [
? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ?name:'年齡',
? ? ? ? ? ? ? ? ? ? ? ? ? ?type:"bar",
? ? ? ? ? ? ? ? ? ? ? ? ? ?data:[]
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?]
? ? ? ? ? ? ? ?};

? ? ? ? ? ? ? ?var names = [];
? ? ? ? ? ? ? ?var ages = [];

? ? ? ? ? ? ? ?$.ajax({
? ? ? ? ? ? ? ? ? ?type:"post",
? ? ? ? ? ? ? ? ? ?async:true,
? ? ? ? ? ? ? ? ? ?url:"findAll",
? ? ? ? ? ? ? ? ? ?data:{},
? ? ? ? ? ? ? ? ? ?dataType:"json",
? ? ? ? ? ? ? ? ? ?success:function (result) {
? ? ? ? ? ? ? ? ? ? ? ?$.each(result,function (i,p) {
? ? ? ? ? ? ? ? ? ? ? ? ? ?names[i]=p['names'];
? ? ? ? ? ? ? ? ? ? ? ? ? ?ages[i]={'name':p['names'],'age':p['names']};
? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ? ? ?myChart.setOption({
? ? ? ? ? ? ? ? ? ? ? ? ? ?xAxis:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?data:names
? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ?series:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:'年齡',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?data:ages
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?});
? ? ? ? ? ?}
? ?);
</script>
</body>

后臺(tái)controller層

package com.springboot.controller;

import com.springboot.pojo.User;
import com.springboot.service.UserService;
import net.sf.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
* Created by LYJ on 2017/9/12.
*/
@Controller
public class UserController {

? ?@Autowired
? ?private UserService userService;

? ?@RequestMapping("/findAll")
? ?@ResponseBody
? ?public List<User> findAll(){

? ? ? ?List<User> userList = userService.findAll();
? ? ? ?System.err.println(userList);
// ? ? ?JSONArray json = JSONArray.fromObject(userList);
// ? ? ?response.getWriter().write("json");
? ? ? ?return userList;
? ?}

? ?@RequestMapping("/zzt")
? ?public String zzt(){
? ? ? ?return "zzt";
? ?}
}