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=" 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=" 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>