09 echarts ajax

1 创建springmvc

1.1 创建pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.demo</groupId>
  <artifactId>spring-echarts-2-19</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <dependencies>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-beans</artifactId>
        <version>5.2.2.RELEASE</version>
    </dependency>
        <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-core</artifactId>
        <version>5.2.2.RELEASE</version>
    </dependency>
        <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>5.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>
        <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.9.8</version>
    </dependency>
        <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.9.8</version>
    </dependency>
  </dependencies>
  <build>
   <plugins>
   <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <port>8081</port>
                <path>/se</path>
                <uriEncoding>UTF-8</uriEncoding>
            </configuration>
          </plugin>
   </plugins>
  </build>
</project>

1.2 修改web.xml，添加SpringMVC

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>spring-echarts-2-19</display-name>
  <servlet>
      <servlet-name>HelloWeb</servlet-name>
      <servlet-class>
         org.springframework.web.servlet.DispatcherServlet
      </servlet-class>
      <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-web.xml</param-value>
      </init-param>
      <load-on-startup>1</load-on-startup>
   </servlet>

   <servlet-mapping>
      <servlet-name>HelloWeb</servlet-name>
      <url-pattern>/</url-pattern>
   </servlet-mapping> 
</web-app>

1.3 添加spring-web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
   xmlns:context="http://www.springframework.org/schema/context"
   xmlns:mvc="http://www.springframework.org/schema/mvc"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="
   http://www.springframework.org/schema/beans     
   http://www.springframework.org/schema/beans/spring-beans.xsd
   http://www.springframework.org/schema/context 
   http://www.springframework.org/schema/context/spring-context.xsd
   http://www.springframework.org/schema/mvc 
   http://www.springframework.org/schema/mvc/spring-mvc.xsd">
   <context:component-scan base-package="com.demo" />
   <mvc:annotation-driven></mvc:annotation-driven>
   <mvc:default-servlet-handler/>
   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <property name="prefix" value="/WEB-INF/jsp/" />
      <property name="suffix" value=".jsp" />
   </bean>
</beans>

1.4 创建控制器代码

package com.demo.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class DataAction {
    @RequestMapping("/index")
    public String index() {
        return "index";
    }
  @RequestMapping("/loads")
  @ResponseBody
  public List<Map<String,Object>> getRptChartTest(HttpServletRequest request, Model model)
      {
      List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
      Map<String,Object> map=new HashMap<String, Object>();
      map.put("name", "chrome浏览器");
      map.put("value", 30);
      map.put("drilldown", 11);
      list.add(map);
      
      map=new HashMap<String, Object>();
      map.put("name", "IE浏览器");
      map.put("value", 55);
      map.put("drilldown", 20);
      list.add(map);
      
      map=new HashMap<String, Object>();
      map.put("name", "Firefox浏览器");
      map.put("value", 5);
      map.put("drilldown", 11);
      list.add(map);
      
      map=new HashMap<String, Object>();
      map.put("name", "Safari浏览器");
      map.put("value", 4.8);
      map.put("drilldown", 1);
      list.add(map);
      
      return list;
      }
}

1.5 jsp代码

<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts.min.js"></script>
    <script type="text/javascript">   
        //初始化表格
        var myChart = echarts.init(document.getElementById('main'), 'macarons');
        //载入option配置
        myChart.setOption(getlinebar());
        
        function getlinebar(params) {
            option = {
                tooltip : {
                    trigger : 'axis',
                },
                legend : {
                    data : [ '最大占比', '最小占比' ]
                },
                toolbox : {
                    show : true,
                    orient : 'vertical',
                    y : 'center',
                    feature : {
                        mark : {
                            show : true
                        },
                        magicType : {
                            show : true,
                            type : [ 'line', 'bar' ]
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                },
                calculable : true,
                xAxis : [ {
                    type : 'category',
                    data : (function() {
                        var data = [];
                        $.ajax({
                            url : 'loads',
                            type : 'get',
                            async : false,
                            dataType : "json",
                            success : function(json) {
                                if (json) {
                                    for (var i = 0; i < json.length; i++) {
                                        console.log(json[i].name);
                                        data.push(json[i].name);
                                    }
                                }
                            }
                        })
                        return data;
                    })()
                } ],
                yAxis : [ {
                    type : 'value',
                    axisLabel : {
                        formatter : '{value} %'
                    }
                } ],

                series : [ {
                    name : '最小占比',
                    type : 'bar',
                    data : (function() {
                        var arr = [];
                        $.ajax({
                            url : 'loads',
                            type : 'get',
                            dataType : "json",
                            async : false,
                            success : function(data) {
                                if (data) {
                                    for (var i = 0; i < data.length; i++) {
                                        console.log(data[i].drilldown);
                                        arr.push(data[i].drilldown);
                                    }
                                }
                            }
                        })
                        return arr;
                    })()
                }, {
                    name : '最大占比',
                    type : 'bar',
                    data : (function() {
                        var arr = [];
                        $.ajax({
                            url : 'loads',
                            type : 'get',
                            dataType : "json",
                            async : false,
                            success : function(data) {
                                if (data) {
                                    for (var i = 0; i < data.length; i++) {
                                        console.log(data[i].value);
                                        arr.push(data[i].value);
                                    }
                                }
                            }
                        })
                        return arr;
                    })()
                } ]
            };
            return option;
        }   
    </script>
</body>
</html>