ECharts 打造線上個人簡歷
摘要：
Create by jsliang on 2018-12-5 11:48:56
Recently revised in 2018-12-9 22:31:51
Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更精彩文章的...
Create by jsliang on 2018-12-5 11:48:56
Recently revised in 2018-12-9 22:31:51
Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更精彩文章的動力！ JavaScript/">JavaScript-library%2FECharts%2FCurriculumVitae.md" rel="nofollow,noindex">GitHub/">GitHub 地址
網際網路冬天？裁員？跳槽？
最近頻繁聽身邊朋友說公司裁員、員工跳槽的事情，然後幫幾個還沒畢業的小師弟修改了幾份簡歷，結果嘛，enmmm......
咱使用 Vue + ECharts + ElementUI 來打造份線上個人簡歷，並將它部署到免費的伺服器上去吧！
最終成品線上地址：點選檢視
涉及技術：
一 目錄
不折騰的前端，和鹹魚有什麼區別
| 目錄 |
|---|
二 前言
在使用 Vue + ECharts 編寫公司報表專案的時候，突如其來有個 idea，想到好像可以寫個線上簡歷。
於是，就去做了。
文章中的見解僅代表個人觀點，不代表 “最優想法”，請文明評論、科學參考。
如有更好建議，可加 jsliang 的文件庫 QQ 群討論： 798961601 。
謝謝~
三 整體搭建
工欲善其事，必先利其器。
在我們進行愉快折騰之前，我們需要將程式碼的環境搭建好，才能如魚得水，更好地開發。
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：
npm i element-ui -S npm i babel-plugin-component -D
.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、掘金……
- 求職意向：職位、城市、薪資、準備入職時間……
- 工作經驗：……
- 個人技能：熟悉 HTML5、CSS3、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>電子郵箱：[email protected]</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/HTML5、CSS/CSS3、JS/ES6、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… 處獲得。