ECharts 打造在线我的简历
Create by jsliang on 2018-12-5 11:48:56
Recently revised in 2018-12-9 22:31:51javascript
Hello 小伙伴们，若是以为本文还不错，记得点个赞或者给个 star，大家的赞和 star 是我编写更多更精彩文章的动力！GitHub 地址css
【2019-08-16】Hello 小伙伴们，因为 jsliang 对文档库进行了重构，这篇文章的一些连接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请须要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。html
互联网冬天？裁人？跳槽？
最近频繁听身边朋友说公司裁人、员工跳槽的事情，而后帮几个还没毕业的小师弟修改了几份简历，结果嘛，enmmm......前端
咱使用 Vue + ECharts + ElementUI 来打造份在线我的简历，并将它部署到 GitHub Pages 上来展现吧！vue
最终成品线上地址：点击查看java
涉及技术：node
- Vue
- Vue-Router
- ECharts
- ElementUI
- HTML/HTML5
- CSS/CSS3
- JavaScript/ES6
一 目录
不折腾的前端，和咸鱼有什么区别webpack
二 前言
返回目录git
在使用 Vue + ECharts 编写公司报表项目的时候，突如其来有个 idea，想到好像能够写个在线简历。
因而，就去作了。
文章中的看法仅表明我的观点，不表明 “最优想法”，请文明评论、科学参考。
若有更好建议，可加 jsliang 的文档库 QQ 群讨论：798961601。
谢谢~github
三 总体搭建
工欲善其事，必先利其器。
在咱们进行愉快折腾以前，咱们须要将代码的环境搭建好，才能如鱼得水，更好地开发。
3.1 基础配置
首先，咱们在指定目录下，经过控制台（终端）新建一个 Vue-Cli 项目：
vue init webpack
而后，咱们使用 npm i 安装 Vue-Cli 的依赖，生成 node_modules 文件夹。
最后，咱们引入 CSS reset，并清理下红框内文件，以后项目变为以下所示：
此刻咱们的一些文件发生了变更：
HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
<style scoped>
</style>
复制代码
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
复制代码
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 引入样式重置
import '../static/css/reset.css'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
复制代码
reset.css
/*
* reset 的目的不是让默认样式在全部浏览器下一致，而是减小默认样式有可能带来的问题。
* The purpose of reset is not to allow default styles to be consistent across all browsers, but to reduce the potential problems of default styles.
* create by jsliang
*/
/** 清除内外边距 - clearance of inner and outer margins **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 结构元素 - structural elements */
dl, dt, dd, ul, ol, li, /* 列表元素 - list elements */
pre, /* 文本格式元素 - text formatting elements */
form, fieldset, legend, button, input, textarea, /* 表单元素 - from elements */
th, td /* 表格元素 - table elements */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 - setting the default font **/
body, button, input, select, textarea {
font: 18px/1.5 '黑体', Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; }
/** 重置列表元素 - reset the list element **/
ul, ol { list-style: none; }
/** 重置文本格式元素 - reset the text format element **/
a, a:hover { text-decoration: none; }
/** 重置表单元素 - reset the form element **/
button { cursor: pointer; }
input { font-size: 18px; outline: none; }
/** 重置表格元素 - reset the table element **/
table { border-collapse: collapse; border-spacing: 0; }
/** 图片自适应 - image responsize **/
img { border: 0; display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; }
/*
* 默认box-sizing是content-box，该属性致使padding会撑大div，使用border-box能够解决该问题
* set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger */ div, input { box-sizing: border-box; } /** 清除浮动 - clear float **/ .jsliang-clear:after, .clear:after { content: '\20'; display: block; height: 0; clear: both; } .jsliang-clear, .clear { *zoom: 1; } /** 设置input的placeholder - set input placeholder **/ input::-webkit-input-placeholder { color: #919191; font-size: .26rem } /* Webkit browsers */ input::-moz-placeholder { color: #919191; font-size: .26rem } /* Mozilla Firefox */ input::-ms-input-placeholder { color: #919191; font-size: .26rem } /* Internet Explorer */ 复制代码
固然，怕小伙伴们嫌麻烦，不想敲代码。
因此 jsliang 直接上传了基础代码，须要的小伙伴直接下载便可：
3.2 安装 ECharts
既然说了用 ECharts 来写，那么，咱们确定要搞下 ECharts 的安装啦~
首先，咱们在项目中安装 ECharts 依赖：
npm i echarts -S
复制代码
而后，你能够选择按需引用仍是全局引用（我的建议使用按需引用）：
- 全局引用
ECharts 初始化应在钩子函数 mounted() 中，这个钩子函数是在 el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用。
项目/src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
复制代码
项目/src/components/HelloWorld.vue
<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
<style scoped>
</style>
复制代码
- 按需引用
若是咱们使用全局引用。将 ECharts 图表打包，会致使体积过大，因此项目中最好按需引入。
在这里咱们使用 requrie 引用而不是 import，是由于 import 必须写全路径，比较麻烦。
项目/src/components/HelloWorld.vue
<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
};
</script>
<style scoped>
</style>
复制代码
最后，咱们只须要 npm run dev 启动项目，打开 localhost:8080 便可：
固然，仅仅带进门，可能小伙伴们还可能会感受懵逼：下一步我要怎么作？
因此，jsliang 顺带讲讲 ECharts 如何上手：
- 照着上面案例敲一遍
- 过一遍它的上手文档：5 分钟上手 ECharts
- 查看它的各类实例，并从本身要作的简单的图作起
- 在步骤 3 中，碰到不懂的属性值，记得随时查看文档：文档 - 配置项手册
如此，小伙伴们就能够更好上手 ECharts 啦~
3.3 安装 ElementUI
考虑到 UI 是我，开发仍是我。
那么，尽情使用 UI 框架吧！这里偷懒用 ElementUI 咯。
而后，为了使项目尽量小巧，jsliang 打算按需引入 ElementUI：
- 安装 ElementUI：
npm i element-ui -S - 安装 babel-plugin-component：
npm i babel-plugin-component -D - 修改 .babelrc：
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
复制代码
- 按需引入
Row与Col：
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 引入样式重置
import '../static/css/reset.css'
// 引入及使用 ElementUI
import {Row, Col} from 'element-ui';
Vue.use(Row).use(Col);
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
复制代码
这样，就能够在项目中使用这两个组件了：
项目/src/components/HelloWorld.vue 代码片断
<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
<el-row>
<el-col :span="8">111</el-col>
<el-col :span="8">222</el-col>
<el-col :span="8">333</el-col>
</el-row>
</div>
</template>
复制代码
3.4 整体配置
该须要的东东，都差很少准备好了。
那么，咱们的简历，长啥样呢？
因为手里木有成品 “参考” 和 “借鉴”，因此去网上看看别人的 ECharts 都长啥样吧：
如图，jsliang 以为这图的布局不错，因此下载下来了它的 png 版本和 psd 版本。
而后，怕小伙伴们不可思议要怎么操做，我用 PS 修改下它的 psd 吧：
很好，这个在线我的简历要怎么作就一目了然了。
下面咱们开始切图仔工做：
首先，建立 7 个 components，并删除 HelloWorld.vue：
jsliang 太懒，名字就懒得想了，从左到右，从上到下，依次命名 7 个框的名字为 PartOne 到 PartSeven 吧。
PartOne.vue 代码示例
<template>
<div>
<p>第一部分</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
复制代码
说到这里，有的小伙伴可能以为复制粘贴或者手写 Vue-Cli 代码特别烦，因此这里推荐使用 VS Code 的插件：
Vue VSCode Snippets。经过在页面上敲：vbase，就能够快速生成 Vue-Cli 的基础代码了。
而后，咱们在 index.js 中定义这些文件，并在 App.vue 引用它们：
项目/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const PartOne = () => import('@/components/PartOne');
const PartTwo = () => import('@/components/PartTwo');
const PartThree = () => import('@/components/PartThree');
const PartFour = () => import('@/components/PartFour');
const PartFive = () => import('@/components/PartFive');
const PartSix = () => import('@/components/PartSix');
const PartSeven = () => import('@/components/PartSeven');
export default new Router({
routes: [
{
path: '/',
components: {
PartOne: PartOne,
PartTwo: PartTwo,
PartThree: PartThree,
PartFour: PartFour,
PartFive: PartFive,
PartSix: PartSix,
PartSeven: PartSeven
}
},
{
path: '/PartOne',
name: 'PartOne',
component: PartOne
},
{
path: '/PartTwo',
name: 'PartTwo',
component: PartTwo
},
{
path: '/PartThree',
name: 'PartThree',
component: PartThree
},
{
path: '/PartFour',
name: 'PartFour',
component: PartFour
},
{
path: '/PartFive',
name: 'PartFive',
component: PartFive
},
{
path: '/PartSix',
name: 'PartSix',
component: PartSix
},
{
path: '/PartSeven',
name: 'PartSeven',
component: PartSeven
},
]
})
复制代码
项目/src/App.vue
<template>
<div class="app" id="app">
<!-- 第一行 -->
<el-row>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
<router-view name="PartOne"/>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="part">
<router-view name="PartTwo"/>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
<router-view name="PartThree"/>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part">
<router-view name="PartFour"/>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part">
<router-view name="PartFive"/>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part">
<router-view name="PartSix"/>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part">
<router-view name="PartSeven"/>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
复制代码
此时，经过 npm run dev，咱们能够在 localhost:8080/#/ 中能够看到咱们已成功进行了布局：
最后，咱们经过 CSS 的渲染，成功实现咱们的整体布局：
此刻的项目结构图：
App.vue
<template>
<div class="app" id="app">
<div class="banner">
<img class="hidden-md-only hidden-lg-only hidden-xl-only" :src="bannerXSSM" alt="banner 图">
<img class="hidden-xs-only hidden-sm-only hidden-lg-only hidden-xl-only" :src="bannerMD" alt="banner 图">
<img class="hidden-xs-only hidden-sm-only hidden-md-only" :src="bannerLGXL" alt="banner 图">
</div>
<!-- 第一行 -->
<el-row>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
<router-view name="PartOne"/>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="part">
<router-view name="PartTwo"/>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
<router-view name="PartThree"/>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part">
<router-view name="PartFour"/>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part">
<router-view name="PartFive"/>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part">
<router-view name="PartSix"/>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part">
<router-view name="PartSeven"/>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
bannerXSSM: require("./assets/img/banner_640.png"),
bannerMD: require("./assets/img/banner_1000.png"),
bannerLGXL: require("./assets/img/banner.png"),
};
}
};
</script>
<style>
body {
background: #011128;
color: #fff;
}
.app {
width: 100%;
}
.part {
padding: 20px;
}
.banner img {
width: 100%;
height: 80px;
}
p {
text-align: center;
}
</style>
复制代码
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 引入样式重置
import '../static/css/reset.css'
// 引入 ElementUI 响应式断点
import 'element-ui/lib/theme-chalk/display.css';
// 引入及使用 ElementUI
import {Row, Col} from 'element-ui';
Vue.use(Row).use(Col);
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
复制代码
PartOne.vue ( PartTwo 及其余 6 个文件雷同)
<template>
<div class="part-one">
<p>第一部分</p>
</div>
</template>
<script>
export default {
name: "partOne"
};
</script>
<style scoped>
.part-one {
width: 100%;
height: 500px;
border: 15px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
</style>
复制代码
这样，咱们就成功完成了高尚的切图仔工做，能够继续下一步咯：
为了防止小伙伴们晕乎，保险起见 jsliang 将整体配置的代码提交到了分支，须要的小伙伴直接下载便可：
四 分步实现
提问：简历通常有什么内容？
回答：
- 基本信息：姓名、工做年限、学历、格言、年龄、联系电话、电子邮箱、GitHub、掘金……
- 求职意向：职位、城市、薪资、准备入职时间……
- 工做经验：……
- 我的技能：熟悉 HTML五、CSS三、JavaScript……
- 教育背景/荣誉证书（这两样没有很出彩的地方的话，jsliang 建议就忽略不写了）
因此，咱们就着这几方面来编写咱们的简历吧~
4.1 part1 - 基本信息
话很少说，先上代码：
PartOne.vue
<template>
<div class="part-one">
<img class="part-one-image" :src="headImage" alt="头像">
<p>姓  名：梁峻荣</p>
<p>学  历：本科</p>
<p>工做年限：1 年</p>
<p>年  龄：23</p>
<p>联系电话：18818881888</p>
<p>电子邮箱：1741020489@qq.com</p>
<p>博  客：<a href="http://jsliang.top">jsliang.top</a></p>
<p>掘  金：<a href="https://juejin.im/user/584613ba128fe10058b3cf68">jsliang</a></p>
<p>GitHub：<a href="https://github.com/LiangJunrong">LiangJunrong</a></p>
</div>
</template>
<script>
export default {
name: "partOne",
data() {
return {
headImage: require('../assets/img/head_image.png')
}
}
};
</script>
<style scoped>
a {
color: deepskyblue;
}
a:hover {
color: rgb(118, 190, 248);
}
p {
line-height: 30px;
}
.part-one {
width: 100%;
height: 500px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
padding-left: 10px;
}
.part-one-image {
width: 150px;
height: 150px;
}
</style>
复制代码
实现效果：
如上，这只是个简单的信息填充，就很少说了。
4.2 part2 - 好友分布
话很少说，先上代码：
PartTwo.vue
<template>
<div class="part-two" id="part-two"></div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引用中国地图
require("echarts/map/js/china.js");
export default {
name: "partTwo",
data() {
return {};
},
mounted() {
this.drawECharts();
},
methods: {
drawECharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById("part-two"));
// 排行前五城市
let myFirendCity = [
{ name: "广州", value: ["113.23", "23.16", "9"] },
{ name: "深圳", value: ["114.07", "22.62", "12"] },
{ name: "上海", value: ["121.48", "31.22", "10"] },
{ name: "西安", value: ["108.95", "34.27", "4"] },
{ name: "北京", value: ["116.46", "39.92", "12"] },
];
// 好友分布省份
let myFriendProvince = [
{ name: "山东", value: 1 },
{ name: "四川", value: 1 },
{ name: "广东", value: 21 },
{ name: "广西", value: 1 },
{ name: "北京", value: 12 },
{ name: "甘肃", value: 1 },
{ name: "上海", value: 10 },
{ name: "陕西", value: 4 },
{ name: "湖北", value: 1 },
{ name: "湖南", value: 1 },
{ name: "山西", value: 1 },
{ name: "辽宁", value: 2 },
{ name: "江苏", value: 1 },
{ name: "河北", value: 3 },
{ name: "海南", value: 1 },
{ name: "河南", value: 1 }
];
myChart.setOption({
// 标题
title: {
text: "前端好友分布",
textStyle: {
color: "#fff"
},
subtext: "微信统计",
subtextStyle: {
color: "#fff"
},
x: "center"
},
// 移动显示
tooltip: {
trigger: "item",
// 鼠标移动过去显示
formatter: function(params) {
if (params.value[2] == undefined) {
if(!params.name) {
return "该地区暂无好友";
} else {
return params.name + " : " + params.value;
}
} else {
return params.name + " : " + params.value[2];
}
}
},
// 左边注记
visualMap: {
text: ["", "好友数"],
min: 0,
max: 30,
// 是否能经过手柄显示
calculable: true,
inRange: {
color: ["#e4e004", "#ff5506", "#ff0000"]
},
textStyle: {
color: "#fff"
}
},
// geo
geo: {
map: "china"
},
// 数据
series: [
// 排行前五城市
{
name: "排行前五",
type: "effectScatter",
coordinateSystem: "geo",
symbolSize: function(val) {
return val[2] * 2;
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
color: "#fff"
}
},
itemStyle: {
normal: {
color: "#ddb926",
shadowBlur: 10,
shadowColor: "#333"
}
},
// 相似于 z-index
zlevel: 1,
data: myFirendCity,
},
// 好友分布省份
{
name: "好友数",
type: "map",
mapType: "china",
// 是否容许缩放
roam: false,
label: {
// 显示省份标签
normal: {
formatter: myFirendCity,
show: false,
textStyle: {
color: "#fff"
}
},
// 对应的鼠标悬浮效果
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 0.5, // 区域边框宽度
borderColor: "#fff", // 区域边框颜色
areaColor: "deepskyblue" // 区域颜色
},
// 对应的鼠标悬浮效果
emphasis: {
borderWidth: 1,
borderColor: "#fff",
areaColor: "#00aeff"
}
},
// 数据
data: myFriendProvince
}
]
});
}
}
};
</script>
<style scoped>
.part-two {
width: 100%;
height: 500px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
</style>
复制代码
实现效果：
首先，咱们引用了 ECharts 及它的中国地图：
let echarts = require("echarts/lib/echarts");
require("echarts/map/js/china.js");
复制代码
而后，咱们初始化 DOM 和数据：
let myChart = echarts.init(document.getElementById("part-two"));
let myFriendData = [
{ name: "山东", value: 1 },
{ name: "四川", value: 1 },
{ name: "广东", value: 21 },
{ name: "广西", value: 1 },
{ name: "北京", value: 12 },
{ name: "甘肃", value: 1 },
{ name: "上海", value: 5 },
{ name: "陕西", value: 4 },
{ name: "湖北", value: 1 },
{ name: "湖南", value: 1 },
{ name: "山西", value: 1 },
{ name: "辽宁", value: 2 },
{ name: "江苏", value: 1 },
{ name: "河北", value: 3 },
{ name: "海南", value: 1 },
{ name: "河南", value: 1 }
];
复制代码
最后，咱们经过 setOption 实现了地图的描绘，上面配置仅是我的配置方法，详细的方法请参考：ECharts 配置。
4.3 part3 - 技能特长
说到简历，还记得以前看过一份，印象特深，由于人家就是用 Word 中用图表展现的。因此，咱也试试：
PartThree.vue
<template>
<div class="part-three" id="part-three"></div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
export default {
name: "partThree",
data() {
return {};
},
mounted() {
this.drawECharts();
},
methods: {
drawECharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById("part-three"));
myChart.setOption({
// 标题
title: {
// 标题文本
text: "技能分布图",
// 标题样式
textStyle: {
color: "#fff"
},
// 标题位置
x: "center"
},
// 移动显示
tooltip: {
trigger: "item",
// 显示文字样式
formatter: "{a} <br/>{b} : {d}%"
},
// 注记
legend: {
x: "center",
y: "bottom",
textStyle: {
color: "#fff"
},
data: [ "HTML5", "CSS3", "JavaScript", "jQuery", "Vue", "Node", "微信小程序", "其余" ]
},
// 注记显示手柄
calculable: true,
// 图形系列
series: [
{
name: "技能分布",
type: "pie",
radius: [30, 110],
roseType: "area",
data: [
{ value: 15, name: "HTML5" },
{ value: 15, name: "CSS3" },
{ value: 20, name: "JavaScript" },
{ value: 20, name: "jQuery" },
{ value: 20, name: "Vue" },
{ value: 15, name: "Node" },
{ value: 25, name: "微信小程序" },
{ value: 15, name: "其余" }
]
}
],
// 颜色调整
color: ['#00bfff', '#00ffdd', '#207ffc', '#00aeff', "#00eeff", "#006eff", "#0099ff", "#0066ff"]
});
}
}
};
</script>
<style scoped>
.part-three {
width: 100%;
height: 500px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
</style>
复制代码
如上，咱们就设置好了：
4.4 part4 - 文章成就
有时候就是想偷懒，也想不起本身还有啥好吹水的了，因而贴个本身的前端文档库的成就吧：
PartFour.vue
<template>
<div class="part-four" id="part-four"></div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
export default {
name: "partFour",
data() {
return {};
},
mounted() {
this.drawECharts();
},
methods: {
drawECharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById("part-four"));
myChart.setOption({
// 标题
title: {
// 标题文本
text: "文章成就统计",
// 标题文本样式
textStyle: {
color: "#fff"
},
// 标题位置
x: "center"
},
// 图形布局
grid: {
// 距离底部高度
bottom: "20"
},
// 横轴
xAxis: {
show: false,
type: "category",
data: ["Github 提交：\n1141", "Github Star数：\n269", "掘金点赞量：\n1508", "掘金关注者：\n234"],
axisLine: {
lineStyle: {
color: "#fff"
}
},
axisLabel: {
// 横轴信息所有显示
interval: 0
}
},
// 纵轴
yAxis: {
type: "value",
axisLine: {
lineStyle: {
color: "#fff"
}
},
axisLabel: {
// 横轴信息所有显示
interval: 0
}
},
// 图形系列
series: [
{
// 图类型
type: "bar",
// 数据
data: [1141, 269, 1508, 234],
// 文本
label: {
show: true,
position: "top",
color: "#fff",
formatter: "{b}"
},
// 柱条样式
itemStyle: {
color: "deepskyblue"
},
zlevel: 1
}
]
});
}
}
};
</script>
<style scoped>
.part-four {
width: 100%;
height: 310px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
</style>
复制代码
4.5 part5 - 前端研发
简历一大重点，就是工做经验啦：
PartFive.vue
<template>
<div :class="partFive">
<h3 class="text-center text-top">工做经验</h3>
<p>
<a href="javascript:void(0)">广州**科技股份有限公司</a>
<span class="text-small">| 2018/05 - 至今</span>
</p>
<p class="text-small">工做内容：平常操做 jQuery 编写活动页、微信小程序、Vue + ECharts 报表制做……</p>
<p class="text-small">项目成就：</p>
<p class="text-small"> 1. 企业宝小程序。使用原生代码进行微信小程序的开发，代码已完成，尚在审核，还没有上线。</p>
<p class="text-small"> 2. ECharts 报表汇总。使用 Vue + ECharts 进行报表设计，正在开发。</p>
<p class="text-small"> 3. jQuery 活动页及 H5 活动页。</p>
</div>
</template>
<script>
export default {
name: "partFive",
data() {
return {
partFive: "part-five",
curWidth: 0
};
},
beforeMount() {
this.curWidth = document.documentElement.clientWidth || document.body.clientWidth;
if(this.curWidth < 1000) {
this.partFive = "part-five-responsive"
}
}
};
</script>
<style scoped>
a {
color: deepskyblue;
}
a:hover {
color: rgb(118, 190, 248);
}
.part-five {
width: 100%;
height: 310px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
.part-five-responsive {
width: 100%;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
.text-center {
text-align: center;
}
.text-small {
font-size: 0.9em;
color: rgb(253, 239, 239);
}
</style>
复制代码
结果显示为：
4.6 part6 - 编程技能
除了工做经验，咱们还须要 show 一下咱们的编程技能都有什么：
PartSix.vue
<template>
<div :class="partSix">
<h3 class="text-center">编程技能</h3>
<p class="font-small"><span class="font-bold">前端：</span>HTML/HTML五、CSS/CSS三、JS/ES六、jQuery、Vue、微信小程序……</p>
<p class="font-small"><span class="font-bold">后端：</span>Node、PHP</p>
<p class="font-small"><span class="font-bold">其余：</span>MongoDB、MySQL、Sqlserver</p>
</div>
</template>
<script>
export default {
name: "partSix",
data() {
return {
partSix: "part-six",
curWidth: 0
};
},
beforeMount() {
this.curWidth = document.documentElement.clientWidth || document.body.clientWidth;
if(this.curWidth < 1000) {
this.partSix = "part-six-responsive"
}
}
};
</script>
<style scoped>
.part-six {
width: 100%;
height: 310px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
.part-six-responsive {
width: 100%;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
.text-center {
text-align: center;
}
.font-small {
font-size: .9em;
}
.font-bold {
font-weight: bold;
color: deepskyblue;
}
</style>
复制代码
成果以下图所示：
4.7 part7 - 求职意向
最后，固然要代表咱们的求职意向，好让 HR 小姐姐知道咱们想要什么啦~
PartSeven.vue
<template>
<div :class="partSeven">
<h3 class="text-center">求职意向</h3>
<p class="text-small"><span class="font-bold">指望职位：</span>前端工程师</p>
<p class="text-small"><span class="font-bold">工做技能：</span>Vue</p>
<p class="text-small"><span class="font-bold">目标城市：</span>广州、深圳、杭州、上海</p>
<p class="text-small"><span class="font-bold">指望薪资：</span>10K - 15K</p>
<p class="text-small"><span class="font-bold">入职时间：</span>随时入职</p>
</div>
</template>
<script>
export default {
name: "partSeven",
data() {
return {
partSeven: "part-seven",
curWidth: 0
};
},
beforeMount() {
this.curWidth = document.documentElement.clientWidth || document.body.clientWidth;
if(this.curWidth < 1000) {
this.partSeven = "part-sevev-responsive"
}
}
};
</script>
<style scoped>
.part-seven {
width: 100%;
height: 310px;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
.part-sevev-responsive {
width: 100%;
border: 40px solid transparent;
border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
background: #18202d;
}
.text-center {
text-align: center;
}
.text-small {
font-size: .9em;
}
.font-bold {
text-align: center;
color: deepskyblue;
}
</style>
复制代码
结果以下图所示：
至此，全部代码编写完毕，偷懒的小伙伴能够去下面地址下载全部代码：
五 总结
最后再看下咱们的最终成品：
OK，到这里，也是时候将这份成品放到咱们的线上啦：
使用 GitHub Pages 和 VuePress 搭建网站
咱们只须要搭建个 GitHub Pages 的帐号，就能够部署这份在线简历咯~
固然 jsliang 有本身的服务器哈，就没使用 GitHub Pages 了，感兴趣的小伙伴能够跟着上面的文章折腾去~
因此，这篇文章就结束啦！
番外：
哈哈，jsliang 已经 预 感 到 了：
你的好友喷子小哥上线啦！
- “哇，这样用 ECharts 的吗？还能不能更 low 点？！”
- “哇，Vue 这样写的吗？你懂不懂 Vue？”
- “哇，……”
enm......因此我无论怎么说，都说不过这些大佬的，因此有的评论就不回复啦，哈哈~
最后，在此祝小伙伴们找到更好的工做~
-
小伙伴们若是以为本文还不错，记得点个赞或者给个 star，大家的赞和 star 是我编写更多更精彩文章的动力！GitHub 地址
-
撰文不易，若是文章对小伙伴有帮助，但愿小伙伴们给勤劳敲代码、辛苦撰文的 jsliang 进行微信/支付宝打赏，大家的每一次打赏都是最好的鼓励，谢谢~
jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/LiangJunron…上的做品创做。
本许可协议受权以外的使用权限能够从 creativecommons.org/licenses/by… 处得到。
相关文章
- 1. VUE2.0+Echarts+Element-ui打造我的简历
- 2. 我打造了一个简历在线生成应用
- 3. bootstrap + Git + 云存储 = 你也可以轻松打造自己的在线简历
- 4. bootstrap + Git + 云存储 = 你也能够轻松打造本身的在线简历
- 5. SSM打造在线网校
- 6. 我的简历
- 7. Java面试我的简历
- 8. 个人我的简历线上版
- 9. 个人在线简历
- 10. 我的简历3
- 更多相关文章...
- • C# 多线程 - C#教程
- • RSS 历史 - RSS 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章