<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>渠道分析</title>

<script type="text/javascript" src="js/echarts.js"></script>

<script type="text/javascript" src="js/jquery-2.2.4.js"></script>

</head>

<body>

	<!--  为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 -->

	<div id="main" style="width: 600px; height: 400px;"></div>

	<script type="text/javascript">

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

		myChart.setOption({

			title : {

				text : '充值渠道分析',

				x : 'center'

			},

			tooltip : {

				trigger : 'item',

				formatter : "{a} <br />{b} : {c} ({d}%)"

			},

			legend : {

				orient : 'vertical',

				x : 'left',

				data : []

			},

			toolbox: {

	            show : true,

	            feature : {

	                mark : {show: true},

	                dataView : {show: true, readOnly: false},

	                magicType : {

	                    show: true,

	                    type: ['pie', 'funnel'],

	                    option: {

	                        funnel: {

	                            x: '25%',

	                            width: '50%',

	                            funnelAlign: 'left',

	                            max: 1548

	                        }

	                    }

	                },

	                restore : {show: true},

	                saveAsImage : {show: true}

	            }

	        },

			series : [ {

				name : '',

				type : 'pie',

				radius : '55%',

				center : [ '50%', '60%' ],

				data : []

			} ]

		});

		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

		var names = []; //类别数组

		var nums = []; //数量数组

		var array = [];

		$.ajax({

			type : "post",

			url : "/api/payment/showEChartsData",

			data : {},

			cache : false, //禁用缓存

			dataType : "json",

			success : function(result) {

				//请求成功时执行该函数内容，result即为服务器返回的json对象

				if (result) {

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

						names.push(result[i].channelName); //挨个取出类别并填入类别数组

					}

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

						nums.push(result[i].num); //挨个取出销量并填入销量数组

					}

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

						var map ={};

						map.name = result[i].channelName;

						map.value = result[i].num;

						array[i]=map;

					}

					myChart.hideLoading(); //隐藏加载动画

					myChart.setOption({ //加载数据图表

						legend : {

							data : names

						},

						series : {

							// 根据名字对应到相应的系列

							name : ['数量'],

							data : array

						}

					});

				}

			},

			error : function(errorMsg) {

				//请求失败时执行该函数

				alert("图表请求数据失败!");

				myChart.hideLoading();

			}

		});

	</script>

</body>

</html>

　　

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>渠道分析</title>

<script type="text/javascript" src="js/echarts.js"></script>

<script type="text/javascript" src="js/jquery-2.2.4.js"></script>

</head>

<body>

	<div id="main" style="width: 600px; height: 400px;"></div>

	<script type="text/javascript">

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

		// 显示标题，图例和空的坐标轴

		myChart.setOption({

			title : {

				text : '充值渠道分析'

			},

			tooltip : {},

			legend : {

				data : [ '数量' ]

			},

			xAxis : {

				data : []

			},

			yAxis : {},

			series : [ {

				name : '数量',

				type : 'bar',

				data : []

			} ]

		});

		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

		var names = []; //类别数组（实际用来盛放X轴坐标值）

		var nums = []; //销量数组（实际用来盛放Y坐标值）

		$.ajax({

			type : "post",

			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

			url : "/api/payment/showEChartsData", //请求发送到TestServlet处

			data : {},

			dataType : "json", //返回数据形式为json

			success : function(result) {

				//请求成功时执行该函数内容，result即为服务器返回的json对象

				if (result) {

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

						names.push(result[i].channelName); //挨个取出类别并填入类别数组

					}

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

						nums.push(result[i].num); //挨个取出销量并填入销量数组

					}

					myChart.hideLoading(); //隐藏加载动画

					myChart.setOption({ //加载数据图表

						xAxis : {

							data : names

						},

						series : [ {

							// 根据名字对应到相应的系列

							name : '数量',

							data : nums

						} ]

					});

				}

			},

			error : function(errorMsg) {

				//请求失败时执行该函数

				alert("图表请求数据失败!");

				myChart.hideLoading();

			}

		})

	</script>

</body>

</html>

　　

ECharts之饼图和柱形图demo的更多相关文章

  1. echarts标准饼图(一)——基本配置demo

    echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...

  2. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  3. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  4. Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

  5. Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互

    向上效果图 前端code /* * ------------------------------------------------------------------ * module-inform ...

  6. 关于echarts的一些基本使用demo

    最近发现一个很好用的一个前端控件echarts,效果非常不错,兼容ie8+以上等主流浏览器.可以使用它制作报表,地图示意图等,可用其实现一系列强大的功能. 其基于html5 Canvas,是一个纯Ja ...

  7. echarts标准饼图解读(一)——提示框（tooltip）配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. High-speed Charting Control--MFC绘制图表（折线图、饼图、柱形图）控件

    原文地址:https://www.codeproject.com/articles/14075/high-speed-charting-control 本文翻译在CodeProject上的介绍(主要还 ...

  9. Echarts 解决饼图文字过长重叠的问题

    之前在网上查找了很多关于解决饼图文字描述过长导致重叠的问题,找了很多一直没有一个合适的解决方案,最后自己只能花时间研究echarts文档,功夫不负有心人,终于解决了文字重叠展示不全等问题. 废话不多说 ...

随机推荐

  1. C++基础之 成员变量初 始化赋值

    摘要: C++成员变量 初始化赋值 你都清楚吗?还有好多坑,好多细节也不知道... 今天在写一个类的时候,由于该类的一个成员变量是引用,所以初始化出现了问题,查了一下之后,才发现,原来引用的初始化和c ...

  2. 【图文教程】win7+VMware8.0+CentOS6.4 NAT上网

    在win7下面安装VM8.0,里面又安装多个虚拟机,各个虚拟机之间可以互相访问,同时虚拟机可以直接访问外网上网,win7要ping通个虚拟机中的系统.这种方式就使用NAT模式,开启VMware Net ...

  3. Tomcat问题：Neither the JAVA_HOME nor the JRE_HOME environment variable is defined ，At least one of these environment variable is needed to run this program

    一眼就能看出来是jdk的环境有问题,但是用了这么久的jdk一直都配置的好好的,怎么一到Tomcat上就这么矫情了. 最后查解决方案,原来是我的jdk从官网直接下载的,虽然我修改了java_home,但 ...

  4. CF1119 Global Round 2

    CF1119A Ilya and a Colorful Walk 这题二分是假的.. \(1,2,1,2,1\) 有间隔为 \(3\) 的,但没有间隔为 \(2\) 的.开始被 \(hack\) 了一 ...

  5. Ubuntu 18.10安装Firefox 和 Google Chrome

    ================================ 工作环境迁移到Linux上,操作系统使用Linux Mint19.1(基于Ubuntu的), 自带的浏览器器是低版本的英文版,现在使用 ...

  6. Tomcat配置JNDI数据源的三种方式-转-http://blog.51cto.com/xficc/1564691

    第一种,单个应用独享数据源 就一步,找到Tomcat的server.xml找到工程的Context节点,添加一个私有数据源 Xml代码   <Context docBase="WebA ...

  7. nyoj 单调递增最长子序列

    单调递增最长子序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列就是abdf,长度为4   输入 ...

  8. iview admin 发布到IIS

    公司项目打算做前后端分离,选型最后选了vue+webapi的模式.于是在网上找到了iview及iview admin 这个后台管理模板,里面东西很完善.有这么好的东西,而且MIT协议,项目本身也比较简 ...

  9. revit API 生成墙图元

    由于Revit的版本问题,在网上找的生成墙图元的代码,在我机器上的Revit 2016中编译不能通过,通过多次调试,终于找到在revit 2016中使用API生成墙图元的代码,现在贴出来. 下面的代码 ...

  10. spring答题

    ioc 依赖注入:通过注入的方式实例化对象,不再直接new对象了,交给spring容器进行管理和维护 控制反转:实例化对象的控制权交给了spring容器,而不再是某个单独的类,控制权发生了变更 作用: ...