eCharts整合SSM的简单使用

eCharts

eCharts类型

折线图 - line

柱状/条状图 - bar

饼图 - pie

散点（气泡）图 - scatter

带有涟漪特效动画的散点（气泡）图 - effectScatter

雷达图 - radar

层级数据、树状数据可视化 - treemap

箱状图 - boxplot

K线图 - candlestick

热力图 - heatmap

地图 - map

平行坐标图 - parallel

线图 - lines

主要用于地图上的航线、线路。

关系图 - graph

桑基图 - sankey

漏斗图 - funnel

仪表盘 - gauge

象形柱图 - pictorialBar

主题河流 - themeRiver

自定义系列 - custom

柱状图 - bar

异步加载

页面：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/10 0010
  Time: 09:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    


    
    

    

Controller：

package com.soft863.controller;

import com.soft863.servlet.IndexServlet;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;
import java.util.Map;

@Controller
@Scope("prototype")
@RequestMapping("/index")
public class IndexController {

    @Autowired
    private IndexServlet indexServlet;

    @RequestMapping("/toIndex")
    public ModelAndView toIndex() {
        ModelAndView mav = new ModelAndView("index");
        return mav;
    }

    @RequestMapping("/queryForList")
    public @ResponseBody List> queryForList() {
        return indexServlet.queryForList();
    }
}

Service：

package com.soft863.Service;

import java.util.List;
import java.util.Map;

public interface IndexService {

    public List> queryForList();

}

Service impl：

package com.soft863.Service.impl;

import com.soft863.Service.IndexService;
import com.soft863.dao.IndexDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

@Service
public class IndexServiceImpl implements IndexService {

    @Autowired
    private IndexDao indexDao;

    public List> queryForList() {
        return indexDao.queryForList();
    }
}

Dao：

package com.soft863.dao;

import java.util.List;
import java.util.Map;

public interface IndexDao {

    public List> queryForList();

}

Mapper：

    
        select goodsName, goodsTotal from t_goods
    

数据库：

create table t_goods (
    goodsId int primary key auto_increment, -- 主键
    goodsName varchar(100), -- 商品名
    goodsTotal int -- 商品总量
)

测试数据：

insert into t_goods (goodsname, goodstotal)
values ('三星', 100),
       ('苹果', 49),
       ('华为', 88),
       ('小米', 79),
       ('魅族', 200),
       ('锤子', 30),
       ('vivo', 163)

结果：

饼状图 - pie

异步加载

页面：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/10 0010
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    


    
    

    <
    

Controller ：

/**
 * 跳转到饼状图页面
 * @return
 */
@RequestMapping("/pie")
public ModelAndView toPie() {
    ModelAndView mav = new ModelAndView("pie");
    return mav;
}

其他代码同柱状图中的相同；
效果：