现在位置首页 / Jquery/Jquery Mobile /正文

ECharts使用有什么问题吗?

作者: IT小兵 | 2018年1月30日| 热度:℃ | 评论: |参与:

 前言

  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实例以及社区的案例也比较丰富,基本能够满足项目的需要,花一天不到的时间"掌握"一项数据可视化技术,这波应该不亏吧?


点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询