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. mysql left join,right join,inner join的区别

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录 inner join(等值连接) ...

  2. unity 部分obj不接受后处理

    考虑了很多方案,比如渲染次序和mask(stencilebuffer) 渲染次序 sorting order(深度) renderer都有的属性能开放出来,sprite renderer原本就开放在i ...

  3. Difference between val() and text()

    .val() works on input elements (or any element with a value attribute?) and .text() will not work on ...

  4. maven的安装和eclipse的配置以及构建mahout基本项目

    maven介绍在此略过 下载地址: 点击打开链接 windows下载xxx-bin.zip文件 linux下载xxx-bin.tar.gz 这里以windows为例 下载完成直接解压到一个目录下 计算 ...

  5. JAVA实现https单向认证

    //关于http 须要两个jar包 httpclient-4.0.jar httpcore-4.0.1.jar private static final HttpClient httpClient = ...

  6. 爪哇国新游记之二十九----访问URL获取输入流

    代码: import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileWriter; import ...

  7. socket websocket

    1.websocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...

  8. QtAndroid具体解释(6)：集成信鸽推送

    推送是我们开发移动应用经经常使用到的功能,Qt on Android 应用也会用到,之前也有朋友问过,这次我们来看看怎么在 Qt on Android 应用中来集成来自腾讯的信鸽推送. 有关信鸽的 S ...

  9. C#绑定事件时使用匿名函数

    当使用一些临时的函数 可以预知这些函数基本不会被复用时  可以使用匿名函数简化代码 public static void startCoupons() { //绑定一些事件 userGetCoupon ...

  10. EF中多表公共字段，以及设置EntityBase使所有实体类继承自定义类

    使用EF框架访问数据库时,如果某些表具有公共字段,例如在审核流程中,对于各类申请单资料的创建人.创建时间.修改人.修改时间,这些可能多表都需要的字段,如果在每个实体中进行赋值操作显然是类似和重复的,下 ...