导入外部数据使用echarts绘图

原创

已于 2022-03-26 11:33:50 修改 · 1.2w 阅读

57 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #可视化

于 2020-10-26 11:53:33 首次发布

这篇博客介绍了如何使用d3.js库导入CSV数据，结合echarts进行数据可视化。对于不熟悉JavaScript的读者，提供了一种简单易懂的方法。内容包括所需包的介绍、代码示例以及一个绘制折线图的实例。在VSCode中，需要安装Live Server扩展以运行代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

使用d3导入外部数据

使用d3导入外部数据

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

需要的包

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

代码

Gitee下载：https://gitee.com/zf2788/echarts-plot.git

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