前言

　　ECharts是百度一个使用 JavaScript 实现的开源可视化库，提供了创建多种多样的图标方式，包括坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。

　　ECharts用来做什么？

　　帮助我们简单实现数据可视化，以图表的方式呈现在页面中。

　　既然是基于JavaScript，首先我们要明确其前端定位，对于前端人员来说，应该算是提供了一种方便的插件供其选择，于后端人员来说，如果你的公司没有招前端人员（这种公司目前来看还有很多,Jsp+企业节源催生的毒瘤啊...），开发模式也不是目前流行的前后端分离，你是一脚踢的那种，而且项目需要用到很多前端图表展示数据，那么ECharts应该能帮助到你。（下面废话有点多，建议直接跳至正文）

　　本人为后端人员，但是w3cschool和JQuery等等手册还是翻阅过不少，基本上给个静态页面，边查边敲能够捣鼓出来，但是涉及到什么复杂动态交互，浏览器兼容就摊手了。说这些不是为了说自己一个后端还懂不少前端知识什么的，相反恰恰说明了很多时候，你的工作环境对自己的学习方向的引导。

　　举个例子，刚毕业不久，你应聘的是Java程序员----熟悉MySql数据库！熟悉Servlet/Jsp/熟悉SSH!熟悉...

　　面试官：索引是什么？熟悉存储过程吗？负载均衡怎么实现？会设计高并发解决方案吗？最后一个问题，前后端分离了解吗

　　你：（闷闷缩缩）不太了解。

　　面试官：公司没有前端，明天过来上班。

　　接下来的一段时间里，你可能会面对很多个jsp页面，在这个背景色，那个边框宽，这个移入移出，那个点击交互中，不断挣扎，又喘息着，配合这个产品原型不断的更迭，你开始怀疑人生。

　　过了一段时间，公司开始让你参与后端开发任务，数据库！Controller中CRUD一键到底!渐渐的你觉得自己已经是一个真正的Javer了，然而公司没有前端，你还是摆脱不了那些烦人的标签、样式以及该死的JavaScript。你觉得自己翅膀硬了，涨本事了，底气足了，辞职走人。

　　过了一段时间，也许你能通过你优异的面试表现，找到真正的前后端分离工作，专注于后端开发；同时也许你会通过同样优异的面试表现，找到真正的还是传统的一脚踢工作，但是薪资涨了不少。事实上，现在前后端分离被提及的越来越多，但是每个公司的开发模式会一样吗？公司的头是老板，懂技术的老板绝对有，但只是一部分，不懂技术的老板懂理财，花五千分别招一个前端和后端，和花七八千招一个全栈，老板会选谁？效率和管理那些不考虑。有的人坚定自己的方向，只做后台，前端看都不会看的，你跟我说加两三千块让我把前端也干了，不存在的。也有的人会愿意做，加两三千少了？加七八千，加一两万？都说不准，我之前也会觉得很容易做出选择，现在不以为然。佛系程序员，莫非于此也有渊源...只能说，每个人的生活处境不一样，抉择的考虑点也不尽相同吧。

　　其实我是很痛恨全栈这个词的，如果把全栈当做优势，感觉后台人员懂一点Html/CSS，能写两句JQuery就觉得自己是全栈了，现在想来很可笑。觉得自己什么都懂一点的人，和什么都不懂其实是差不多的。

　　前面提到了我不想用ECharts，缘由便是前面的偏执，觉得用了ECharts就干了前端的活，无法专注自己的方向一系列。但终究是用过，奈何还挺好用...所以想好好的总结一下使用过程。

　　ECharts光速上手

　　ECharts有不同的版本，接触过2.0系列,3.0系列（常用，本文也以其示例），目前2018年已经出到了最新的4.0后版本

　　进入3.0官网首页，可看到如下页面

　　箭头所指均为我们常用的注意点。

　　文档：相当于我们的查询手册，建议将其设为书签

　　下载：点击这里获取3.0系列下载包

　　实例和社区，那些官方示例等图表样式我们可以在这里查看获取自己想要的效果

　　2.0：可切换至2.0版本，其中也包含大量的示例。

　　上手步骤

　　 1.上面文档中有5分钟上手ECharts模块，如下图所示，可以快速对照练一遍

　　2.实际开发中，可能需要去示例和社区中寻找合适的图表来匹配需求，所以下面可以浏览实例和社区模块，以其中一个柱状图为例

　　3.点击进去可以看到如下视图，左边是源代码，右边是对应图标展示。

　　4.如果跟自己项目这方需求大致符合，又有想调整的地方，可以在左方代码区直接编辑，然后点击运行，右边图标随之会更新样式。这里用于学习，我们直接将左边以option=...开头一直到结尾的这段代码拷贝下来（最上面那句不用拷）。

　　5.新建一个Html或者Jsp页面。代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>echarts示例</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的div块 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

  </body>
</html>

　　上面的加粗部分代码即为我们刚刚从示例中拷贝过来的，如果前面有练手过5分钟上手ECharts官方教程时会发现，除了这部分代码，其他的都相同，所以我们大致也就明白这个路子了，我们需要改动的往往就是这个option部分，里面涉及到数据、样式等等。（另外上面注意JS的引用路径问题，要确保js被引入进来）

　　6.启动项目，访问到该页面，可看到如下效果。

　　这样我们就成功引入了ECharts。

　　进阶篇

　　当然这里说进阶是针对于后端仔的，如果按前端的水平来看，我们这样哪来进阶，顶多叫摸爬滚打...

　　上面学会ECharts的基础引入方式后，上面的部分还存在很多问题，小结如下：

　　1.上面的代码我会用了，但是例如那个option中的内容我并不明白含义，换个说法就是例如你让我把这个图表稍微调整一下（事实上开发过程中项目需求的图表极少会有实例完全匹配，大多需要自己二次修改），我不知道怎么调，因为里面这些参数的含义我都不知道，我怎么能相应的去赋值。

　　2.上面这种图表数据都是写死的，我怎么样动态的去传入数据，例如将数据库中数据获取到然后通过图表展示出来。

　　以上2种问题是很典型的会想到的，我在学习过程中也遇到过。

　　第1个问题，在前面的导航介绍中，特定指出了2.0版本的原因就在这里，我之前将3.0和2.0的文档都加入书签了，虽然我们用的3.0，但是就像我们查阅JDK手册一样，这里也有类似的手册，2.0的手册中对option中各个参数在各种图标中的含义都有解释，包括用法等等，如下所示

　　简单起见，如果短时间不想系统的学习一遍（本人就是），可以直接Ctrl+f，输入你要查询的参数去匹配，然后找到其含义解释和用法。如果这里没有找到你要查询的参数，那可能是涉及到3.0的新事物了，所以转向3.0的文档API和手册查询，基本都能查到相关信息。用过几种图表，查的多了，基本的一些参数你大概就熟悉了，data是数据总该明白，color颜色，name名字等等...不熟悉的再具体去查。慢慢的第一个问题你能解决了。

　　第2个问题，应该在解决第1个问题的同时甚至是之前要解决。下面就以获取上面柱状图为例，获取数据库中person表的人信息，人名中作为横坐标，年龄作为纵坐标，展示出来。

　　数据库数据如下图所示

　　一共就这6人，姓名和年龄信息在上面。

　　Web层以Spring MVC为例，代码片段如下

package com.mmm.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.mmm.pojo.Person;
import com.mmm.service.PersonService;

@Controller
@RequestMapping("demo")
public class DemoController {

    @Autowired
    PersonService personService;

    @RequestMapping(value="ec")
    public String ec(Model model) {
        List<Person> list = personService.selectAll();
        model.addAttribute("list", list);
        return "demo/ec";
    }
}

　　在上面的ec方法中，我们通过注入的Service层对象，查询并获取到了数据库中Person表的信息集合，并通过model属性传递到了前台，页面跳转至ec.jsp。

　　ec.jsp代码如下

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>echarts示例</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的div块 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [
                                <c:forEach var="i" begin="0" end="${list.size()-1}">
                                    '${list[i].name}',
                                </c:forEach>
                                ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[
                                <c:forEach var="i" begin="0" end="${list.size()-1}">
                                    '${list[i].age}',
                                </c:forEach>
                              ]
                    }
                ]
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

  </body>
</html>

　　el表达式中forEach遍历person集合list分别将姓名和年龄填充到横纵坐标的data数组中，实现动态数据可视化。启动项目，访问到该页面可以看到如下效果，即为成功。

　　另外如果不用Jsp，直接用Html，基于Ajax，获取json数据，然后在js中填充数组同样也是可以实现动态传值的。

　　小结

　　就目前项目中数据结构而言，对象关系图、环形统计图、柱状图等等都是应用很广泛的图表，ECharts实例以及社区的案例也比较丰富，基本能够满足项目的需要，花一天不到的时间"掌握"一项数据可视化技术，这波应该不亏吧?

为什么我不愿意用ECharts的更多相关文章

  1. 一起来玩echarts系列（一）------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  4. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  5. 数据图表插件Echarts（一）

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  6. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  7. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  8. ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）

    一.背景:      我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/      我们知 ...

  9. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  10. ECharts的简单使用过程

    网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...

随机推荐

  1. ASP.NET MVC 5使用Swagger生成API文档

    一.安装 新建一个没有身份验证的mvc项目 - SwaggerMvc5Demo,然后添加一个名为Remote(自定义)且包含基础读写(不想手写)的ApiController   开源地址:https: ...

  2. vue2 computed set与get函数

    大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法: setter:设置值时触发. getter:获取值时触发,与setter是没有必然联系的. <templ ...

  3. Vue 组件（component）之 精美的日历

    公司的要求,需要开发一个精美的日历组件(IOS , 安卓, PC 的IE9+都能运行),写完后想把它分享出来,希望大家批评(). 先来个截图 代码已经分享到 https://github.com/zh ...

  4. 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  5. python键盘读入的input方法

    今天了解了一下python,学了一些小东西,便存下了: input函数(raw_input在3.0版本没有,所以就不说了!) num = input ("输入一个数:")  |备注 ...

  6. 适合在Markdown里面使用的emoji

    因为Markdown里面加颜色需要写html style, 所以对于一些标题, 还是用一下emoji吧: RED APPLE (

  7. js获取指定时间的前几秒

    最近项目上有一个需求是:根据一张图片的拍摄时间获取到这个时间前二后三的一个五秒钟的视频信息,通过查找相关资料写了一个方法拿来记录分享一下. //指定时间减2秒function reduceTwoS(d ...

  8. 使用CJSON库实现XML与JSON格式的相互转化

    之前完成了一个两个平台对接的项目.由于这两个平台一个是使用json格式的数据,一个是使用xml格式的数据,要实现它们二者的对接就涉及到这两个数据格式的转化,在查阅相关资料的时候发现了这个CJSON库, ...

  9. replace into 浅析之一

    一 介绍  在笔者支持业务过程中,经常遇到开发咨询replace into 的使用场景以及注意事项,这里做个总结.从功能原理,性能和注意事项上做个说明.二 原理2.1 当表中存在主键但是不存在唯一建的 ...

  10. Java之CountDownLatch ---控制线程执行顺序

    一,类介绍 这是java.util.concurrent包里的一个同步辅助类,它有两个主要的常用方法  countDown()方法以及await()方法.在完成一组正在其他线程中执行的操作之前,它允许 ...