今年的大数据很火，于是在网上下载了大数据可视化的模板，来练练手，效果如下图
模板
模板是用html写的，文件如图所示：
index.html查看代码，发现有用到jQuery，echarts，canvas和简单的代码，部分代码如下
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<script>
$(window).load(function () {
$(".loading").fadeOut()
})
/****/
$(document).ready(function () {
var whei = $(window).width()
$("html").css({
fontSize: whei / 20
})
$(window).resize(function () {
var whei = $(window).width()
$("html").css({
fontSize: whei / 20
})
});
});
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script language="JavaScript" src="js/js.js"></script>
<body>
<div class="canvas" style="opacity: .2">
<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<script>
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>
</body>
css文件用的是rem进行屏幕适配
但现在想要将其移植到vue中使用，使其变成组件化便于维护的大数据模板。
模板已放入网盘中，有需要自行下载
去下载 提取码: aepn
移植到vue中
1、将所有文件移到vue中
在vue中将模板中的所有文件复制进来，新建页面Charts.vue,将模板中index.html的代码拷贝到Charts.vue中，并将link和script引入的外部文件转换为import引入的形式。代码如下：
<template>
<div>
<div class="head">
<h1>大数据可视化展板通用模板</h1>
<div class="weather">
<img src="/picture/weather.png" />
<span>多云转小雨</span>
<span id="showTime"></span>
</div>
</div>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">模块标题样式</div>
<div class="allnav" id="echart1"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">模块标题样式</div>
<div class="allnav" id="echart2"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div style="height:100%; width: 100%;">
<div class="sy" id="fb1"></div>
<div class="sy" id="fb2"></div>
<div class="sy" id="fb3"></div>
</div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="bar">
<div class="barbox">
<ul class="clearfix">
<li class="pulll_left counter">12581189</li>
<li class="pulll_left counter">3912410</li>
</ul>
</div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">2018年总收入情况</li>
<li class="pulll_left">2018年总支出情况</li>
</ul>
</div>
</div>
<div class="map">
<div class="map1">
<img src="/picture/lbx.png" />
</div>
<div class="map2">
<img src="/picture/jt.png" />
</div>
<div class="map3">
<img src="/picture/map.png" />
</div>
<div class="map4" id="map_1"></div>
</div>
</li>
<li>
<div class="boxall" style="height:3.4rem">
<div class="alltitle">模块标题样式</div>
<div class="allnav" id="echart4"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">模块标题样式</div>
<div class="allnav" id="echart5"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3rem">
<div class="alltitle">模块标题样式</div>
<div class="allnav" id="echart6"></div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import "@/js/china.js";
import chinaMap from "@/js/area_echarts.js";
import {
echarts_1,
echarts_2,
echarts_4,
echarts_31,
echarts_32,
echarts_33,
echarts_5,
echarts_6
} from "@/js/js.js";
export default {
mounted() {
window.onload = function() {
/**屏幕适配**/
document.querySelector("html").style.fontSize =
window.innerWidth / 20 + "px";
window.onresize = function() {
document.querySelector("html").style.fontSize =
window.innerWidth / 20 + "px";
};
/*右上角的时间*/
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
clearTimeout(t); //清除定时器
let dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
document.getElementById("showTime").innerHTML =
y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
echarts_1();
echarts_2();
echarts_4();
echarts_31();
echarts_32();
echarts_33();
echarts_5();
echarts_6();
chinaMap();
};
}
};
</script>
<style scoped>
@import "/css/comon0.css";
</style>
由于没有用jQuery，所以将jQuery代码都转换为js代码，模板中js.js和area_echarts.js文件都是jQuery自调用的方法，所以去掉jQuery后要export导出，import导入，然后在vue中调用方法
2、拆分成组件
根据每个图表建立不同的组件，依次为chart_1.vue,chart_2.vue,chart_3.vue,chart_4.vue,chart_5.vue,chart_6.vue,chart_7.vue,
然后将js.js中的每个图表放入分别放入进去，同时将Charts.vue中的template内的代码放入相应的组件中去，最后将所有组件引入Charts.vue中。
当然也可以将mounted中的代码进行封装，看上去清爽一点。
3、小结
移植代码还算简单，只是在移植的过程中会出现意想不到的问题，耐心点就可以解决；还有就是echarts图表引起的错误，有时在浏览器中的错误提示令人费解，这也是算是小小的坑了，浪费了些时间。
