匯入外部資料（.csv）使用echarts繪圖
- 使用d3匯入外部資料
- 需要的包
- 代碼
- 舉例
使用d3匯入外部資料
echarts是一不錯的可視化工具，大家在用echarts做可視化的時候，可能不太清楚怎么去匯入外部資料（如.csv），尤其對Javascript比較陌生的小白來說（比如我），那么這里介紹一種方法，希望對你們有用，本人由于剛接觸該語言，如果哪里寫錯了，還請大家見諒，
需要的包
1、繪圖必備包：echarts
2、資料匯入包：d3（搜索相關網頁免費下載，也可以直接使用我用的這個d3鏈接：https://d3js.org/d3.v4.min.js）
代碼
1、相關包的匯入：
<head>
<meta charset="UTF-8">
<title>柱狀圖的繪制</title> //圖表標題
<script src ="incubator-echarts-master/dist/echarts.js"></script>//引入echarts包
<script src="https://d3js.org/d3.v4.min.js"></script>//引入d3包
</head>
那么這里的echarts包，我已經下載好了，只需要寫此包的完整路徑就可以了；d3包我沒有下載，我是直接使用鏈接的，
2、如何使用
//獲取csv物件
d3.csv("333.csv",function(error,csvdata){
if(error){
console.log(error);
}else{
for( var i=0; i<csvdata.length; i++ ){
nameset.push(csvdata[i].day); //物件轉陣列
numset1.push(parseFloat(csvdata[i].p50));
numset2.push(parseFloat(csvdata[i].p80));
}
//這里插入需要畫的echarts圖代碼，官網上有更多選擇，
}
})
這里是使用d3的一個基本格式，由于我匯入的是我自己實驗的.csv檔案（333.csv），所以使用d3.csv，大家可以根據需要參考其它格式，
舉例
這里我們以畫一個柱狀圖：
1、資料
2、完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱狀圖的繪制</title>
<script src ="incubator-echarts-master/dist/echarts.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="main" style="height: 600px;width:900px;"></div>
<script>
var nameset=[];//陣列初始化
var numset1=[];
var numset2=[];
//獲取csv物件
d3.csv("333.csv",function(error,csvdata){
if(error){
console.log(error);
}else{
for( var i=0; i<csvdata.length; i++ ){
nameset.push(csvdata[i].day); //物件轉陣列
numset1.push(parseFloat(csvdata[i].p50));
numset2.push(parseFloat(csvdata[i].p80));
}
var myChart = echarts.init(document.getElementById("main"));
var option = {
color: ['#003366', '#006699'],
tooltip: {
trigger: 'axis',
},
legend: {
data: ['p50', 'p80']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
calculable : true,
xAxis: [
{
type: 'category',
data: nameset,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
min: 20,
max: 70,
interval: 10,
}
],
series: [
{
name: 'p50',
type: 'bar',
data: numset1,
color:'#003366'
},
{
name: 'p80',
type: 'bar',
data: numset2,
color:'#006699'
}
]
};
myChart.setOption(option);
}
});
</script>
</body>
</html>
3、效果
雖然圖做得有點不好看，但是大家不要質疑用echarts繪圖，畢竟因為是我做的（嘻嘻），總之，目的達到就行，這種方法供大家參考，當然大家如果有更好的方法可以一起分享，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/193475.html
標籤：python
上一篇：筆試模擬面試題一