背景
当获取了数据，将数据处理成需要的格式并存入数据库之后
下一步的工作就是：分析数据，显示数据
当然分析数据是根据业务走的，用户想看数据，我们能分析出来什么，这是我们的思维逻辑
我们要做的就是把根据需求分析处理数据，并显示数据
功能
以图表形式直观的显示数据
材料
本次采用的EChart，地址 http://echarts.baidu.com 下载好对应的js文件，引用就可以直接使用
也可以采用hcharts，地址 https://www.hcharts.cn
效果展示
—
代码
<body>
<form id="form1" runat="server">
<div></div>
</form>
<%-- 图表展示区 --%>
<div id="charts" style="margin-top:100px;">
<div id="chart1" style="width: 600px; height: 400px; float: left;"></div>
<div id="chart2" style="width: 600px; height: 400px; float: left;"></div>
</div>
</body>
<script src="js/echarts.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var myChart1 = echarts.init(document.getElementById('chart1'));
myChart1.setOption({
title: {
text: '资料使用情况'
},
tooltip: {},
legend: {
data: ['次数']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '次数',
type: 'bar',
data: []
}]
});
$.ajax({
url: "Material.aspx/GetMaterialInfo",
type: 'Post',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var material = JSON.parse(data.d);
myChart1.setOption({
xAxis: {
data: material.categories
},
series: [{
name: '次数',
data: material.data
}]
});
}
});
var myChart2 = echarts.init(document.getElementById('chart2'));
myChart2.setOption({
title: {
text: '张三-个人情况'
},
tooltip: {},
legend: {
data: ['平均水平', '用户情况']
},
radar: {
indicator: [
{ name: '数据结构', max: 30 },
{ name: 'MySQL', max: 30 },
{ name: 'Angular2', max: 30 },
{ name: '设计模式', max: 30 },
{ name: 'J2EE', max: 30 }
]
},
series: [{
name: '平均水平 vs 用户情况',
type: 'radar',
data: [
{
value: [],
name: '平均水平'
},
{
value: [],
name: '用户情况'
}
]
}]
});
$.ajax({
url: "Material.aspx/GetPersonalInfo",
type: 'Post',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var personal = JSON.parse(data.d);
myChart2.setOption({
series: [{
data: [
{
value: personal.average_data,
name: '平均水平'
},
{
value: personal.personal_data,
name: '用户情况'
}
]
}]
});
}
});
});
</script>
</html>
小结
这次主要是为了实现功能，测试整个流程是可以走通的，可以显示相关数据 当然这不是最后结果，呈现方式，显示的数据都需要进一步完善 EChar的功能还有很多，也很容易上手，相关内容可以自定义，一个不错的框架
转载请注明原文地址: https://ju.6miu.com/read-450036.html
