ECharts。纯Javascript图表库，基于Canvas，底层依赖ZRender。商业产品经常使用图表库，提供直观，生动。可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同一时候支持随意维度的堆积和多图表混合展现。

一、搭建好开发环境：

1、进入echarts的官网，下载echarts-master的压缩包，解压，点击进入index.xml。

2、选择顶部的API&Doc，打开附录。

3、MyEclipse中建立一个项目。建立两个目录（echarts,zrender）

4、将解压包下的src下的全部复制到echarts下。

5、按顺序导入4个js文件：

doc\asset\js\ jquery.js  、doc\asset\js\bootstrap.js  、doc\asset\js\esl\esl.js 、doc\asset\js\esl\js.js

代码实现：

<script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript" src="js/bootstrap.js"></script>

	<script type="text/javascript" src="js/esl.js"></script>

  <script type="text/javascript">

		function init() {

			// 初始化载入支持js文件包的。

require.config({

	            paths: {

	                'js': 'js/js'

	            },

	            packages: [

	                {

	                    name: 'echarts',

	                    location: 'echarts',

	                    main: 'echarts'

	                },

	                {

	                    name: 'zrender',

	                    location: 'zrender',

	                    main: 'zrender'

	                }

	            ]

	        });

		//初始化数据

 		var option = {

 			//工具提示

    		tooltip : {

                trigger: 'axis'

            },

            //图例

            legend: {

                data:['蒸发量','降水量']

            },

            //工具箱

            toolbox: {

            	//使用工具箱

                show : true,

                //工具箱中包括的功能

                feature : {

                	//是否增加标记

                    mark : true,

                    //能否够改变数据，从而动态改变图

                    dataView : {readOnly: false},

                    //能否够在线性柱状图之间切换

                    magicType:['line', 'bar'],

                    restore : true

                }

            },

            //是否同意拖拽

            calculable : true,

            //增加横轴的内容

            xAxis : [

                {

                    type : 'category',

                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

                }

            ],

            //增加纵轴的内容

            yAxis : [

                {

                    type : 'value',

                    splitArea : {show : true}

                }

            ],

            //详细数据

            series : [

                {

                    name:'蒸发量',

                    type:'bar',

                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

                },

                {

                    name:'降水量',

                    type:'bar',

                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

                }

            ]

        };

        require(

            [

                'echarts',

                'echarts/chart/line',

                'echarts/chart/bar',

            ],

            function(ec) {

                var myChart = ec.init(document.getElementById('mydiv'));

                myChart.setOption(option);

            }

        )

        }

	</script>

  </head>

  <body onload="init();">

    <div id="mydiv" style="width:1000px;height:600px;"></div>

  </body>

ECharts：企业报表工具的更多相关文章

  1. 企业为什么需要BI报表工具？

    企业一旦成规模运作起来,数据量是数以万计的,无论数据还是报表都需要协同管理不断更新.面对各大OA\ERP\CRM系统的数据,传统用Excel处理数据效率是很低下的.要想快速出报表,快速取数,快速做业务 ...

  2. 能无缝嵌入Excel的报表工具，报表轻松做！

    现在很多人做数据分析会被推荐选择去用编程R和Python.PowerBI.Tableau.Qlik.Smartbi... 从目前数据分析的行业来说,Excel是世界上使用人数最多的报表分析工具,没有之 ...

  3. 作为报表工具，Excel移动报表的优势和劣势

    Excel是应用最广泛的报表工具,它集数据存储.数据处理.数据分析于一身,广泛应用于各行各业的日常工作中(无论这个企业的信息化程度有多高.多低).而且随着Office365的普及,软件License的 ...

  4. 设计与开发一款简单易用的Web报表工具（支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  5. 国内BI工具/报表工具厂商简介

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  6. 报表工具ActiveReports开发实例——物联网智能供水云平台

    一.公司简介 山西汾西电子科技股份有限公司(以下简称:汾西电子)是经中国船舶重工集团批准,在原汾西重工电子科技公司基础上重组的专业从事智能电能表.水表.热量表及电动汽车充电设备研发生产的高科技公司. ...

  7. 【案例分享】使用ActiveReports报表工具，在.NET MVC模式下动态创建报表

    提起报表,大家会觉得即熟悉又陌生,好像常常在工作中使用,又似乎无法准确描述报表.今天我们来一起了解一下什么是报表,报表的结构.构成元素,以及为什么需要报表. 什么是报表 简单的说:报表就是通过表格.图 ...

  8. 国内专业web报表工具，完美解决中国式报表难题

    近几年报表工具的热度不断上升,很多企业都用上了全新的报表工具,主要是企业数据化转型已经成为趋势.在进行选型的时候,很多企业最好都选择国内的报表工具,相信一些人不知道为什么国内的报表工具表现比国外的好. ...

  9. 开源报表工具太复杂？不如用这款免费web报表工具

    随着信息系统的高速发展,报表平台逐渐成为了信息系统当中最为核心和重要的功能模块.报表工具有助于将原始数据可视化显示,使决策者或者相关人员能够一览整体的数据趋势,完整的报表解决方案会提供多样的表格数据展 ...

随机推荐

  1. 基于jquery类库的绘制二维码的插件jquery.qrcode.js

     jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...

  2. LINUX 和WINDOWS下的自动登录小脚本

    每天上班第一件事,就是连接公司LAB里面的机器,但首先要过一个防火墙,每次输用户名密码是很累人的事, 以下是两个脚本,可以放在启动项中,开机便自动登录 WINDOWS: @echo off ipcon ...

  3. POJ3264 Balanced Lineup 【线段树】+【单点更新】

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 32778   Accepted: 15425 ...

  4. 【DP】UVA 624 CD 记录路径

    开一个数组p 若dp[i-1][j]<dp[i-1][j-a[i]]+a[i]时就记录下p[j]=a[i];表示此时放进一个轨道 递归输出p #include <stdio.h> # ...

  5. 【转】Spring Annotation 详解

    (1) .<context:component-scan base-package="*.*" /> 该配置隐式注册了多个对注解进行解析的处理器,如: Autowire ...

  6. c# 用OpenXmL读取.xlsx格式的Excel文件 返回DataTable

    1.须要引用的dll :  DocumentFormat.OpenXml.dll  ---须要安装一下OpenXml再引用 WindowsBase  ---直接在项目里加入引用 2.方法: /// & ...

  7. LoadRunner测试WebService的3种方式

    LR在WebService虚拟用户协议中支持两种方式测试WebService,一种是通过“Add Service Call”的方式,一种是Import SOAP的方式. Import SOAP的方式需 ...

  8. centos下hadoop的安装

        hadoop的安装不难,可是须要做不少的准备工作. 一.JDK 须要先安装jdk.centos下能够直接通过yum install java-1.6.0-openjdk来安装.不同公布版的安装 ...

  9. hadoop english

    for the same 同样previously 之前地overlay v. 覆盖; 镀金variable expansion 变量替换processed for 处理 entry(entries) ...

  10. 远程调用——hessian使用入门

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...