Echart ajax动态调取后台数据
来源:互联网 发布:2016淘宝店铺二级域名 编辑:程序博客网 时间:2024/06/06 19:11
前台:
<script src="Scripts/jquery-1.6.2.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
var json = [];
var myChart;
//ajax动态获取数据
$.ajax({
type: 'post',
url: 'PieHandler.ashx',
dataType: 'json',
async: false,
success: function (result) {
//alert(result);
json = result;
},
error: function () {
alert("Error");
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载pie模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
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: ['业务部', '财务部', '事业部', '质量部', '研发部','市场部','人事部']
},
calculable: true,
series: [
{
name: '2017年',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: json
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
<div id="main" style="height:400px;width:800px;"></div>
后台:
public void ProcessRequest(HttpContext context)
{
//声明并实例化datatable
DataTable dt = new DataTable();
//实例化二个列
DataColumn dc1 = new DataColumn("value", System.Type.GetType("System.Int32"));
DataColumn dc2 = new DataColumn("name", System.Type.GetType("System.String"));
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
//添加四条数据
DataRow row = dt.NewRow();
row["value"] = "13";
row["name"] = "业务部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "7";
row["name"] = "财务部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "20";
row["name"] = "事业部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "15";
row["name"] = "质量部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "30";
row["name"] = "研发部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "10";
row["name"] = "市场部";
dt.Rows.Add(row);
row = dt.NewRow();
row["value"] = "5";
row["name"] = "人事部";
dt.Rows.Add(row);
string json2 = FormatToJson.ToJson(dt);
context.Response.Write(json2);
}
- Echart ajax动态调取后台数据
- ajax调取php,mysql后台数据实例
- 使用echart从后台获取数据动态显示到页面
- echart实现ajax动态数据加载(前台js代码)
- Echart动态加载数据
- 第一次使用echart从后台获取数据动态显示到页面
- 第一次使用echart从后台获取数据动态显示到页面
- AJAX 动态加载后台数据 绑定select
- Echart与后台的数据交互
- echart 柱状图饼图调用后台数据
- Echart动态获取数据库数据使用心得
- 关于ajax异步请求后台数据进行动态分页
- input输入时,ajax方式动态获取后台数据代码
- Echart获取后台数据渲染到map,bar
- jQuery利用ajax调取json数据生成表格
- Ajax请求后台数据
- ajax 请求后台数据
- Echart 饼状图,柱状图series.data数据动态设置
- java properties 文件读写工具类
- hdu 1711 Number Sequence
- Android手机微信访问https链接空白
- workerman例子
- 深度学习:卷积神经网络CNN入门
- Echart ajax动态调取后台数据
- PAT考试乙级1029(C语言实现)
- SpringMVC整合Shiro权限框架
- DAO设计模式的介绍与实现
- 下载图片放到纹理缓存中
- python Web开发 flask轻量级Web框架
- 每周汇总
- python之实战----KNN之手写数字位图
- 关于单链表的反转一种复杂的想法