为什么我不愿意用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 ...
随机推荐
- 关于 python 新式类和旧式类继承顺序的验证
参考:http://www.cnblogs.com/blackmatrix/p/5630515.html 官方:https://docs.python.org/2/tutorial/classes.h ...
- python 模块：xlrd && xlwt
主要来自:http://www.jb51.net/article/60510.htm python读excel--xlrd 这个过程有几个比较麻烦的问题,比如读取日期.读合并单元格内容.下面先看看基本 ...
- Qt实现QQ界面
1.Qt实现QQ界面是通过QToolBox类来实现的,基本结构是:QToolBox里面装QGroupBox,然后QGroupBox里面装QToolButton,设置好相关属性即可 2.定义类继承QTo ...
- js的onscroll、scrollTop、scrollHeight及window.scroll等方法
onscroll 解释:当元素的滚动条滚动时触发的事件. onscroll事件貌似任何实体元素都可以绑定,这里的实体元素包括DOM元素.window元素.document元素. 用法即:element ...
- vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法
如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...
- js 拼接table 的方法
<html> <head> <title>test page</title> <script type='text/javascript'> ...
- eslint 的基本配置介绍
eslint 这个代码规则,是在用webpack +vue-cli这个脚手架时候接触的,默认的规则可能不太习惯我们日常平时的代码开发,需要对这个规则稍加改造. 下面的是 eslintrc.js的基本规 ...
- 第一个程序python.py
print("hello word")print("hello hello")print("hello hello")print(" ...
- Java中的集合框架（中）
Map和HashMap Map接口 1.Map提供了一种映射关系,其中的元素是以键值对(key-value)的形式存储的,能够实现根据key快速查找value 2.Map中的键值对以Entry类型的对 ...
- ascii、unicode、utf-8、gbk区别及转换
一.编码 ascii: A:00000010 8位 一个字节 unicode: A:00000000 00000001 00000010 00000100 32位 四个字节 中:00000000 00 ...