为什么我不愿意用ECharts
前言
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的更多相关文章
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
- ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...
随机推荐
- Ubuntu16.04 IDE: 用Vim逐步打造一个IDE
目前打造完成的IDE主要有: terminator+Bundle+NERDtree+YCF(youcompleteme)+UltiSnips+新创建文件自动补充注释和作者,版权信息等 1,当任务比较多 ...
- Mongodb常规操作【一】
Mongodb是一种比较常见的NOSQL数据库,数据库排名第四,今天介绍一下Net Core 下,常规操作. 首先下C# 版的驱动程序 "MongoDB.Driver",相关依赖包 ...
- [Spark内核] 第32课：Spark Worker原理和源码剖析解密：Worker工作流程图、Worker启动Driver源码解密、Worker启动Executor源码解密等
本課主題 Spark Worker 原理 Worker 启动 Driver 源码鉴赏 Worker 启动 Executor 源码鉴赏 Worker 与 Master 的交互关系 [引言部份:你希望读者 ...
- 【转载】Linux下的IO监控与分析
近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performance and Tuning G ...
- .NET HttpClient的缺陷
using (HttpClient client = new HttpClient()){} 每次发起http请求每次new httpClient,它会打开许多套接字,比你实际的需求多许多,这极大地增 ...
- rjs 合并压缩完 js 后 js 不压缩的问题
线下用 requirejs 开发完后,代码上线前要用 rjs 将多个有依赖关系的 js 文件压成一个,然后某天居然发现压成一个的 js 文件,没有压缩!!!几万行的 js!!! 很显然,是 uglif ...
- 利用java的反射，实现工厂创建对象
public static Object getInstance(Class c){ Object obj = null; try { obj = c.newInstance(); } catch ( ...
- 关于ODP.NET连接数监控及相应的windbg分析提示
1.关于ODP.NET的Windows计数器问题 使用微软的缺省驱动时,可以通过windows性能监视器很方便的监控数据库连接数,选择.NET Data Provider for Oracle/Sql ...
- java_web学习(七) MySQL的配置与安装
一:下载MySQL 1.进入oracle官网 2. 3. 4. 5. 6. 7. 网址:https://dev.mysql.com/downloads/file/?id=469273 二:配置MySQ ...
- InnoDB一棵B+树可以存放多少行数据？
一个问题? InnoDB一棵B+树可以存放多少行数据?这个问题的简单回答是:约2千万.为什么是这么多呢?因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. 我 ...