散點(diǎn)圖
今天我來分享一下如何使用echarts繪制散點(diǎn)圖
首先，我們需要引入echarts庫?？梢酝ㄟ^以下代碼在HTML文件中引入：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
或者引入下載好的js文件：
<script src="echarts.min.js"> </script>
然后，我們需要準(zhǔn)備好數(shù)據(jù)。散點(diǎn)圖需要至少兩個數(shù)據(jù)集，分別表示x軸和y軸的坐標(biāo)。我們可以使用JavaScript數(shù)組來存儲數(shù)據(jù)。
// 數(shù)據(jù)內(nèi)容
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
]
接下來，我們可以創(chuàng)建一個div元素來容納echarts圖表，并設(shè)置其寬度和高度。
<div id="main" style="width:600px;height:400px;"></div>
然后，我們可以使用echarts的init方法初始化圖表，并將其綁定到我們創(chuàng)建的div元素上。
var myChart=echarts.init(document.getElementById('main'));
接下來，我們需要配置圖表。散點(diǎn)圖的配置項包括x軸和y軸的坐標(biāo)軸類型、坐標(biāo)軸刻度、散點(diǎn)大小和顏色等。
var option={
// 圖表標(biāo)題配置
title:{
text:'散點(diǎn)圖'
},
// X 軸配置項
xAxis:{
},
// y 軸配置項
yAxis:{
},
// 系列配置，根據(jù)不同圖表有不同的配置
series:[
{
// 系列名稱，用于tooltip顯示，legend圖例篩選
symbolSize:20,
// 圖表類型
type:'scatter',
// 數(shù)據(jù)內(nèi)容
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
}
]
};
最后，我們可以使用setOption方法將配置應(yīng)用到圖表上。
//使用剛指定的配置項和數(shù)據(jù)顯示圖像
myChart.setOption(option);
到這里，我們已經(jīng)成功地使用echarts繪制了一個散點(diǎn)圖。完整的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flask+echarts項目</title>
<!-- 導(dǎo)入下載的 echarts.min.js -->
<script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart=echarts.init(document.getElementById('main'));
// 自定義圖表的寬高
// var myChart=echarts.init(document.getElementById('main'),null,{width:500,height:400});
// 跟隨瀏覽器的寬度自適應(yīng)圖表大小
// var myChart=echarts.init(document.getElementById('main'));
// window.addEventListener('resize',function(){myChart.resize();});
// 指定圖表的配置項和數(shù)據(jù)
var option={
// 圖表標(biāo)題配置
title:{
text:'散點(diǎn)圖'
},
// X 軸配置項
xAxis:{
},
// y 軸配置項
yAxis:{
},
// 系列配置，根據(jù)不同圖表有不同的配置
series:[
{
// 系列名稱，用于tooltip顯示，legend圖例篩選
symbolSize:20,
// 圖表類型
type:'scatter',
// 數(shù)據(jù)內(nèi)容
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
}
]
};
//使用剛指定的配置項和數(shù)據(jù)顯示圖像
myChart.setOption(option);
</script>
</body>
</html>
效果如下：
希望這篇文章能夠幫助你了解如何使用echarts繪制散點(diǎn)圖。文章來源：http://www.zghlxwxcb.cn/news/detail-463999.html
源碼地址
鏈接：https://pan.baidu.com/s/1jwiBNf-qwadbNg9FJu8UOw?pwd=pd43
提取碼：pd43文章來源地址http://www.zghlxwxcb.cn/news/detail-463999.html
到了這里，關(guān)于分享一下如何使用echarts繪制散點(diǎn)圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
