１．下载前段框架并放入项目中去．

２．在js中调用

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>ECharts</title>

</head>

<body>

	<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->

	<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->

	<div id="main"

		style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>

	<div id="mainMap"

		style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>

	<!--Step:2 Import echarts.js-->

	<!--Step:2 引入echarts.js-->

	<script src="${base.contextPath}/js/echarts.js"></script>

	<script type="text/javascript"

		src="${base.contextPath}/js/jquery-1.6.2.min.js"></script>

	<script type="text/javascript">

		// Step:3 conifg ECharts's path, link to echarts.js from current page.

		// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径

		require.config({

			paths : {

				echarts : '${base.contextPath}/js'

			}

		});

		// Step:4 require echarts and use it in the callback.

		// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

		$(document).ready(

				function() {

					$.ajax({

						url : "${base.contextPath}/total/data?type=1",

						type : 'get',

						contentType : "application/json",

						cache : false,

						success : function(text) {

							var data = text;

							bar(data);

						},

						error : function(jqXHR, textStatus, errorThrown) {

							btnSave.setEnabled(true);

							if (400 == jqXHR.status || 403 == jqXHR.status

									|| 500 == jqXHR.status)

								return;

							var text = "操作失败，" + jqXHR.responseText;

							mini.alert(text);

						}

					});

				});

		// bar(null);

		function bar(data) {

			var sData = new Array();

			var sX = new Array();

			for (i = 0; i < data.length; i++) {

				sData[i] = data[i].total;

				sX[i] = data[i].brand;

			}

			require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',

			//'echarts/chart/map'

			], function(ec) {

				//--- 折柱 ---

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

				myChart.setOption({

					tooltip : {

						trigger : 'axis'

					},

					legend : {

						data : [ '总数' ]

					},

					toolbox : {

						show : true,

						feature : {

							mark : {

								show : true

							},

							dataView : {

								show : true,

								readOnly : false

							},

							magicType : {

								show : true,

								type : [ 'line', 'bar' ]

							},

							restore : {

								show : true

							},

							saveAsImage : {

								show : true

							}

						}

					},

					calculable : true,

					xAxis : [ {

						type : 'category',

						data : sX

					} ],

					yAxis : [ {

						type : 'value',

						splitArea : {

							show : true

						}

					} ],

					series : [ {

						name : '总数',

						type : 'bar',

						data : sData

					},

					/*  {

					     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]

					 } */

					]

				});

			});

		}

	</script>

</body>

</html>

　　

EChart 关于图标控件的简单实用的更多相关文章

  1. js jsp 时间 日期 控件 插件 简单 实用

    js时间控件一般都是找网上的用,这东西平常很少涉及到,一用到找起来却烦死人,不是没用就是太复杂,今天向大家推荐一个简单实用的控件,该控件在不断更新,而且有专门的网站对它进行维护,所以值得一看. 先说它 ...

  2. asp.net ListView控件的简单实用和配置

    1 web窗体界面代码 ItemType:控件要绑定的实体模型 SelectMethod:控件获取实体集合的后台方法 DataKeyNames:实体的主键 UpdateProduct:设置跟新的方法 ...

  3. WebBrowser控件的简单应用2

    原文:WebBrowser控件的简单应用2 第一个简单应用里面讲述的是如何模拟调用当前网页的元素的事件或者赋值/取值.这次的应用讲述的是1:如何处理弹出新页面的事件(总是在我的浏览器里面现实新页面)2 ...

  4. vs2005中的WebBrowser控件的简单应用

    原文:vs2005中的WebBrowser控件的简单应用 这个控件被封装了一下,和以前的调用方式稍有不同.事件还是那几个,变化不大.方法变了不少.从网上能查到的资料不多,贴出一些代码来作参考.看看这段 ...

  5. WPF开发随笔收录-自定义图标控件

    一.前言 1.在以前自学的过程中,软件需要使用到图标的时候,总是第一个想法是下载一个图片来充当图标使用,但实际得出来的效果会出现模糊的现象.后来网上学习了字体图标库的用法,可以在阿里云矢量图网站那里将 ...

  6. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  7. 关于微软C#中的CHART图表控件的简单使用【转】

    最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...

  8. 关于微软C#中的CHART图表控件的简单使用

    最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...

  9. ios UI控件的简单整理

    把该文件拷贝到.m文件中就能够方便的查找 /** 匿名类目:能够声明方法和变量,属性为private(不同意在外部调用,且不能被继承 */ /** 发送数据的托付方,接收数据的时代理发(即代理的反向传 ...

随机推荐

  1. .net重启iis线程池和iis站点程序代码【转】

    转:http://www.jb51.net/article/44162.htm 重启站点: 复制代码代码如下:  /// <summary>        /// 根据名字重启站点.(没重 ...

  2. .NET的三种缓存(页面缓存，控件缓存，自定义缓存)

    BLL.Area bll = new BLL.Area(); protected void Page_Load(object sender, EventArgs e) { if (Cache[&quo ...

  3. oracle学习系列之三 （约束）

    主键约束:外键约束:唯一性约束:检查约束:默认值约束 -——————五大约束 一. 主键约束: --创建表的主键约束  create table student (student_id number ...

  4. android Tab =viewpager+fragmnet

    1.定义几个fragment 的subclass 如fragmentone,fragmenttwo; public class fragmentthree extends Fragment { pri ...

  5. swat主流域文件(file.cio）参数详解——引自http://blog.sciencenet.cn/blog-922140-710636.html

    % file.clo,即主流域文件用于文件管理,包括与模型选项.气候输入.数据库和输出控制相关的信息. Master Watershed File: file.cio Project Descript ...

  6. 【Linux】inode_针对MySQL读写操作在系统层的进一步学习【转】

    转自http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘 ...

  7. linux设备分类

    网络设备:常见的有以太网卡.CAN总线.WIFI.蓝牙 重要的结构体: net_device:用于描述网络设备的属性,为上层提供一个统一的操作接口.网络设备的驱动实际上就是填充此结构体,实现其中的各种 ...

  8. c++ boost--------------boost::progress_timer小试。

    //--------------------------------------------------------------------------- #include <vcl.h> ...

  9. nginx之keepalive

    一:设置 keepalive_timeout  0; 发curl: [xxx ~]$ curl -H "Keep-Alive: 60" -H "Connection: k ...

  10. 用AsyncTask 来实现下载图片在android开发中

    Android使用AsyncTask 有如下好处: 1. 线程的开销较大,如果每个任务都要创建一个线程,那么应用程序的效率要低很多: 2. 线程无法管理,匿名线程创建并启动后就不受程序的控制了,如果有 ...