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. 1、Android项目框架搭建 （分析需求、整理资料）

    闲来无事.想搭个框架试试 分析一般应用 将资料整理整理 粗略统计 须要下面资料 1.android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.Vi ...

  2. 80端口被system进程占用解决方法

    今天启动Apache的时候老是提示失败,很简单,使用 netstat -ano 发现80端口被占用.如图所示: 按照PID 来说:在任务管理器中查看PID 的进程名 既然是system.那么 应该不回 ...

  3. linux上虚拟显示器和火狐浏览器的使用学习记录

    Ubuntu 14.04 sudo apt-get firefox sudo apt-get install python-pip sudo apt-get install xvfb# xserver ...

  4. pl/sql中的record用法

    create or replace procedure pro1(v_in_empno in number) is --定义一个记录数据类型 type my_emp_record is record( ...

  5. RHEL7.1 安装openstack juno 一个BUG

    错误提示: -- :: ERROR nova.compute.manager [-] [instance: 887e5e40-ebd8--b2f7-afa2a37bdef8] Instance fai ...

  6. B11:解释器模式 Iterpreter

    给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. UML: 示例代码: abstract class Expression { abstract pub ...

  7. 对象内部属性[[Class]]

    1.概述 所有的typeof返回值为‘object’的对象都包含一个内部属性[[Class]],我们将它可以看做内部的分类,而非传统面向对象意义的分类.这个属性无法直接访问,一般通过Object.pr ...

  8. 【UVA】11468-Substring（AC自己主动机）

    AC自己主动机的题,须要注意的,建立失配边的时候,假设结点1失配边连到的那个结点2,那个结点2是一个单词的结尾,那么这个结点1也须要标记成1(由于能够看成,这个结点包括了这个单词),之后在Trie树上 ...

  9. Cocos2dx 3.6源代码编译错误：syntax error : missing &#39;)&#39; before &#39;{&#39;

    在编译Cocos2dx 3.6版本号时.发现编译错误: 定位代码行: debugForNormalSprite->drawPoints(positions, 4, 8, Color4F{0.0, ...

  10. 一个简单的MariaDB认证插件demo

    代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...