之前写了一个不是在VUE中使用的,链接在下面
https://blog.csdn.net/weixin_43487246/article/details/108379945
现在写一个可以在VUE中使用的,需要的JS和CSS下面链接中有
链接: https://pan.baidu.com/s/1AJorh5h9sq7TlXXqhTr7sQ 提取码: cjxt
首先在index.html中添加,注意一定要在这里添加
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>//这个也需要添加进来
</head>
<body>
<div id="app">
<center>//这里是开始 注意js的路径啊 最好是在static文件夹下面 写自己的路径
<!--<input type="file" hidden id="inputfile" name="fileContent">-->
<svg width="1200" height="800"></svg>
<script type="text/javascript" src="static/js/jquery-3.5.1.js"></script>
<script src="static/js/config.js"></script>
<script src="static/js/imgs.js"></script>
<script src="static/js/color_ranges.js"></script>
<script src="static/js/colors.js"></script>
<script src="static/js/visual.js"></script>
<link rel="stylesheet" href="src/assets/bootstrap3.3.7/css/stylesheet.css">
</center>//这里是结束 添加这一段就可以了
</div>
<!-- built files will be auto injected -->
</body>
</html>
第二步是你要在哪个vue组件里使用就在哪里写以下代码
<template>
<svg width="1000" height="470" ></svg> //具体格式大小位置自己掂量 上面要不要套div看需不需要
</template>
<script>
import "../../assets/bootstrap3.3.7/css/stylesheet.css"//引入css文件样式 写自己的路径
export default {
name: 'Mining',
mounted () {
this.initMap()
},
methods: {
initMap(){
var title="name,type,value,date";
var valueArray = "\n沈阳市,辽宁省,41243,2005/1/1" +
"\n沈阳市,辽宁省,11243,2006/1/1" +
"\n沈阳市,辽宁省,51243,2007/1/1" +
"\n沈阳市,辽宁省,61244,2008/1/1" +
"\n沈阳市,辽宁省,76245,2009/1/1" +
"\n沈阳市,辽宁省,81246,2010/1/1" +
"\n沈阳市,辽宁省,91247,2011/1/1" +
"\n沈阳市,辽宁省,101248,2012/1/1" +
"\n沈阳市,辽宁省,121249,2013/1/1" +
"\n沈阳市,辽宁省,131250,2014/1/1" +
"\n沈阳市,辽宁省,141251,2015/1/1" +
"\n沈阳市,辽宁省,151252,2016/1/1" +
"\n沈阳市,辽宁省,161253,2017/1/1" +
"\n沈阳市,辽宁省,172254,2018/1/1" +
"\n沈阳市,辽宁省,186485,2019/1/1" +
"\n沈阳市,辽宁省,186486,2020/1/1" +
"\n大连市,辽宁省,12412,2005/1/1" +
"\n大连市,辽宁省,43343,2006/1/1" +
"\n大连市,辽宁省,34645,2007/1/1" +
"\n大连市,辽宁省,44646,2008/1/1" +
"\n大连市,辽宁省,54647,2009/1/1" +
"\n大连市,辽宁省,64648,2010/1/1" +
"\n大连市,辽宁省,74649,2011/1/1" +
"\n大连市,辽宁省,84650,2012/1/1" +
"\n大连市,辽宁省,94651,2013/1/1" +
"\n大连市,辽宁省,104652,2014/1/1" +
"\n大连市,辽宁省,124653,2015/1/1" +
"\n大连市,辽宁省,34654,2016/1/1" +
"\n大连市,辽宁省,155555,2017/1/1" +
"\n大连市,辽宁省,155556,2018/1/1" +
"\n大连市,辽宁省,155557,2019/1/1" +
"\n大连市,辽宁省,155558,2020/1/1" +
"\n鞍山市,辽宁省,12312,2005/1/1" +
"\n鞍山市,辽宁省,22312,2006/1/1" +
"\n鞍山市,辽宁省,32312,2007/1/1" +
"\n鞍山市,辽宁省,32313,2008/1/1" +
"\n鞍山市,辽宁省,32314,2009/1/1" +
"\n鞍山市,辽宁省,32315,2010/1/1" +
"\n鞍山市,辽宁省,32316,2011/1/1" +
"\n鞍山市,辽宁省,32317,2012/1/1" +
"\n鞍山市,辽宁省,32318,2013/1/1" +
"\n鞍山市,辽宁省,32319,2014/1/1" +
"\n鞍山市,辽宁省,32320,2015/1/1" +
"\n鞍山市,辽宁省,32321,2016/1/1" +
"\n鞍山市,辽宁省,32322,2017/1/1" +
"\n鞍山市,辽宁省,32323,2018/1/1" +
"\n鞍山市,辽宁省,32324,2019/1/1" +
"\n鞍山市,辽宁省,32325,2020/1/1" +
"\n抚顺市,辽宁省,21412,2005/1/1" +
"\n抚顺市,辽宁省,61412,2006/1/1" +
"\n抚顺市,辽宁省,11412,2007/1/1" +
"\n抚顺市,辽宁省,11413,2008/1/1" +
"\n抚顺市,辽宁省,11414,2009/1/1" +
"\n抚顺市,辽宁省,11415,2010/1/1" +
"\n抚顺市,辽宁省,11416,2011/1/1" +
"\n抚顺市,辽宁省,11417,2012/1/1" +
"\n抚顺市,辽宁省,11418,2013/1/1" +
"\n抚顺市,辽宁省,11419,2014/1/1" +
"\n抚顺市,辽宁省,11420,2015/1/1" +
"\n抚顺市,辽宁省,11421,2016/1/1" +
"\n抚顺市,辽宁省,11422,2017/1/1" +
"\n抚顺市,辽宁省,11423,2018/1/1" +
"\n抚顺市,辽宁省,11424,2019/1/1" +
"\n抚顺市,辽宁省,11425,2020/1/1" +
"\n本溪市,辽宁省,24124,2005/1/1" +
"\n本溪市,辽宁省,23123,2006/1/1" +
"\n本溪市,辽宁省,12311,2007/1/1" +
"\n本溪市,辽宁省,12312,2008/1/1" +
"\n本溪市,辽宁省,12313,2009/1/1" +
"\n本溪市,辽宁省,12314,2010/1/1" +
"\n本溪市,辽宁省,12315,2011/1/1" +
"\n本溪市,辽宁省,12316,2012/1/1" +
"\n本溪市,辽宁省,12317,2013/1/1" +
"\n本溪市,辽宁省,12318,2014/1/1" +
"\n本溪市,辽宁省,12319,2015/1/1" +
"\n本溪市,辽宁省,12320,2016/1/1" +
"\n本溪市,辽宁省,12321,2017/1/1" +
"\n本溪市,辽宁省,12322,2018/1/1" +
"\n本溪市,辽宁省,12323,2019/1/1" +
"\n本溪市,辽宁省,12324,2020/1/1" +
"\n丹东市,辽宁省,41124,2005/1/1" +
"\n丹东市,辽宁省,73123,2006/1/1" +
"\n丹东市,辽宁省,123111,2007/1/1" +
"\n丹东市,辽宁省,123112,2008/1/1" +
"\n丹东市,辽宁省,123113,2009/1/1" +
"\n丹东市,辽宁省,123114,2010/1/1" +
"\n丹东市,辽宁省,123115,2011/1/1" +
"\n丹东市,辽宁省,123116,2012/1/1" +
"\n丹东市,辽宁省,123117,2013/1/1" +
"\n丹东市,辽宁省,123118,2014/1/1" +
"\n丹东市,辽宁省,123119,2015/1/1" +
"\n丹东市,辽宁省,123120,2016/1/1" +
"\n丹东市,辽宁省,123121,2017/1/1" +
"\n丹东市,辽宁省,123122,2018/1/1" +
"\n丹东市,辽宁省,123123,2019/1/1" +
"\n丹东市,辽宁省,123124,2020/1/1" +
"\n锦州市,辽宁省,1051,2005/1/1" +
"\n锦州市,辽宁省,2051,2006/1/1" +
"\n锦州市,辽宁省,3051,2007/1/1" +
"\n锦州市,辽宁省,4051,2008/1/1" +
"\n锦州市,辽宁省,5052,2009/1/1" +
"\n锦州市,辽宁省,6004,2010/1/1" +
"\n锦州市,辽宁省,7581,2011/1/1" +
"\n锦州市,辽宁省,8154,2012/1/1" +
"\n锦州市,辽宁省,9752,2013/1/1" +
"\n锦州市,辽宁省,9841,2014/1/1" +
"\n锦州市,辽宁省,20002,2015/1/1" +
"\n锦州市,辽宁省,25470,2016/1/1" +
"\n锦州市,辽宁省,10054,2017/1/1" +
"\n锦州市,辽宁省,50149,2018/1/1" +
"\n锦州市,辽宁省,76150,2019/1/1" +
"\n锦州市,辽宁省,76151,2020/1/1" +
"\n营口市,辽宁省,15496,2005/1/1" +
"\n营口市,辽宁省,17497,2006/1/1" +
"\n营口市,辽宁省,19498,2007/1/1" +
"\n营口市,辽宁省,14499,2008/1/1" +
"\n营口市,辽宁省,25500,2009/1/1" +
"\n营口市,辽宁省,19501,2010/1/1" +
"\n营口市,辽宁省,18002,2011/1/1" +
"\n营口市,辽宁省,15503,2012/1/1" +
"\n营口市,辽宁省,15504,2013/1/1" +
"\n营口市,辽宁省,15505,2014/1/1" +
"\n营口市,辽宁省,15506,2015/1/1" +
"\n营口市,辽宁省,15507,2016/1/1" +
"\n营口市,辽宁省,15508,2017/1/1" +
"\n营口市,辽宁省,15509,2018/1/1" +
"\n营口市,辽宁省,15510,2019/1/1" +
"\n营口市,辽宁省,15511,2020/1/1" +
"\n阜新市,辽宁省,15496,2005/1/1" +
"\n阜新市,辽宁省,15497,2006/1/1" +
"\n阜新市,辽宁省,15498,2007/1/1" +
"\n阜新市,辽宁省,15499,2008/1/1" +
"\n阜新市,辽宁省,15500,2009/1/1" +
"\n阜新市,辽宁省,15501,2010/1/1" +
"\n阜新市,辽宁省,15502,2011/1/1" +
"\n阜新市,辽宁省,15503,2012/1/1" +
"\n阜新市,辽宁省,15504,2013/1/1" +
"\n阜新市,辽宁省,15505,2014/1/1" +
"\n阜新市,辽宁省,15506,2015/1/1" +
"\n阜新市,辽宁省,15507,2016/1/1" +
"\n阜新市,辽宁省,15508,2017/1/1" +
"\n阜新市,辽宁省,15509,2018/1/1" +
"\n阜新市,辽宁省,15510,2019/1/1" +
"\n阜新市,辽宁省,15511,2020/1/1" +
"\n辽阳市,辽宁省,25500,2005/1/1" +
"\n辽阳市,辽宁省,25501,2006/1/1" +
"\n辽阳市,辽宁省,25502,2007/1/1" +
"\n辽阳市,辽宁省,25503,2008/1/1" +
"\n辽阳市,辽宁省,25504,2009/1/1" +
"\n辽阳市,辽宁省,25505,2010/1/1" +
"\n辽阳市,辽宁省,25506,2011/1/1" +
"\n辽阳市,辽宁省,25507,2012/1/1" +
"\n辽阳市,辽宁省,25508,2013/1/1" +
"\n辽阳市,辽宁省,25509,2014/1/1" +
"\n辽阳市,辽宁省,25510,2015/1/1" +
"\n辽阳市,辽宁省,25511,2016/1/1" +
"\n辽阳市,辽宁省,25512,2017/1/1" +
"\n辽阳市,辽宁省,25513,2018/1/1" +
"\n辽阳市,辽宁省,25514,2019/1/1" +
"\n辽阳市,辽宁省,25515,2020/1/1" +
"\n盘锦市,辽宁省,9841,2005/1/1" +
"\n盘锦市,辽宁省,9842,2006/1/1" +
"\n盘锦市,辽宁省,10843,2007/1/1" +
"\n盘锦市,辽宁省,11844,2008/1/1" +
"\n盘锦市,辽宁省,12845,2009/1/1" +
"\n盘锦市,辽宁省,13846,2010/1/1" +
"\n盘锦市,辽宁省,9847,2011/1/1" +
"\n盘锦市,辽宁省,9848,2012/1/1" +
"\n盘锦市,辽宁省,15849,2013/1/1" +
"\n盘锦市,辽宁省,9850,2014/1/1" +
"\n盘锦市,辽宁省,17851,2015/1/1" +
"\n盘锦市,辽宁省,11852,2016/1/1" +
"\n盘锦市,辽宁省,10853,2017/1/1" +
"\n盘锦市,辽宁省,15854,2018/1/1" +
"\n盘锦市,辽宁省,19855,2019/1/1" +
"\n盘锦市,辽宁省,20856,2020/1/1" +
"\n铁岭市,辽宁省,9847,2005/1/1" +
"\n铁岭市,辽宁省,9848,2006/1/1" +
"\n铁岭市,辽宁省,9849,2007/1/1" +
"\n铁岭市,辽宁省,9850,2008/1/1" +
"\n铁岭市,辽宁省,9851,2009/1/1" +
"\n铁岭市,辽宁省,9852,2010/1/1" +
"\n铁岭市,辽宁省,9853,2011/1/1" +
"\n铁岭市,辽宁省,9854,2012/1/1" +
"\n铁岭市,辽宁省,9855,2013/1/1" +
"\n铁岭市,辽宁省,9856,2014/1/1" +
"\n铁岭市,辽宁省,9857,2015/1/1" +
"\n铁岭市,辽宁省,9858,2016/1/1" +
"\n铁岭市,辽宁省,9859,2017/1/1" +
"\n铁岭市,辽宁省,9860,2018/1/1" +
"\n铁岭市,辽宁省,9861,2019/1/1" +
"\n铁岭市,辽宁省,9862,2020/1/1" +
"\n朝阳市,辽宁省,12845,2005/1/1" +
"\n朝阳市,辽宁省,12846,2006/1/1" +
"\n朝阳市,辽宁省,12847,2007/1/1" +
"\n朝阳市,辽宁省,12848,2008/1/1" +
"\n朝阳市,辽宁省,12849,2009/1/1" +
"\n朝阳市,辽宁省,12850,2010/1/1" +
"\n朝阳市,辽宁省,12851,2011/1/1" +
"\n朝阳市,辽宁省,12852,2012/1/1" +
"\n朝阳市,辽宁省,12853,2013/1/1" +
"\n朝阳市,辽宁省,12854,2014/1/1" +
"\n朝阳市,辽宁省,12855,2015/1/1" +
"\n朝阳市,辽宁省,12856,2016/1/1" +
"\n朝阳市,辽宁省,12857,2017/1/1" +
"\n朝阳市,辽宁省,12858,2018/1/1" +
"\n朝阳市,辽宁省,12859,2019/1/1" +
"\n朝阳市,辽宁省,12860,2020/1/1" +
"\n葫芦岛市,辽宁省,9850,2005/1/1" +
"\n葫芦岛市,辽宁省,9851,2006/1/1" +
"\n葫芦岛市,辽宁省,9852,2007/1/1" +
"\n葫芦岛市,辽宁省,9853,2008/1/1" +
"\n葫芦岛市,辽宁省,9854,2009/1/1" +
"\n葫芦岛市,辽宁省,9855,2010/1/1" +
"\n葫芦岛市,辽宁省,9856,2011/1/1" +
"\n葫芦岛市,辽宁省,9857,2012/1/1" +
"\n葫芦岛市,辽宁省,9858,2013/1/1" +
"\n葫芦岛市,辽宁省,9859,2014/1/1" +
"\n葫芦岛市,辽宁省,9860,2015/1/1" +
"\n葫芦岛市,辽宁省,9861,2016/1/1" +
"\n葫芦岛市,辽宁省,9862,2017/1/1" +
"\n葫芦岛市,辽宁省,9863,2018/1/1" +
"\n葫芦岛市,辽宁省,9864,2019/1/1" +
"\n葫芦岛市,辽宁省,9865,2020/1/1";
var data = title + valueArray;
var fileName = "download.csv";
this.initCsvLink(data,fileName);
},
initCsvLink(data,fileName){
data = "\ufeff"+data;
var blob = new Blob([data], { type: "text/csv,charset=UTF-8"});
var r = new FileReader();
r.readAsText(blob, "UTF-8");
r.onload = function () {
//读取完成后,数据保存在对象的result属性中
var data = d3.csvParse(this.result);
draw(data);
};
},
}
}
</script>
下面是实际样子