0
点赞
收藏
分享

微信扫一扫

Echarts柱状图实现

<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>

<div id="main" style="height:500px;border:1px solid white;padding:10px;">

举报

相关推荐

0 条评论