<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分鐘上手之散點圖</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div style="height: 500px;width: 1000px;" id="main"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var x_data = [1,2,3,4]
var y_data = [1,20,3,40]
myChart.setOption({
title : {
/*text : '睡眠質量監測',
textStyle:{
fontSize:12,
}*/
},
tooltip : {
trigger : 'axis'
},
xAxis : {
data : x_data
},
yAxis : {
splitLine : {
show : false
}
},
/* toolbox : {
left : 'center',
feature : {
dataZoom : {
yAxisIndex : 'none'
},
restore : {},
saveAsImage : {}
}
},*/
dataZoom : [ {
startValue : '2014-06-01'
}, {
type : 'inside'
} ],
visualMap : {
top : 10,
right : 10,
pieces : [ {
gt : 1,
lte : 2,
label:'淺睡',
color : '#ff9933'
}, {
gt : 2,
lte : 3,
label:'深睡',
color : '#cc0033'
}, {
gt : 3,
lte : 4,
label:'熟睡',
color : '#660099'
} ],
outOfRange : {
color : '#999'
}
},
series : {
name : '睡眠',
type : 'line',
data : y_data,
markLine : {
silent : true,
data : [ {
yAxis : 1
}, {
yAxis : 2
}, {
yAxis : 3
} ]
}
}
});
myChart.setOption(option)
</script>
</body>
</html>
模擬數據
json數據
https://echarts.baidu.com/examples/data/asset/data/aqi-beijing.json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分鐘上手之散點圖</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div style="height: 500px;width: 1000px;" id="main"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
$.get('aqi-beijing.json', function (data) {
myChart.setOption({
title : {
/*text : '睡眠質量監測',
textStyle:{
fontSize:12,
}*/
},
tooltip : {
trigger : 'axis'
},
xAxis : {
data: data.map(function (item) {
return item[0];
})
},
yAxis : {
splitLine : {
show : false
}
},
/* toolbox : {
left : 'center',
feature : {
dataZoom : {
yAxisIndex : 'none'
},
restore : {},
saveAsImage : {}
}
},*/
dataZoom : [ {
startValue : '2014-06-01'
}, {
type : 'inside'
} ],
visualMap : {
top : 10,
right : 10,
pieces : [ {
gt : 1,
lte : 2,
label:'淺睡',
color : '#ff9933'
}, {
gt : 2,
lte : 3,
label:'深睡',
color : '#cc0033'
}, {
gt : 3,
lte : 4,
label:'熟睡',
color : '#660099'
} ],
outOfRange : {
color : '#999'
}
},
series : {
name : '睡眠',
type : 'line',
data: data.map(function (item) {
return item[1];
}),
markLine : {
silent : true,
data : [ {
yAxis : 1
}, {
yAxis : 2
}, {
yAxis : 3
} ]
}
}
});
})
myChart.setOption(option)
</script>
</body>
</html>
原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見