eCharts-图形报表框架

时间:2024-02-22 21:47:55

                                      eCharts-图形报表框架


 5分钟入门:

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

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

 

步骤:
1。 <!-- 引入 ECharts 文件 -->  (得注意一下插件的位置
<script src="echarts.min.js"></script>


2. <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<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>