前端:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>图表显示</title>
<script src="JS/echarts.min.js"></script>
<script src="JS/jquery-1.8.3.min.js"></script>
<style>
.fr_city {
width: 100%;
height:900px;
}
.fr_css {
width: 100%;
height: 650px;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<center>
<div id="main" style="width: 600px;height:400px;"></div>
<iframe src="InCityShow.html" class="fr_city" frameborder="0"></iframe>
<iframe src="OutCityShow.html" class="fr_css" frameborder="0"></iframe>
</center>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '疗养人员地区反馈表',
subtext: '',
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 }
}
},
calculable: true,
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: []
}
],
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//饼图动态赋值
$.ajax({
type: "get",
url: "ASHX/GetRestVoteNum.ashx",
data: {},
cache: false, //禁用缓存
dataType: "json",
success: function (result) {
var names = [];//定义两个数组
var nums = [];
$.each(result,function (key, values) { //此处我返回的是list<String,map<String,String>>循环map
names.push(values.name + ":" + values.value + "人");
var obj = new Object();
obj.name = values.name + ":" + values.value + "人",
obj.value = values.value
nums.push(obj);
});
myChart.setOption({ //加载数据图表
legend: {
data: names
},
series: {
// 根据名字对应到相应的系列
name: ['人数'],
data: nums
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
</script>
</body>
</html>
ASHX页面:
string str_json = "[{\"name\":\"市内\",\"value\":" + citynum + "},{\"name\":\"市外\",\"value\":" + outcitynum + "}]";
context.Response.Write(str_json);