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

２．在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. Android开发-API指南-<uses-feature>

    <uses-feature> 英文原文:http://developer.android.com/guide/topics/manifest/uses-feature-element.ht ...

  2. React生命周期和虚拟DOM

    一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...

  3. 慕课网-安卓工程师初养成-4-2 Java条件语句之 if...else

    来源:http://www.imooc.com/code/1354 if...else 语句的操作比 if 语句多了一步:  当条件成立时,则执行 if 部分的代码块: 条件不成立时,则进入 else ...

  4. Digest [IAB_SRI_Online_Advertising_Effectiveness]

    http://www.pwc.com/en_GX/gx/entertainment-media/pdf/IAB_SRI_Online_Advertising_Effectiveness_v3.pdf

  5. oracle 将查询到的数据插入表

    1. 新增一个表,通过另一个表的结构和数据 create table tab1 as select * from tab2 2. 如果表存在: insert into tab1 select * fr ...

  6. STL源码分析-AVL树-RB树

    AVL树 不平衡情况 插入节点位于左子节点的左子树(左左) 插入节点位于左子节点的右子树(左右) 插入节点位于右子节点的左子树(右左) 插入节点位于右子节点的右子树(右右) 左左.右右为外侧插入,左右 ...

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

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

  8. leetcode 83

    83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that e ...

  9. SE11

        自省数据及表存储 2014年4月6日 21:37     类似JAVA反射的特性 SAP提供自省数据的机制 这样可以保证程序的灵活性和动态性     1.使用OO中的cl_abap_typed ...

  10. UML类图常见关系总结

    Unified Modeling Language (UML)又称统一建模语言或标准建模语言. 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realizat ...