1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>渠道分析</title>
  6. <script type="text/javascript" src="js/echarts.js"></script>
  7. <script type="text/javascript" src="js/jquery-2.2.4.js"></script>
  8. </head>
  9. <body>
  10. 	<!--  为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 -->
  11. 	<div id="main" style="width: 600px; height: 400px;"></div>
  12. 	<script type="text/javascript">
  13. 		var myChart = echarts.init(document.getElementById('main'));
  14. 		myChart.setOption({
  15. 			title : {
  16. 				text : '充值渠道分析',
  17. 				x : 'center'
  18. 			},
  19. 			tooltip : {
  20. 				trigger : 'item',
  21. 				formatter : "{a} <br />{b} : {c} ({d}%)"
  22. 			},
  23. 			legend : {
  24. 				orient : 'vertical',
  25. 				x : 'left',
  26. 				data : []
  27. 			},
  28. 			toolbox: {
  29. 	            show : true,
  30. 	            feature : {
  31. 	                mark : {show: true},
  32. 	                dataView : {show: true, readOnly: false},
  33. 	                magicType : {
  34. 	                    show: true,
  35. 	                    type: ['pie', 'funnel'],
  36. 	                    option: {
  37. 	                        funnel: {
  38. 	                            x: '25%',
  39. 	                            width: '50%',
  40. 	                            funnelAlign: 'left',
  41. 	                            max: 1548
  42. 	                        }
  43. 	                    }
  44. 	                },
  45. 	                restore : {show: true},
  46. 	                saveAsImage : {show: true}
  47. 	            }
  48. 	        },
  49. 			series : [ {
  50. 				name : '',
  51. 				type : 'pie',
  52. 				radius : '55%',
  53. 				center : [ '50%', '60%' ],
  54. 				data : []
  55. 			} ]
  56. 		});
  57. 		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
  58. 		var names = []; //类别数组
  59. 		var nums = []; //数量数组
  60. 		var array = [];
  61. 		$.ajax({
  62. 			type : "post",
  63. 			url : "/api/payment/showEChartsData",
  64. 			data : {},
  65. 			cache : false, //禁用缓存
  66. 			dataType : "json",
  67. 			success : function(result) {
  68. 				//请求成功时执行该函数内容，result即为服务器返回的json对象
  69. 				if (result) {
  70. 					for (var i = 0; i < result.length; i++) {
  71. 						names.push(result[i].channelName); //挨个取出类别并填入类别数组
  72. 					}
  73. 					for (var i = 0; i < result.length; i++) {
  74. 						nums.push(result[i].num); //挨个取出销量并填入销量数组
  75. 					}
  76. 					for (var i = 0; i < result.length; i++) {
  77. 						var map ={};
  78. 						map.name = result[i].channelName;
  79. 						map.value = result[i].num;
  80. 						array[i]=map;
  81. 					}
  82. 					myChart.hideLoading(); //隐藏加载动画
  83. 					myChart.setOption({ //加载数据图表
  84. 						legend : {
  85. 							data : names
  86. 						},
  87. 						series : {
  88. 							// 根据名字对应到相应的系列
  89. 							name : ['数量'],
  90. 							data : array
  91. 						}
  92. 					});
  93. 				}
  94. 			},
  95. 			error : function(errorMsg) {
  96. 				//请求失败时执行该函数
  97. 				alert("图表请求数据失败!");
  98. 				myChart.hideLoading();
  99. 			}
  100. 		});
  101. 	</script>
  102. </body>
  103. </html>

　　

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>渠道分析</title>
  6. <script type="text/javascript" src="js/echarts.js"></script>
  7. <script type="text/javascript" src="js/jquery-2.2.4.js"></script>
  8. </head>
  9. <body>
  10. 	<div id="main" style="width: 600px; height: 400px;"></div>
  11. 	<script type="text/javascript">
  12. 		var myChart = echarts.init(document.getElementById('main'));
  13. 		// 显示标题，图例和空的坐标轴
  14. 		myChart.setOption({
  15. 			title : {
  16. 				text : '充值渠道分析'
  17. 			},
  18. 			tooltip : {},
  19. 			legend : {
  20. 				data : [ '数量' ]
  21. 			},
  22. 			xAxis : {
  23. 				data : []
  24. 			},
  25. 			yAxis : {},
  26. 			series : [ {
  27. 				name : '数量',
  28. 				type : 'bar',
  29. 				data : []
  30. 			} ]
  31. 		});
  32. 		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
  33. 		var names = []; //类别数组（实际用来盛放X轴坐标值）
  34. 		var nums = []; //销量数组（实际用来盛放Y坐标值）
  35. 		$.ajax({
  36. 			type : "post",
  37. 			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
  38. 			url : "/api/payment/showEChartsData", //请求发送到TestServlet处
  39. 			data : {},
  40. 			dataType : "json", //返回数据形式为json
  41. 			success : function(result) {
  42. 				//请求成功时执行该函数内容，result即为服务器返回的json对象
  43. 				if (result) {
  44. 					for (var i = 0; i < result.length; i++) {
  45. 						names.push(result[i].channelName); //挨个取出类别并填入类别数组
  46. 					}
  47. 					for (var i = 0; i < result.length; i++) {
  48. 						nums.push(result[i].num); //挨个取出销量并填入销量数组
  49. 					}
  50. 					myChart.hideLoading(); //隐藏加载动画
  51. 					myChart.setOption({ //加载数据图表
  52. 						xAxis : {
  53. 							data : names
  54. 						},
  55. 						series : [ {
  56. 							// 根据名字对应到相应的系列
  57. 							name : '数量',
  58. 							data : nums
  59. 						} ]
  60. 					});
  61. 				}
  62. 			},
  63. 			error : function(errorMsg) {
  64. 				//请求失败时执行该函数
  65. 				alert("图表请求数据失败!");
  66. 				myChart.hideLoading();
  67. 			}
  68. 		})
  69. 	</script>
  70. </body>
  71. </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. Apache Tomcat/6.0.39如何配置连接mysql，JDBC:mysql-connector-java-5.1.30-bin.jar-成功连接心得

    http://tomcat.apache.org/tomcat-6.0-doc/jndi-datasource-examples-howto.html 前提:开启TOMCAT,MYsql MySQL ...

  2. [Algorithm] A nonrecursive algorithm for enumerating all permutations of the numbers {1,2,...,n}

    def permutationN(n): a=[None]*n for i in range(n): a[i]=i+1 sum=1 for j in range(n): sum*=(j+1) i=0 ...

  3. POI的简单使用

    一:简介 利用POI工具可以导出word,excel,ppt等office文件 二:程序代码示例 package com.wang.test; import java.io.File; import ...

  4. 51Nod 1091：线段的重叠（贪心）

    1091 线段的重叠  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 ...

  5. 使用pip install XX 命令时报错

    在使用pip命令安装的时候,我遇到这样的报错: C:\Users\86962>pip install Appium-Python-Client Collecting Appium-Python- ...

  6. 《DSP using MATLAB》Problem 4.1

    用到的z变换的计算公式: 代码: %% ------------------------------------------------------------------------ %% Outp ...

  7. scylladb docker 运行试用

      scylladb 是兼容cassandra 的数据存储系统,从官方的性能报告,比原生的apache cassandra 有好多 的提高 使用docker 运行,具体的也可以参考官方文档,后边会提供 ...

  8. gridview 自动序号 合计

    第一种方式,直接在Aspx页面GridView模板列中.这种的缺点是到第二页分页时又重新开始了. <asp:TemplateField HeaderText="序号" Ins ...

  9. FastAdmin 插件的 Git 开发流程（简明）

    FastAdmin 插件的 Git 开发流程(简明) cms zip 安装 包安装 删除 addons 里的 cms 使用 mklink 软链接到 cms 插件 Git 仓库 修改 cms 插件 gi ...

  10. 【转】每天一个linux命令（10）：cat 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内 ...