eCharts-图形报表框架

时间:2020-07-11
本文章向大家介绍eCharts-图形报表框架,主要包括eCharts-图形报表框架使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

                                      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

好于官网给的饼图对应上

 

前端

<%@ 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>

  

 

$flag 上一页 下一页

上一篇:JS this的指向

下一篇:线程笔记