导入外部数据使用echarts绘图_echarts怎么导入csv文件

作者：小舞很执着 | 2024-06-29 13:53:01

踩

echarts怎么导入csv文件

导入外部数据（.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>
1
2
3
4
5
6

那么这里的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);           1
2
3
4
5
6
7
8
9
10

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/769394