eCharts-图形报表框架

5分钟入门：

ECharts
图形报表框架 ECharts.js ,是基于js的前端报表框架

官网：https://echarts.apache.org/zh/index.html

步骤：
1。  （得注意一下插件的位置）
<script src="echarts.min.js"></script>

2. 
<div id="main" style="width: 600px;height:400px;"></div>

3.把官网案例模板代码放进html页面

\'bar\' 树状图

\'line\' 折线图

\'pie\' 饼图

\'scatter\' 散点图

例子，饼图：

后端：

  /**
     * 获取厂家销量方法（从页面stat-factory.jsp传来的）
     *  1）URL：http://localhost:8080/stat/getFactoryData.do
     *  2）参数:无
     *  3）返回：JSON字符串
     */
    @RequestMapping("/getFactoryData")
    @ResponseBody // java对象转换JSON字符串
    public List<Map<String,Object>> getFactoryData(){
        return statService.getFactoryData(getLoginCompanyId());
    }

注意实现：

一定要把　

List<Map<String,Object>>里面的map集合的数据的键名和值名都改成name和value，故得到dao配置文件里面起别名为name和value

,也就是在dao的配置文件中的sql语句select显示的值定义别名为name和value好于官网给的饼图对应上

前端

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            统计分析
            <small>厂家销量统计</small>
        </h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div id="main" style="width: 900px;height:400px;"></div>   //第二步 
        </div>
    </section>
</div>
</body>
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>    //第一步
<script type="text/javascript">
<!--     这儿就是用ajax来实现饼图的数据获得      -->
    //异步请求获取后台数据
    $.ajax({
        url:\'/stat/getFactoryData.do\',
        type:\'get\',
        dataType:\'json\',    //说明响应回来的数据格式是json格式
        success:function(result){  // [ {name:xxx,value:xxxx}, {name:xxx,value:xxxx} ]

            //取出所有name数据
            var titleArray = [];
            for(var i=0;i<result.length;i++){
                titleArray[i] = result[i].name;  //因为是json格式的数据可以直接点属性名获得属性值
            }

<!--            -->

//以下就是第三步

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(\'main\'));

            // 指定图表的配置项和数据
            var option = {          //不同的echarts图片更改不同的option（去官网找），然后修改里面的数据就行了
                title: {
                    text: \'生产厂家销量统计图\',
                    subtext: \'来源：黑马程序员\',
                    left: \'center\'
                },
                tooltip: {
                    trigger: \'item\',
                    formatter: \'{a} <br/>{b} : {c} ({d}%)\'
                },
                legend: {
                    orient: \'vertical\',
                    left: \'left\',
                    data: titleArray           //更改
                },
                series: [
                    {
                        name: \'访问来源\',
                        type: \'pie\',
                        radius: \'55%\',
                        center: [\'50%\', \'60%\'],
                        data: result,            //更改
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: \'rgba(0, 0, 0, 0.5)\'
                            }
                        }
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    });


</script>
</html>

秒客网

eCharts-图形报表框架

相关文章