<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/dark.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var names=[], sals=[], comms=[], alls=[];
function TestAjax(){
$.ajax({
type: "post",
async: false,
url: "conn/conn_test.php",
data: {},
dataType: "json",
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].name);
sals.push(result[i].sal);
comms.push(result[i].comm);
alls.push(Number(result[i].comm) +Number(result[i].sal));
console.log(result[i].name);
console.log(result[i].sal);
console.log(result[i].comm);
}
}
}
})
return names, sals, comms, alls;
}
TestAjax();
var option = {
title: {
text: '部门情况',
//link: 'http://'
//target="_blank"
},
tooltip: {
show: true,
// enterable设置为true,鼠标可进入提示框浮层中
enterable: true,
// alwaysShowContent一定要设置为true,否则鼠标无法移到tooltip去点击链接
alwaysShowContent: true,
//formatter: function(params, ticket, callback) {
// target="_blank",在新窗口中打开链接
// var link = '';
// link = '<div>' +
// '<a href="shujv.php?id=$_post[id]" target="_blank">' +
// params.name + ':' + params.line +
// '</a>' +
// '</div>';
// return link;
},
legend: {
data:['SALARY','COMM','ALL'],
},
xAxis: [{
data : names
}],
yAxis: {
},
series: [
{
name : "ALL",
type : "bar",
data : alls
}
]
};
myChart.setOption(option);
</script>