Echarts图表中动态数据显示
1 什么是Echarts？
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
可参看官方网址介绍：【http://echarts.baidu.com/index.html】
2 如何五分钟上手Echarts?
本篇文章不会向你介绍如何上手Echarts，事实上这部分确实很简单，只要引入其js库，然后按照官方给的例子即可实现。
可参看官方实现的小实例：【http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts】
绘制一个简单图表，实现后样式如下：
实现的代码可自己参看官方API去弄明白，这不是本篇文章的重点。事实上，这个例子中横坐标值，以及柱子高度值都是在代码中事先写好的：
3 如何在Echarts图表中动态显示数据
但是在实际项目中，横坐标以及柱状图柱值都是根据数据库中查询的数据的值而变化的。因此，如何在Echarts图中动态显示数据呢？
有两种思路：
1 获取数据库数据，将其传入后台，后台将数据转为JSON格式的数据 后再传给前端(Echarts中代码即为JSON格式的)，这样Echarts就可以直接使用这些JSON格式的数据显示数据库中对应的数据，从而可以达到动态显示的效果。
2 直接在前端页面中获取从后台查询到的数据库的值并且保存下来，然后直接在Echarts代码中去使用这些数据。(这样实现起来比较简单，不用写后台代码，容易实现，但前提是这些数据不用计算，是直接从数据库中查询得到的),可以使用jQuery去实现。
这样讲起来可能比较啰嗦，下面直接在代码中去稍微讲解下思路:
具体实现：
1 首先是在表格每一行加入class，这样就可以在jQuery中去获取表格的每行的数据并进行解析：
2 新建一个数组，将表格中每行对应的数据值存储到对应数组中：
3 在Echarts中即可直接使用上面数组中的值：
4 实现效果如下：
如上图，Echarts折线图中数据是按照下面表格中数据去动态显示的。至于饼图可能比较特殊一点，本篇不在此讨论。
--------------------------------------------------------------------------------------
实现过程中遇到的一个小问题：
当标签td下还有标签时如下：
这时在无法直接获取，要加上parseFloat清楚换行，并且最好加上值判断，即获取的值为0时就让它显示0，三目运算实现即可。
ehcartsRemainGoods.push(parseFloat($(this).find(".td-remainGoods").html())?parseFloat($(this).find(".td-remainGoods").html())
附上code:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
Created by IntelliJ IDEA.
User: wanggenshen_sx
Date: 2017/1/22
Time: 14:08
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>商品信息统计</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--折线图显示-->
<div class="box">
<div class="box-header">
[ --------图表显示-------------]
</div>
<div class="box-body">
<div id="echarts-line" style="height: 400px; width :800px;"></div>
</div>
</div>
<!--Table表格显示-->
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
[ --------商品信息统计-------------]
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table table-striped table-echarts" style="width: 800px">
<thread>
<tr>
<th>日期</th>
<th>商品剩余</th>
<th>商品一日留存率</th>
<th>商品一周留存率</th>
<th>商品一月日留存率</th>
</tr>
</thread>
<tbody>
<c:forEach var="info" items="${statisticsInfo}">
<tr>
<td class="td-date"><fmt:formatDate value="${info.date}" pattern="yyyy-MM-dd"/></td>
<td class="td-remainGoods">${info.remainGoods}</td>
<td class="td-d1Retention">${info.d1Retention}</td>
<td class="td-d7Retention">${info.d7Retention}</td>
<td class="td-d28Retention">${info.d28Retention}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var echartsDate = [];
var ehcartsRemainGoods= [];
var echartsD1Retention= [];
var echartsD7Retention= [];
var echartsD28Retention= [];
$(".table-echarts tbody tr").each(function () {
echartsDate.push($(this).find(".td-date").html());
ehcartsRemainGoods.push($(this).find(".td-remainGoods").html());
echartsD1Retention.push($(this).find(".td-d1Retention").html());
echartsD7Retention.push($(this).find(".td-d7Retention").html());
echartsD28Retention.push($(this).find(".td-d28Retention").html());
});
var lineEchart = echarts.init(document.getElementById('echarts-line'));
option = {
title: {
text: '商品信息统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['商品剩余','商品一日留存率','商品一周留存率','商品一月留存率']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data:echartsDate
},
yAxis: {
type: 'value'
},
series: [
{
name:'商品剩余',
type:'line',
stack: '总量',
data:ehcartsRemainGoods
},
{
name:'商品一日留存率',
type:'line',
stack: '总量',
data:echartsD1Retention
},
{
name:'商品一周留存率',
type:'line',
stack: '总量',
data:echartsD7Retention
},
{
name:'商品一月留存率',
type:'line',
stack: '总量',
data:echartsD28Retention
}
]
};
lineEchart.setOption(option);
})
</script>
</body>
</html>
源码见我的github：https://github.com/nomico271/Echarts_V_1.0
