//初始化echarts实例
var goodsstock = echarts.init(document.getElementById('goodsstock'));
goodsstock.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
//商品销售统计
var option = {
title:{
text:'进销存统计'
},
tooltip : {
trigger: 'axis' //放在折线点的时候显示出相应x和y坐标相应的数据信息
},
legend:{
data:['入库数量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, //整个图表的跟父容器的间距
xAxis: [{
}],
yAxis : {},
series : [{
name : '入库数量',
type : 'line',
itemStyle : {
normal : {
color:'#47b34f',
lineStyle:{
color:'#47b34f'
}
}//设置折线图中折线线条颜色和折线点颜色
},
}]
};
$.ajax({
type : "post",
async : false, //同步执行
url : contextpath + '/count/goodsstock',
dataType : "json", //返回数据形式为json
success : function(result) {
if(result){
//初始化option.xAxis[0]中的data
option.xAxis[0].data=[];
for(var i=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].goods_name);
}
//初始化option.series[0]中的data
option.series[0].data=[];
for(var i=0;i<result.length;i++){
option.series[0].data.push(result[i].count);
}
goodsstock.hideLoading(); //隐藏加载动画
goodsstock.setOption(option);
}
},
error: function(errorMsg) {
alert("图表请求数据失败啦!");
}
})
- 1》放在折线点的时候显示出相应x和y坐标相应的数据信息
tooltip : { trigger: 'axis' },加入这个属性就可以显示
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}
itemStyle : {
normal : {
color:'#47b34f',
lineStyle:{
color:'#47b34f'
}
}
},
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
