<!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"
},
legend : {
data : ["降雨量","水蒸气","蒸发量","啊啊啊","不不不"]
},
tooltip : {
show : true,
trigger : "axis",
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
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}
}
},
xAxis : {
type : "category",
name : "时间(小时)",
data : ["9","10","11","12","13","14","15","16"]
},
yAxis : {
type : "value",
},
series : [
{
name : "降雨量",
type : "bar",
data : [12.3,11.0,14.2,11.0,15.0,11.2,14.9,17.3],
},
{
name : "啊啊啊",
type : "bar",
stack : "量",
data : [12.3,11.0,14.2,11.0,15.0,11.2,14.9,17.3],
z : "6"
},
{
name : "不不不",
type : "bar",
data : [12.3,11.0,14.2,11.0,15.0,11.2,14.9,17.3],
//斜线
markLine : {
itemStyle:{
normal:{
lineStyle:{
type: 'dashed'
}
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
{
name : "水蒸气",
type : "bar",
stack: '不不不',
data : [30,50,70,40,33,65,45,50]
},
{
name : "蒸发量",
type : "bar",
data : [13.5,15.0,17.0,14.0,13.3,16.5,14.5,15.0]
}
]
};
myCharts.setOption(option);
</script>
</body>
</html>
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
