使用d3导入外部数据

echarts是一不错的可视化工具，你们在用echarts作可视化的时候，可能不太清楚怎么去导入外部数据（如.csv），尤为对Javascript比较陌生的小白来讲（好比我），那么这里介绍一种方法，但愿对大家有用。本人因为刚接触该语言，若是哪里写错了，还请你们见谅。javascript

须要的包

一、绘图必备包：echarts
二、数据导入包：d3（搜索相关网页免费下载，也能够直接使用我用的这个d3连接：https://d3js.org/d3.v4.min.js）
html

代码

一、相关包的导入：java

<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包我没有下载，我是直接使用连接的。apache

二、如何使用数组

//获取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，你们能够根据须要引用其它格式。echarts

举例

这里咱们以画一个柱状图：工具

一、数据spa

二、完整代码rest

<!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>

三、效果

虽然图作得有点很差看，可是你们不要质疑用echarts绘图，毕竟由于是我作的（嘻嘻）。总之，目的达到就行。这种方法供你们参考，固然你们若是有更好的方法能够一块儿分享。

code

导入外部数据使用echarts绘图

导入外部数据（.csv）使用echarts绘图

使用d3导入外部数据

须要的包

代码

举例