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

２．在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. 剖析Disruptor:为什么会这么快？（二）神奇的缓存行填充

    原文链接:http://mechanitis.blogspot.com/2011/07/dissecting-disruptor-why-its-so-fast_22.html 需FQ 计算机入门   ...

  2. 【LeetCode】16. 3Sum Closest

    题目: Given an array S of n integers, find three integers in S such that the sum is closest to a given ...

  3. 洛谷P2735 电网 Electric Fences

    P2735 电网 Electric Fences 11通过 28提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 在本题中,格点是 ...

  4. 采用FLAG_ACTIVITY_CLEAR_TOP退出 多activity 或 整个程序

    问题: 多activity中退出整个程序,例如从A->B->C->D,这时我需要从D直接退出程序. 网上资料:{ finish()和system(0)都只能退出单个activity. ...

  5. SQL常用日期转换

    0   或   100   (*)     默认值   mon   dd   yyyy   hh:miAM(或   PM)       1   101   美国   mm/dd/yyyy       ...

  6. 【spring 4】AOP：动态代理

    一.动态代理简介 动态代理与普通代理相比较,最大的好处是接口中声明的所有方法都被转移到一个集中的方法中处理(invoke),这样,在接口方法数量比较多的时候,我们可以进行灵活处理,而不需要像静态代理那 ...

  7. DataGridview焦点不移开不保存数据问题

    this.datagridLeft.ClearSelection();                this.datagridLeft.Refresh();                this. ...

  8. JS基础学习1——什么是基础js类和原型？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. winform 打包部署

    1.使用VS 自带的打包工具,制作winform安装项目 开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 步骤: 第一步:打开开发环境VS2008,新建项目,选 ...

  10. 学习实践：使用模式，原则实现一个C++自动化测试程序

    个人编程中比较喜欢重构,重构能够提高自己的代码质量,使代码阅读起来也更清晰.但是重构有一个问题,就是如何保证重构后带代码实现的功能与重构前的一致,如果每次重构完成后,对此不闻不问,则会有极大的风险,如 ...