导入外部数据使用echarts绘图

导入外部数据(.csv)使用echarts绘图

使用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);           
  • 22
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

莫小封

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值