导入外部数据（.csv）使用echarts绘图
使用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绘图，毕竟因为是我做的（嘻嘻）。总之，目的达到就行。这种方法供大家参考，当然大家如果有更好的方法可以一起分享。