<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
</style>
<body style="width: 100%;height: 100%;">
<div id="box" style="width: 80%;height: 600px;border: 1px solid red;"></div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.js"></script> <!--这个文件不要引错了-->
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('box'));
option = {
title:{
text:'人员业绩'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend:{
data:['销量',"综合"]
},
xAxis: {
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name:"销量",
type: 'bar',
data: []
},
{
name:"综合",
type: 'bar',
ata: []
}]
};
myChart.setOption(option);
var names=[];
var valu=[];
var cont=[];
$.ajax({
url: "js/data.html",//数据格式{"name":"小二","num":"88","money":11}
success: function (data) {
data=eval(data)
for(i=0;i<data.length;i++){
names.push(data[i].name);
valu.push(data[i].money);
cont.push(data[i].num)
}
console.log(valu)
myChart.setOption({
xAxis: {
data: names
},
series: [
{
name:"销量",//这个和上面的对应
data:valu
},
{
name:"综合",
data:cont
}]
})
}
})
</script>
</body>
</html>