Echarts图表中动态数据显示

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())

									:0);

附上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" %>


    
    
    
    



    
    

        

           [ --------图表显示-------------]
        
        

            

        
    

    
    

        


            

                

                    [ --------商品信息统计-------------]
                
                

                    

                        
                                
                                

                            

                                    
日期
                                    
商品剩余
                                    
商品一日留存率
                                    
商品一周留存率
                                    
商品一月日留存率
                                
                            
                            

                            

                                    

                                    
${info.remainGoods}
                                    
${info.d1Retention}
                                    
${info.d7Retention}
                                    
${info.d28Retention}
                                
                            
                            

                        

                    
                
            
        
    

    

源码见我的github：https://github.com/nomico271/Echarts_V_1.0