echarts 收發包圖利
<html>
<head>
<meta charset="utf-8">
<title>3</title>
<script src="js/esl.js"></script>
<script type="text/javascript">
require.config({
packages:[
{
name:'echarts',
location:'../echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'../zrender-master/src',
main:'zrender'
}
]
});
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['收包','發包']
},
toolbox: {
show : true,
feature : {
mark : true,
dataZoom : true,
dataView : true,
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : 20,
end : 80
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : function(){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2013-03-' + i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'收包',
type:'line',
data:function(){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 30));
}
return list;
}()
},
{
name:'發包',
type:'line',
data:function(){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 10));
}
return list;
}()
}
]
};
require(
[
'echarts',
'echarts/chart/line'
],
function(ec){
var myChart=ec.init(document.getElementById('main'));
myChart.setOption(option);
}
)
</script>
</head>
<body>
<div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章