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 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章