一、简介

　　　　大数据时代，重新定义图表的时候到了，所以随之ECharts就随之出现了。

　　　　ECharts（Enterprise Charts 商业产品图表库） 是基于Canvas的，纯Javascript 的图表库，提供直观，生动，可交互，可个性化定制的

　　　数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

　　      ECharts 是指 Enterprise Charts（商业产品图表库），提供商业产品常用图表库，底层基于 ZRender，创建了坐标系，图例，提示，工

　　　具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局

　　　图，同时支持任意维度的堆积和多图表混合展现。

二、简单的例子介入学习

　　需要导入jar

　　学习方法：http://echarts.baidu.com/官网

　　柱状图页面展示

三、如上图所示简单的jsp页面访问（根据帮助文档查看属性）-----需要一个ehcache-1.2.3.jar

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>柱状图</title>

<!-- 引入echarts.js -->

<script type="text/javascript" src="<%=path%>/js/echarts.js"></script>

</head>

<body>

    <!--为ECharts准备一个具有大小的Dom-->

    <div id="main" style="width: 900px;height: 600px"></div>

</body>

<script type="text/javascript">

    //基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById("main"));

    var option = {

        //标题组件

        title : {

            text : '公司的星期销量图',

            subtext : '纯属虚构',

            left : 'left',

            textStyle : {

                fontSize : 20

            },

        },

        //图例

        legend : {

            data : [ '销量' ]

        },

        //颜色

        color : [ 'red' ],

        //提示框组件

        tooltip : {

            trigger : 'axis',

            axisPointer : { // 坐标轴指示器，坐标轴触发有效

                type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'|'cross'

            }

        },

        //工具栏

        toolbox : {

            show : true,//是否显示

            feature : {

                //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。

                dataView : {

                    show : true,

                    readOnly : false

                },

                //动态类型切换

                magicType : {

                    show : true,

                    type : [ 'pie', 'bar' ]

                },

                dataZoom:

                {

                 show:true

                },

                //配置项还原

                restore : {

                    show : true

                },

                //保存为图片

                saveAsImage : {

                    show : true

                }

            }

        },

        //x轴

        xAxis : [ {

            position : 'bottom',//x 轴的位置。可选：'top','bottom'

            type : 'category',

            data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],

            axisTick : {

                alignWithLabel : true

            }

        } ],

        //y轴

        yAxis : [ {

            type : 'value'

        } ],

        //系列列表

        series : [ {

            name : '销量',

            type : 'bar',

            barWidth : '60%',

            data : [ 10, 52, 200, 334, 390, 330, 220 ],

            //图表标注

            markPoint : {

                data : [ {

                    type : 'max',

                    name : '最大值'

                }, {

                    type : 'min',

                    name : '最小值'

                } ]

            },

            //图表标线

            markLine : {

                data : [ {

                    type : 'average',

                    name : '平均值'

                } ]

            }

        }, {

            name : '产量',

            type : 'line',

            data : [ 50, 55, 200, 340, 390, 400, 220 ]

        } ],

    };

    //使用个刚指定的配置项和数据显示图表

    myChart.setOption(option);

</script>

</html>

剩下的可以在帮助文档的视图展示找自己需要的代码

ECharts（Enterprise Charts 商业产品图表库）初识的更多相关文章

  1. ECharts一个强大的商业产品图表库

    Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...

  2. 百度Echarts-免费的商业产品图表库

    官方网站:http://echarts.baidu.com/ 民间网站:http://fansunion.cn/echarts/ 下载地址:https://codeload.github.com/ec ...

  3. ECharts JavaScript图表库 ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  4. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  5. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

  6. ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  7. 三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

    最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性. ...

  8. 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  9. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

随机推荐

  1. 在SqlServer2008R2中，根据分隔符把一列的值切割成多列

    近期工作中,有个如上图效果的需求:将一个字段里面的值,以“,"切割成多列 通过思考.搜索,在网上找到了博主Microshaoft的文章: 妙用 T-SQL: PARSENAME 函数 (也可 ...

  2. 解决vue与传统jquery插件冲突

    比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...

  3. iOS开发——高级技术&本地化与国际化详解

    本地化与国际化详解 效果如下:   英语:                                                                    中文: 具体实现如下: ...

  4. iOS开发--应用崩溃日志揭秘（二）

    场景 4: 吃棒棒糖时闪退! 用户邮件说, “当rage master吃棒棒糖时应用就闪退…” 另一用户说, “我让rage master 吃棒棒糖,没几次应用就闪退了!”崩溃日志如下: Incide ...

  5. The Installation and Compilation of OpenCASCADE

    OpenCASCADE的编译 The Installation and Compilation of OpenCASCADE eryar@163.com 一. 安装OpenCASCADE 可以从Ope ...

  6. Spring(二)scope、集合注入、自动装配、生命周期

    原文链接:http://www.orlion.ga/189/ 一.scope bean的scope属性中常用的有两种:singleton(单例,默认)和prototype(原型,每次创建新对象) 例: ...

  7. MVC4做网站六后台管理:6.2网站信息设置

    用来实现网站标题.名称.关键字.描述.版权等信息的设置. 模型字段: 网站的设置信息前后台都要用到,所以要把模型方式Ninesky/Models文件夹中,代码如下: ///////////////// ...

  8. 窥探Swift之新添数据类型元组与可选值

    今天的博客中就总结一下关于Swift中相对Objc新添加的两个数据类型:元组(Tuple)和可选值类型(Optional).上面这两个类型是Swift独有的类型,使用起来也是非常方便的,今天就通过一些 ...

  9. 你所不知道的15个Axure使用技巧

    你有用原型开发工具吗?如果有,那你用的是Axure还是别的? 从以前就喜欢使用Axure,主要是觉得它能清楚的表达设计的思路,还有交互的真实再现,能让看的人一目了然,昨天看了这篇博文,便更加确定Axu ...

  10. 怎样录制屏幕并将结果保存为Gif

    怎样录制屏幕 并将结果保存为GIF 大前天写文章,需要把PPT的翻转页面截成动态图.我一开始就想到保存文件肯定是GIF.但是如何生成呢?素材又从哪里来?以前自己感兴趣做过把一组连拍的图片做成动态图,再 ...