<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<div id="main2" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});

// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "<%=basePath%>getUserJson",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
arr.push(result[i].userName);
}
}

},
error : function(errorMsg) {
alert("获取图表请求数据失败!");
myChart.hideLoading();
}
})
console.log("arr:"+arr);
return arr;
})()
},
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}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "<%=basePath%>getUserJson",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result){
var selfme=null;
for(var i=0;i<result.length;i++){
selfme={value:result[i].age,name:result[i].userName}  
arr.push(selfme);
// arr.push("{value:"+result[i].age+",name:'"+result[i].userName+"'}");
}
}
},
error : function(errorMsg) {
alert("获取图表请求数据失败!");
myChart.hideLoading();
}
})
console.log("arrB:"+arr)
return arr;
})()
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);

</script>
</body>

=====================================================

备注说明：

data是构造的数组数据,所以直接将例子后面的[] 块去掉,换上自己的function函数,将该函数的值放在数组中

第二个data存的也是数组,不过要数据的格式要符合echarts的标准,所以这里构造的是一个相同格式的对象

js构造对象（直接通过 属性名/值来创建）

eg:var o={name:'tom', age:22}

所以在第二个data中直接{value:xx,name:xx}即可

标注颜色的是重点，容易出错的地方！！！！！

匿名函数必须(function(){})()

Echarts 获取后台数据 使用后台数据展示 饼装图的更多相关文章

  1. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  2. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  3. echarts 柱状图和饼状图动态获取后台数据

    运用echarts来实现图表 1.首先下载echarts包  http://echarts.baidu.com/echarts2/doc/example.html,在这里我下载的是 2.将echart ...

  4. 微信小程序结合后台数据管理实现商品数据的动态展示、维护

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...

  5. MVC后台获取数据和插入数据的三种方式【二】

    MVC模式下,从前端获取数据返回后台,总共有三种形式.下面的代码示例将演示如何将数据返回到后端. 一.首先我们看看表单代码,注意input标签中name的值. <html> <hea ...

  6. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

  7. 使用axios post 提交数据，后台获取不到提交的数据解决方案

    一.问题发现 前后端分离使用vue开发,结合axios进行前后端交互数据,一开始使用 get 请求,获取数据,没有发现任何问题,当使用 post请求 传参时,发现,数据明明已经提交,在打开F12 开发 ...

  8. 使用axios post 提交数据，后台获取不到

    https://www.cnblogs.com/yiyi17/p/9409249.html(copy https://www.cnblogs.com/loveyaxin/p/8385694.html( ...

  9. Echarts怎么用后台传来的json数据

    Echarts怎么用后台传来的json数据 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

随机推荐

  1. LR脚本用户自定义C语言函数

    LR脚本实战:用户自定义C语言函数 Loadrunner可以使用标准C语言的函数,因此我们可以在脚本中编写自己的函数用于调用,把脚本结构化,更好的进行重用. 先看一个例子: Action() { in ...

  2. Ubuntu 18.04安装网易云音乐（转载）

    作为Ubuntu下唯一一款超级好用的音乐软件,必须下载. 提升为root权限后操作 0 : 网易云音乐1.0.0(该版本较为好安装)下载地址 http://s1.music.126.net/downl ...

  3. vue v-bind绑定属性和样式

    这期跟大家分享的,是v-bind指令.它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式. 绑定属性 最简单的例子,我们有一张图片,需要定义图片的src.我们可以直接在元素的属性里 ...

  4. python模块之HTMLParser

    HTMLParser是python用来解析html的模块.它可以分析出html里面的标签.数据等等,是一种处理html的简便途径. HTMLParser采用的是一种事件驱动的模式,当HTMLParse ...

  5. Crontab 在linux中的非常有用的Schedule Jobs

    crontab 是linux系统集成的定时任务命令,它对于系统运行(数据的备份,调度系统资源或命令,程序的定时触发等非常有用).crontab有些类似于Windows系统的Service的任务计划程序 ...

  6. POJ 2253 Frogger【最短路变形/最小生成树的最大权/最小瓶颈树/A到B多条路径中的最小的最长边】

    Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Frog who is sit ...

  7. 洛谷P2874 [USACO07FEB]新牛棚Building A New Barn [贪心]

    题目传送门 题目描述 After scrimping and saving for years, Farmer John has decided to build a new barn. He wan ...

  8. POJ2234 Matches Game 尼姆博弈 博弈论

    http://poj.org/problem?id=2234 尼姆博弈(Nimm's Game) 指的是这样一个博弈游戏:有任意堆物品,每堆物品的个数是任意的,双方轮流从中取物品,每一次只能从一堆物品 ...

  9. 【计算几何】【凸包】【极角排序】【二分】Gym - 101128J - Saint John Festival

    平面上n个红点,m个黑点,问你多少个黑点至少在一个红三角形内. 对红点求凸包后,转化为询问有多少个黑点在凸包内. 点在凸多边形内部判定,选定一个凸包上的点作原点,对凸包三角剖分,将其他的点极角排序之后 ...

  10. python基础之数据类型，交互，格式化输出，基本运算符

    数据类型 1.什么是数据类型? 变量值才是我们存的数据,所以数据类型指的是变量值的种类 2.为何数据要分类? 变量值是用来保存现实世界中的状态的,那么针对不同的状态,就应该用不同类型的数据去表示 3. ...