为什么我不愿意用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实例以及社区的案例也比较丰富，基本能够满足项目的需要，花一天不到的时间"掌握"一项数据可视化技术，这波应该不亏吧?
最新文章
- spring <context:component-scan>使用说明(转)
- 如何区分SNAT和DNAT
- Java学习随笔5：Java多线程编程
- 黑客长期摇号不中"黑"掉北京小客车摇号网
- 手把手教你使用Size Class
- 跟我学android-android常用布局介绍
- LINUX编程学习笔记(十三) 遍历目录的两种方法
- 使用CSS如何悬停背景颜色变色 onmouseover、onmouseout
- bzoj3223Tyvj 1729 文艺平衡树 splay
- iOS 打包.framework(包括第三方、图片、xib、plist文件)详细步骤及需要注意的地方
- 2：Python字符串与数字
- UVA1471-Copying Books（二分答案）
- @Autowired 与@Resource的区别（详细）
- vue的组件基础
- day16:内置函数二
- Youtube-dl 配置 使用方法 + 配合aria2 多线程 下载 + 配合 ffmpeg 自动合并分段视频
- Swing使用Substance外观包异常问题
- git for c#,文件改动内容
- 我的Java学习笔记-Java面向对象
- Object Slicing in C++