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

２．在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. 翻译：wiki中的business logic词条

    Business logic 业务逻辑 From Wikipedia, the free encyclopedia 来自Wikipedia,自由的百科全书 In computer software, ...

  2. 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  3. OpenStack-Mitaka 一键安装测试环境脚本

    说明:这个脚本是采用Bash Shell编写,这个版本还只能作为测试环境搭建使用. 此脚本原形的发起人是网友:WuYuLiang.这里有他的博客链接:   第一版的链接: http://blog.cs ...

  4. 【转】最实用的IT类网站及工具大集合

    转自:http://www.cnblogs.com/annie00/p/5753507.html 1.聚合数据 大家在开发过程中,可能会用到各种各样的数据,想找一些接口来提供一些数据.比如天气预报查询 ...

  5. 【Hibernate 8】Hibernate的调优方法：抓取策略

    在上一篇博客中,介绍了Hibernate的缓存机制.合理的配置缓存,可以极大程度上优化Hibernate的性能.这篇博客,介绍另外一个调优方式:抓取策略. 一.什么是抓取策略 抓取策略(fetchin ...

  6. 【EF 2】浅谈ADO数据模型生成串（二）：数据库连接串分析

    导读:上篇博客中介绍了ADO生成串的前一部分,本篇博客结合报错,接着介绍剩下的部分. 一.代码展示 <span style="font-family:KaiTi_GB2312;font ...

  7. 入门学习PHP之变量_1

    1.函数里只能访问局部变量,不能访问全局变量,如果函数里需要访问全局变量则需要在变量前加global作用域,如下实例: <?php $x=5; $y=10; function myTest() ...

  8. js 获取当前日期时间 格式为 yyyy-mm-dd hh:MM:ss

    ------------------------------------------------------------------------------------ js 获取当前日期时间 格式为 ...

  9. SQL Server 索引和视图

    Ø 索引 1. 什么是索引 索引就是数据表中数据和相应的存储位置的列表,利用索引可以提高在表或视图中的查找数据的速度. 2. 索引分类 数据库中索引主要分为两类:聚集索引和非聚集索引.SQL Serv ...

  10. git备忘（长久更新）

    一直想了解一下git,正好最近的有一个问题就是,实验室写的代码,怎么同步到自己宿舍的笔记本上面来.最开始想用dropbox,但是用VS的人都知道,工程文件里面会给你生成乱七八糟的很多东西,很占空间,d ...