<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height: 400px;">
</div>
<!--//标签引入文件-->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById("main"));
var option = {
//标题
title : {
text : "交通车次",
subtext : "2018-3-27"
},
//鼠标放上去提示文字
tooltip : {
show : true
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend : {
data : ["交通状况"]
},
//横坐标
xAxis : {
type : "category",
name : "时间(小时)",
data : ["9","10","11","12","13","14","15","16","17"]
},
//纵坐标
yAxis : {
type : "value",
name : "车次(辆)"
},
//数据
series : [
{
//数据关联名字
name : "交通状况",
type : "bar",
data : [1300,1500,2000,1500,1680,1774,1564,1999,1992]
}
]
}
//图形实例化
myCharts.setOption(option);
</script>
</body>
</html>
柱状图的echarts
最新推荐文章于 2024-08-27 12:00:00 发布