ECharts 打造在线个人简历

Create by jsliang on 2018-12-5 11:48:56
Recently revised in 2018-12-9 22:31:51

 Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更精彩文章的动力！GitHub 地址

 互联网冬天？裁员？跳槽？
 最近频繁听身边朋友说公司裁员、员工跳槽的事情，然后帮几个还没毕业的小师弟修改了几份简历，结果嘛，enmmm......

 咱使用 Vue + ECharts + ElementUI 来打造份在线个人简历，并将它部署到 GitHub Pages 上来展示吧！

 最终成品线上地址：点击查看

 涉及技术：

• Vue
• Vue-Router
• ECharts
• ElementUI
• HTML/HTML5
• CSS/CSS3
• JavaScript/ES6

一 目录

 不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 整体搭建
3.1 基础配置
3.2 安装 ECharts
3.3 安装 ElementUI
3.4 总体配置
四 分步实现
4.1 part1 - 基本信息
4.2 part2 - 好友分布
4.3 part3 - 技能特长
4.4 part4 - 文章成就
4.5 part5 - 工作经验
4.6 part6 - 编程技能
4.7 part7 - 求职意向
五 总结

二 前言

返回目录

 在使用 Vue + ECharts 编写公司报表项目的时候，突如其来有个 idea，想到好像可以写个在线简历。
 于是，就去做了。
 文章中的见解仅代表个人观点，不代表 “最优想法”，请文明评论、科学参考。
 如有更好建议，可加 jsliang 的文档库 QQ 群讨论：798961601。
 谢谢~

三 整体搭建

返回目录

 工欲善其事，必先利其器。
 在我们进行愉快折腾之前，我们需要将代码的环境搭建好，才能如鱼得水，更好地开发。

3.1 基础配置

返回目录

 首先，我们在指定目录下，通过控制台（终端）新建一个 Vue-Cli 项目：

• vue init webpack

 然后，我们使用 npm i 安装 Vue-Cli 的依赖，生成 node_modules 文件夹。
 最后，我们引入 CSS reset，并清理下红框内文件，之后项目变为如下所示：

 此刻我们的一些文件发生了变动：

HelloWorld.vue

复制代码

App.vue

复制代码

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: ''
})
复制代码

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 直接上传了基础代码，需要的小伙伴直接下载即可：

 ECharts 打造在线个人简历分支 - 基础配置

3.2 安装 ECharts

返回目录

 既然说了用 ECharts 来写，那么，我们肯定要搞下 ECharts 的安装啦~

 首先，我们在项目中安装 ECharts 依赖：

npm i echarts -S
复制代码

 然后，你可以选择按需引用还是全局引用（个人建议使用按需引用）：

1. 全局引用

 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: ''
})
复制代码

项目/src/components/HelloWorld.vue

复制代码

2. 按需引用

 如果我们使用全局引用。将 ECharts 图表打包，会导致体积过大，所以项目中最好按需引入。
 在这里我们使用 requrie 引用而不是 import，是因为 import 必须写全路径，比较麻烦。

项目/src/components/HelloWorld.vue

复制代码

 最后，我们只需要 npm run dev 启动项目，打开 localhost:8080 即可：

 当然，仅仅带进门，可能小伙伴们还可能会感觉懵逼：下一步我要怎么做？
 所以，jsliang 顺带讲讲 ECharts 如何上手：

1. 照着上面案例敲一遍
2. 过一遍它的上手文档：5 分钟上手 ECharts
3. 查看它的各种实例，并从自己要做的简单的图做起
4. 在步骤 3 中，碰到不懂的属性值，记得随时查看文档：文档 - 配置项手册

 如此，小伙伴们就可以更好上手 ECharts 啦~

3.3 安装 ElementUI

返回目录

 考虑到 UI 是我，开发还是我。
 那么，尽情使用 UI 框架吧！这里偷懒用 ElementUI 咯。
 然后，为了使项目尽可能小巧，jsliang 打算按需引入 ElementUI：

1. 安装 ElementUI：npm i element-ui -S
2. 安装 babel-plugin-component：npm i babel-plugin-component -D
3. 修改 .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"
      }
    ]
  ]
}
复制代码

4. 按需引入 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: ''
})
复制代码

 这样，就可以在项目中使用这两个组件了：

项目/src/components/HelloWorld.vue 代码片段

复制代码

3.4 总体配置

返回目录

 该需要的东东，都差不多准备好了。
 那么，我们的简历，长啥样呢？
 由于手里木有成品 “参考” 和 “借鉴”，所以去网上看看别人的 ECharts 都长啥样吧：

 如图，jsliang 觉得这图的布局不错，所以下载下来了它的 png 版本和 psd 版本。
 然后，怕小伙伴们难以想象要怎么操作，我用 PS 修改下它的 psd 吧：

 很好，这个在线个人简历要怎么做就一目了然了。

 下面我们开始切图仔工作：

 首先，创建 7 个 components，并删除 HelloWorld.vue：

 jsliang 太懒，名字就懒得想了，从左到右，从上到下，依次命名 7 个框的名字为 PartOne 到 PartSeven 吧。

PartOne.vue 代码示例

复制代码

说到这里，有的小伙伴可能觉得复制粘贴或者手写 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

复制代码

 此时，通过 npm run dev，我们可以在 localhost:8080/#/ 中可以看到我们已成功进行了布局：

 最后，我们通过 CSS 的渲染，成功实现我们的总体布局：

此刻的项目结构图：

App.vue

复制代码

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: ''
})
复制代码

PartOne.vue ( PartTwo 及其他 6 个文件雷同)

复制代码

 这样，我们就成功完成了高尚的切图仔工作，可以继续下一步咯：

 为了防止小伙伴们晕乎，保险起见 jsliang 将总体配置的代码提交到了分支，需要的小伙伴直接下载即可：

 ECharts 打造在线个人简历分支 - 完整配置

四 分步实现

返回目录

 提问：简历一般有什么内容？
 回答：

1. 基本信息：姓名、工作年限、学历、格言、年龄、联系电话、电子邮箱、GitHub、掘金……
2. 求职意向：职位、城市、薪资、准备入职时间……
3. 工作经验：……
4. 个人技能：熟悉 HTML5、CSS3、JavaScript……
5. 教育背景/荣誉证书（这两样没有很出彩的地方的话，jsliang 建议就忽略不写了）

 所以，我们就着这几方面来编写我们的简历吧~

4.1 part1 - 基本信息

返回目录

 话不多说，先上代码：

PartOne.vue

复制代码

 实现效果：

 如上，这只是个简单的信息填充，就不多说了。

4.2 part2 - 好友分布

返回目录

 话不多说，先上代码：

PartTwo.vue

复制代码

 实现效果：

 首先，我们引用了 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

复制代码

 如上，我们就设置好了：

4.4 part4 - 文章成就

返回目录

 有时候就是想偷懒，也想不起自己还有啥好吹水的了，于是贴个自己的前端文档库的成就吧：

PartFour.vue

复制代码

4.5 part5 - 前端研发

返回目录

 简历一大重点，就是工作经验啦：

PartFive.vue

复制代码

 结果显示为：

4.6 part6 - 编程技能

返回目录

 除了工作经验，我们还需要 show 一下我们的编程技能都有什么：

PartSix.vue

复制代码

 成果如下图所示：

4.7 part7 - 求职意向

返回目录

 最后，当然要表明我们的求职意向，好让 HR 小姐姐知道我们想要什么啦~

PartSeven.vue

复制代码

 结果如下图所示：

 至此，所有代码编写完毕，偷懒的小伙伴可以去下面地址下载所有代码：

• ECharts 打造在线个人简历

五 总结

返回目录

 最后再看下我们的最终成品：

 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… 处获得。