<script src="${ctxStatic}/echarts/echarts.js" type="text/javascript"></script>
<script src="${ctxStatic}/echarts/esl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title : {
text: '物料出库数量和入库数量',
//subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
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',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'出库量',
type:'bar',
// data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
data:[],
itemStyle:{
normal:{
color:'#FF4500'
// color:'#6699CC'
// color:'#CCFF99'
}
},
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'入库量',
type:'bar',
// data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
data:[],
itemStyle:{
normal:{
color:'#FF00FF'
// color:'#663366'
}
},
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
},
{
name:'在库量',
type:'bar',
// data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
data:[],
itemStyle:{
normal:{
color:'green'
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
getdata();
function getdata() {
$.ajax({
type: "post",
url: "${ctx}/yuqian/yqWuliaokucunReport/reportList?materialType="+$("#materialType").val(),
dataType: "json",
success: function(data){
var result=eval(data);
option.series[0].data=result[0];
option.series[1].data=result[1];
option.series[2].data=result[2];
myChart.hideLoading();
myChart.setOption(option);
},
error: function (errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
}
});
}
});
<script src="${ctxStatic}/echarts/esl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title : {
text: '物料出库数量和入库数量',
//subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
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',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'出库量',
type:'bar',
// data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
data:[],
itemStyle:{
normal:{
color:'#FF4500'
// color:'#6699CC'
// color:'#CCFF99'
}
},
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'入库量',
type:'bar',
// data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
data:[],
itemStyle:{
normal:{
color:'#FF00FF'
// color:'#663366'
}
},
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
},
{
name:'在库量',
type:'bar',
// data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
data:[],
itemStyle:{
normal:{
color:'green'
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
getdata();
function getdata() {
$.ajax({
type: "post",
url: "${ctx}/yuqian/yqWuliaokucunReport/reportList?materialType="+$("#materialType").val(),
dataType: "json",
success: function(data){
var result=eval(data);
option.series[0].data=result[0];
option.series[1].data=result[1];
option.series[2].data=result[2];
myChart.hideLoading();
myChart.setOption(option);
},
error: function (errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
}
});
}
});
</script>
<div id="main" style="height:500px;border:1px solid white;padding:10px;">