html，Ajax，echarts绘制雷达图
商高谊
ajax接收json数组并绘制雷达图
1.引入库文件（本例采用直接下载到项目根目录下）
echarts.js和jQuery.js放入head
<head>
<meta charset="UTF-8">
<title>JQuery Ajax Test</title>
<script src="echarts.js"></script>
<script src="jQuery.js"></script>
</head>
2.echarts制图
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container" style="width: 600px; height: 500px;"></div>
<script>
var arr1=[],arr2=[],arr3=[];
function arrTest(){
//这个功能块的作用就是读取json数据。
$.ajax({
type:"post",//请求服务器载入数据
async:false,//异步属性
url:"上篇文章PHP文件名.php",
data:{},
dataType:"json",
success:function(result){
if (result) {
for (var i = result.length-3; i < result.length-2; i++) { //取倒数第三行数据，自行修改取哪行数据
arr1.push(result[i].O1_1);
arr1.push(result[i].O1_2);
arr1.push(result[i].O1_3);//这边更新字段，可以只写你需要展示的字段。
}
for (var i = result.length-2; i < result.length-1; i++) { //取倒数第二行数据，期望达成度
arr2.push(result[i].O1_1);
arr2.push(result[i].O1_2);
arr2.push(result[i].O1_3);//这边更新字段，可以只写你需要展示的字段。
}
}
},error: function(errmsg) {
alert("Ajax获取服务器数据出错了！"+ errmsg);}
})
return arr1,arr2;
}
arrTest();
// 初始化 图表对象，放入对应的DOM
var myChart = echarts.init(document.getElementById('container'));
// 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
var option = {
title: {
text: '我是小趴菜',
left: "center",
textStyle: {
fontSize: 20 //标题字体大小
},
},
//Bootstrap 提示工具(Tooltip)插件,鼠标悬停时候的提示框
emphasis: {
label: {
show: true,
formatter: '{c}%',//查阅echarts官网的配置项手册
}
},
//关闭动画效果,导出图片需要
animation: false,
//图例
legend: {
orient: 'horizontal',
bottom: "1%",
data: ["全年级", "期望达成度"]
},
radar: {
// shape: 'circle',
splitNumber: 5, // 雷达图圈数设置
indicator: [
{
name: 'O1_1', max: 100,
//若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在O1_1这条indicator上显示
axisLabel: {
show: true,
formatter: '{value}%',
fontSize: 12,
color: '#838D9E',
showMinLabel: true, //显示最小数字，即中心点显示0
},
},
{name: 'O1_2', max: 100},
{name: 'O1_3', max: 100}
]
},
series: [
{
"type": "radar",//雷达图
data: [
{
value: arr1,
name: '全年级',
//这里的配置显示数值
label: {
normal: {
show: true,
position: 'left',
formatter: '{c}%'
}
}
},
{
value: arr2,
name: '期望达成度',
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}%'
}
}
}
]
}
]
};
// 为echarts对象加载数据
if (option && typeof option === "object") {
myChart.setOption(option, true);
}else {
alert("出错了！"+ errmsg);
}
//获取echarts图表的base64地址
var baseImage = myChart.getDataURL();
//将生成的base64传到后端保存起来
if(baseImage) {
$.ajax({
url: "下篇文章php文件名.php?action=save",
type: 'post',
async: true,
data: {baseimg: baseImage},
success: function(data) {
console.log(baseImage);
}
});
}
</script>
类似资料：