<!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++ 和 Java 对类继承的差异

    #include <iostream> using namespace std; class Base { public: int i; Base() { i = ; fun(); } v ...

  2. VC++ 6.0 C8051F340 USB PC侧通信 Demo

    // HelloWorld.cpp : Defines the entry point for the console application. // /*********************** ...

  3. 很全面的WinRAR实用技巧系列 - imsoft.cnblogs

    WinRAR也可以管理我的桌面时间长了,桌面上堆的东西实在太多,平时该如何管理呢?安装了WinRAR的朋友可以请它来帮忙,用它管理清除无用的桌面文件或图标. 以XP系统为例,系统所在目录是“c:\wi ...

  4. linux学习——sed工具

    命令格式: sed [-nefr] [动作] 1.sed可以分析标准输入(STDIN)的数据,然后将数据处理后,再将他输出到标准输出(STDOUT),他有替换.删除.新增.选定特定行等处理功能.sed ...

  5. 网络流--最小费用最大流MCMF模板

    标准大白书式模板 #include<stdio.h> //大概这么多头文件昂 #include<string.h> #include<vector> #includ ...

  6. test20180919 递归问题

    题意 定义 \[ f(n)=\left\{ \begin{array}{} 1 & n=1\\ f(n-f(f(n-1)))+1 & n>1 \end{array} \right ...

  7. test20180828

    所有试题限制都为512MB,1Sec 总分230. 试题1 新的开始 [题目描述] 发展采矿业当然首先得有矿井, 小FF花了上次探险获得的千分之一的财富请人在岛上挖了n口矿井, 但他似乎忘记考虑的矿井 ...

  8. Finally什么时候会被执行

    PS:有return意味着程序结束,他一定会在程序结束前执行: PS:    return返回前 会把数据存储到指定的位置,基本类型是不会改变的.引用类型是会影响修改的值的

  9. python 命名空间和作用域

    这是python的难点和特点, 有很多的和c/cpp不一样的地方.  它的灵活易用性造成不习惯之处. refer to: http://blog.csdn.net/cc7756789w/article ...

  10. 如何判断一个请求是否为AJAX请求

    普通请求与ajax请求的报文头不一样,通过如下 String requestType = request.getHeader("X-Requested-With");  如果req ...