云社区 博客 博客详情

导入外部数据使用echarts绘图

CSDN 发表于 2020-10-28 22:51:27 2020-10-28
0
0

【摘要】 导入外部数据(.csv)使用echarts绘图 使用d3导入外部数据需要的包代码举例 使用d3导入外部数据 echarts是一不错的可视化工具,大家在用echarts做可视化的时候,可能不太清楚怎么去导入外部数据(如.csv),尤其对Javascript比较陌生的小白来说(比如我),那么这里介绍一种方法,希望对你们有用。本人由于刚接触该语言,如果哪里...

导入外部数据(.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>

  
  
 
 
  • 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); //对象转数组 numset1.push(parseFloat(csvdata[i].p50)); numset2.push(parseFloat(csvdata[i].p80)); }
//这里插入需要画的echarts图代码,官网上有更多选择。 } })

  
  
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

这里是使用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>

  
  
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95

3、效果
在这里插入图片描述
虽然图做得有点不好看,但是大家不要质疑用echarts绘图,毕竟因为是我做的(嘻嘻)。总之,目的达到就行。这种方法供大家参考,当然大家如果有更好的方法可以一起分享。

文章来源: blog.csdn.net,作者:小水叶心,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/qq_41390184/article/details/109275431

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:前后端分离必备工具:SpringBoot集成Swagger超详细教程

下一篇:Python爬虫入门教程 98-100 帮粉丝写 Python 爬虫之【2020秋季最难的事--约不上的疫苗】

评论 (0)


登录后可评论,请 登录注册

评论