目标：利用Echarts可视化Spring Boot响应的json数据。下图是服务端传过来的json数据。
JSON数据
json包括int 类型的id，double型的cost 和reliability，还有一个数组存储着一些整数。
以散点图方式进行展示，横坐标是cost，纵坐标是reliability。
<!DOCTYPE html>
<html>
<head>
<title>new map</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto">
</div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '供水管网阀门布局优化'
},
tooltip: {
},
legend: {
data:['阀门布局方案']
},
xAxis: {
name:"成本（元）",
value: [2000,4000,6000,8000,10000]
},
yAxis: {},
series: [{
name: '阀门布局方案',
type: 'scatter',
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //成本数组（实际用来盛放X轴坐标值）
// var nums=[]; //加权欠缺供应量数组（实际用来盛放Y坐标值）
var dataR=new Array();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "http://localhost:8080/op", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].cost); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
dataR[i]=new Array();
dataR[i][0]=result[i].cost;
dataR[i][1]=result[i].reliability; //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
//加载数据图表
series: [{
type:"scatter",
// 根据名字对应到相应的系列
name: '阀门布局方案',
data: dataR
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</html>
其中制作散点图一般是二维数据，需要将两个一维数组转换为一个二维数组。遇到的问题就是当设置了x轴data时，数据只显示一个点，而不设置时，散点可以正常显示，但是x轴没有数据。最后是通过设置x轴value来实现的：
这是最终的结果图。
最终效果图
网友评论