eCharts整合SSM的简单使用

来源：互联网发布：千牛和淘宝卖家编辑：程序博客网时间：2024/06/05 21:04

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" %><html><head>    <title>柱状图</title>    <script type="text/javascript" src="${pageContext.request.contextPath}/eCharts/echarts.js"></script>    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script></head><body>    <!-- 柱状图容器 -->    <div id="main" style="width:600px; height:400px;"></div>    <script type="text/javascript">        $(function() {            // 初始化            //var myChart = echarts.init(document.getElementById('main'));var myChart = echarts.init($('#main')[0]); // 注意：这里init方法的参数的javascript对象，使用jQuery获取标签时，要将jQuery对象转成JavaScript对象；            // 配置图标参数            var options = {                title: {                    text: '手机销量',                    show: true, // 是否显示标题                    subtext: '测试数据',                    textStyle: {                        fontSize: 18 // 标题文字大小                    }                },                tooltip: {                    trigger: 'axis',                    axisPointer: {                        type: 'shadow'                    }                },                legend: {                    data: ['销量']                },                // X轴                xAxis: {                    data: [] // 异步请求时,这里要置空                },                // Y轴                yAxis: {},                series: [{                    name: '销量',                    type: 'bar', // 设置图表类型为柱状图                    data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)                }]            };            // 给图标设置配置的参数            myChart.setOption(options);            myChart.showLoading(); // 显示加载动画// 异步请求加载数据            $.ajax({                url: '${pageContext.request.contextPath}/index/queryForList',                type: 'post',                dataType: 'json',                success: function(data) {                    var names = [];                    var nums = [];                    $.each(data, function(index, obj) {                        names.push(obj.goodsName);                        nums.push(obj.goodsTotal);                    })                    myChart.hideLoading(); // 隐藏加载动画                    myChart.setOption({                        legend: {                            data: ['销量']                        },                        xAxis: {                            data: names                        },                        series: [{                            name: '销量',                            type: 'bar', // 设置图表类型为柱状图                            data: nums // 设置纵坐标的刻度                        }]                    });                }            });        });    </script></body></html>

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<Map<String, Object>> queryForList() {        return indexServlet.queryForList();    }}

Service：

package com.soft863.Service;import java.util.List;import java.util.Map;public interface IndexService {    public List<Map<String, Object>> 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;@Servicepublic class IndexServiceImpl implements IndexService {    @Autowired    private IndexDao indexDao;    public List<Map<String, Object>> queryForList() {        return indexDao.queryForList();    }}

Dao：

package com.soft863.dao;import java.util.List;import java.util.Map;public interface IndexDao {    public List<Map<String, Object>> queryForList();}

Mapper：

<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE mapper        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"        "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.soft863.dao.IndexDao">    <select id="queryForList" resultType="map">        select goodsName, goodsTotal from t_goods    </select></mapper>

数据库：

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" %><html><head>    <title>饼状图</title>    <script type="text/javascript" src="${pageContext.request.contextPath}/eCharts/echarts.js"></script>    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script></head><body>    <!-- 饼状图容器 -->    <div id="pid-div" style="width:600px; height:400px;"></div>    <    <script type="text/javascript">        $(function() {            //var echarts = echarts.init($('#pid-div')[0]);            var myChart = echarts.init($('#pid-div')[0]);            var option = {                title : {                    text: '手机销量',                    subtext: '纯属虚构',                    x:'center'                },                tooltip : {                    trigger: 'item',                    formatter: "{a} <br/>{b} : {c} ({d}%)"                },                legend: {                    orient: 'vertical',                    left: 'left',                    data: []                },                series : [                    {                        name: '访问来源',                        type: 'pie',                        radius : '55%', // 饼状图的大小                        center: ['50%', '60%'], // 饼状图的位置                        data:[                            /*{value:335, name:'直接访问'},                            {value:310, name:'邮件营销'},                            {value:234, name:'联盟广告'},                            {value:135, name:'视频广告'},                            {value:1548, name:'搜索引擎'}*/                        ],                        itemStyle: {                            emphasis: {                                shadowBlur: 10,                                shadowOffsetX: 0,                                shadowColor: 'rgba(0, 0, 0, 0.5)'                            }                        }                    }                ]            };            myChart.setOption(option);            myChart.showLoading(); // 显示动画            $.ajax({                url: '${pageContext.request.contextPath}/index/queryForList',                type: 'post',                dataType: 'json',                success: function(data) {                    var names = [];                    var nums = [];                    $.each(data, function(index, obj) {                        names.push(obj.goodsName);                        nums.push({name:obj.goodsName, value:obj.goodsTotal});                    })                    myChart.hideLoading(); // 隐藏加载动画                    myChart.setOption({                        legend: {                            data: names                        },                        series: [{                            name: '销量',                            type: 'pie', // 设置图表类型为柱状图                            data:  nums // 设置纵坐标的刻度                        }]                    });                }            });        });    </script></body></html>

Controller：

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

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

阅读全文

0 0