<script src="echarts/echarts.min.js"></script> //导入echat.js
<body>
<div id="detail" style="width: 600px;height:400px;"></div> //注意要设置
</body>
<script type="text/javascript">
myEcharts();
function myEcharts(){
//alert(11);
var myChart = echarts.init(document.getElementById('detail'));
// alert(11);
// 指定图表的配置项和数据
myChart.setOption({
title : {
text: '小时流量增长幅度',
subtext: '横向坐标:小时/间隔',
subtextStyle: {
fontWeight:'normal', //标题颜色
color: 'black'
}
},
tooltip : {
trigger: 'axis',
formatter: '{a0}:{c0}人<br />{b}:00'
},
legend: {
data:['流量详细']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
axisLabel:{formatter:'{value}人'}
}
],
series : [
{
name:'累计人数',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'},
color: '#00FF00'}},
data:[]
}
]
});
var hours=[]; //类别数组(实际用来盛放X轴坐标值)
var detailNumber=[]; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "/searchDetail", //请求发送到TestServlet处
data : {shop:shop,type:type},
//dataType : "json", //返回数据形式为json
success : function(data) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (data) {
for(var i=0;i<data.length;i++){
hours.push(data[i].hours); //挨个取出类别并填入类别数组
}
for(var i=0;i<data.length;i++){
detailNumber.push(data[i].detailNumber); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
//alert(data);
myChart.setOption({ //加载数据图表
xAxis : [
{
type : 'category',
boundaryGap : false,
data : hours
}
],
series : [
{
name:'累计人数',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'},
color: '#00FF00'}},
data: detailNumber
}
]
});
document.getElementById("title").innerHTML = data[0].description;
}
},
error : function(errorMsg) {
//请求失败时执行该函数
//alert("图表请求数据失败!");
myChart.hideLoading();
}
})
};
window.onresize = function(){
myChart.resize();}
</script>
Echats前后端交互例子
最新推荐文章于 2024-06-21 11:00:30 发布