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

２．在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. C++调用WebService服务问题总结

    近期接手一部分C++研发工作,同时与.NET开发小组进行软件功能协作,于是需要调用.NET WebService服务,已完成数据的网络通讯业务功能:结束之余,将手头碰到的问题总结罗列如下: C++如何 ...

  2. 日志组件logback的介绍及配置使用方法

    一.logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-acc ...

  3. VI小技巧

    i.a        进入编辑模式 shift+a    到行尾insert o           在光标下一行编辑 shift+o     在光标上一行编辑 yy         复制 p     ...

  4. 学习记录 java 值类型和引用类型的知识

    1. Java中值类型和引用类型的不同? [定义] 引用类型表示你操作的数据是同一个,也就是说当你传一个参数给另一个方法时,你在另一个方法中改变这个变量的值, 那么调用这个方法是传入的变量的值也将改变 ...

  5. MySQL 按日期分表

    一.表不存在时则创建 之前做项目实在是太赶了,很多东西都没记录.是时候补回来了 MySQL做一个大表,由于要存历史记录,所以数据量很大,查询很慢.恰好查询的时候,又不需要时间太久的冷数据.现在将其实现 ...

  6. 银行ATM机工作流程模拟编程（代码）

    #include<stdio.h>#include<stdlib.h>#include <conio.h>#include <string.h> voi ...

  7. javaSE第二十七天

    第二十七天    447 1:反射(理解)    447 (1)类的加载及类加载器    447 (2)反射:    448 A:定义    448 B:获取字节码对象的三种方式    449 (3) ...

  8. 实现弹出收回菜单效果ios源码

    REMenu能够提供下弹出来的菜单,跳转到不同的vc后菜单便会收起.菜单的弹收都有回弹(bounce)的效果.效果图: <ignore_js_op> 使用方法: 先把REMenu的文件夹复 ...

  9. select 语句占位符

    对于已预备的语句,可以使用位置保持符.以下语句将从tb1表中返回一行: mysql> SET @a=1; mysql> PREPARE STMT FROM "SELECT * F ...

  10. Windows 7/8/8.1 硬盘安装法实现 ubuntu 14.04 双系统

    一.软件准备 1. 下载 Ubuntu 系统镜像:http://www.ubuntu.com/download/desktop/ : 这里使用的是 ubuntu 14.04.1 LTS 64bit 版 ...