ECharts 打造線上個人簡歷

阿新 • • 發佈：2018-12-10

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 來打造份線上個人簡歷，並將它部署到免費的伺服器上去吧！

最終成品線上地址：

點選檢視

涉及技術：

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

<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 直接上傳了基礎程式碼，需要的小夥伴直接下載即可：

ECharts 打造線上個人簡歷分支 - 基礎配置

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("[email protected]/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
</style>
複製程式碼

這樣，我們就成功完成了高尚的切圖仔工作，可以繼續下一步咯：

為了防止小夥伴們暈乎，保險起見 jsliang 將總體配置的程式碼提交到了分支，需要的小夥伴直接下載即可：

ECharts 打造線上個人簡歷分支 - 完整配置

四分步實現

返回目錄

提問：簡歷一般有什麼內容？
回答：

基本資訊：姓名、工作年限、學歷、格言、年齡、聯絡電話、電子郵箱、GitHub、掘金……
求職意向：職位、城市、薪資、準備入職時間……
工作經驗：……
個人技能：熟悉 HTML5、CSS3、JavaScript……
教育背景/榮譽證書（這兩樣沒有很出彩的地方的話，jsliang 建議就忽略不寫了）

所以，我們就著這幾方面來編寫我們的簡歷吧~

4.1 part1 - 基本資訊

返回目錄

話不多說，先上程式碼：

PartOne.vue

<template>
  <div class="part-one">
    <img class="part-one-image" :src="headImage" alt="頭像">
    <p>姓&emsp;&emsp;名：樑峻榮</p>
    <p>學&emsp;&emsp;歷：本科</p>
    <p>工作年限：1 年</p>
    <p>年&emsp;&emsp;齡：23</p>
    <p>聯絡電話：18818881888</p>
    <p>電子郵箱：[email protected]</p>
    <p>博&emsp;&emsp;客：<a href="http://jsliang.top">jsliang.top</a></p>
    <p>掘&emsp;&emsp;金：<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("[email protected]/./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("[email protected]/./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("[email protected]/./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("[email protected]/./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">&emsp;1. 企業寶小程式。使用原生程式碼進行微信小程式的開發，程式碼已完成，尚在稽核，尚未上線。</p>
    <p class="text-small">&emsp;2. ECharts 報表彙總。使用 Vue + ECharts 進行報表設計，正在開發。</p>
    <p class="text-small">&emsp;3. jQuery 活動頁及 H5 活動頁。</p>
  </div>
</template>

<script>
exp

 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    ECharts 打造線上個人簡歷
       
 Create by jsliang on 2018-12-5 11:48:56 Recently revised in 2018-12-9 22:31:51 
 
 
 Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更精彩文章的動力！GitHu 

  
 

    

    
    ECharts 打造線上個人簡歷 【升級版】
       
 Create by jsliang on 2018-12-11 10:21:27 Recently revised in 2018-12-11 11:57:43 
 
 
 在發表文章 ECharts 打造線上個人簡歷 （GitHub版 / 掘金版） 後，迎來了各位大佬的吐槽： 
 
 根本沒有一點技術 

  
 

    

    
    個人簡歷
      以及   多種方式   發布系統   數據庫技術   漢族   api   viewer   gis   搭建    
向孝德
31歲 | 漢族 | 7年經驗 | 成都市天府新區 | 13982024327 | [email protected]
求職意向
C#開發或技術主管  全職  成都       

  
 

    

    
    盒子模型折磨人！！！個人簡歷來一份
      mage   post   工作   ont   eat   rep   title   url   doc   
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
 

  
 

    

    
    大學生個人簡歷模板
      簡歷代做   修改簡歷公司   制作代做簡歷需要註意的地方　　一份好的代做簡歷是你走上人生道路起跑線的第一步，要想在眾多的代做簡歷中脫穎而出，首先需要做到的是你的代做簡歷一定要有亮點。根據每個公司的不同所需職位的不同，所做的事情的不同來分別寫代做簡歷，讓你的能力能夠為之所用。其次很多公司都是註重溝通能力和合作 

  
 

    

    
    Leancloud+Valine打造Hexo個人博客極簡評論系統
      ppi   安全中心   安全   郵件   本地   文件   vendor   key   文件路徑   以下配置是基於Next主題6.1.0版本
效果見個人博客的最下方評論。
Leancloud配置
首先訪問Leancloud官網https://leancloud.cn/
有Github賬號的小夥伴可以 

  
 

    

    
    微信小程序|個人簡歷
      最好   維護   成本   使用   未來   打通   功能   體驗   門店   * 基本信息：
姓名：    小程序
性別：    未知
出生年月：2017年1月
民族：    漢
政治面貌：群眾
籍貫：    中國
家族：Tencent
父親：Allen Zhang
兄長：Wechat
 
* D 

  
 

    

    
    用html+css寫一下個人簡歷
      今天練習一下頁面佈局，就用自己的個人簡歷來練手。下面是html部分： 
 
  1 <body>
 2     <div class="content">    
 3         <div class="head">
 4             <h1> 

  
 

    

    
    會計183鄭揚玲個人簡歷
       
  
   
   姓名：鄭揚玲 
   
   
    性別：女  
   
   
   年齡 ：19 
   
   
   學校：廣東交通職業技術學院 
   
   
   專業：會計 
   
   
   興趣愛好：書法 硬筆 
   
   
    職業目標：1三年內拿到想要拿到的證書 

  
 

    

    
    田倩瑜的個人簡歷
                             大家好   我是會計183的田倩瑜。下面是我的個人介紹和今後的規劃。    姓名:田倩瑜  年 

  
 

    

    
    會計183李家豔個人簡歷
       
  
   
   姓名：李家豔 
   
   
    性別：女  
   
   
   學校：廣東交通職業技術學院 
   
   
    專業：會計  
   
   
   興趣愛好：唱歌，聽音樂 
   
   
    職業目標：在畢業之前拿專業所需的證書  
   
   
   生活 

  
 

    

    
    房歆翊的個人簡歷
      大家好，自我認知：我覺得我做事情很有恆心，凡事都要做到最好，在心中有了理想就會有追求的方向，堅持到最後。最不足的就是有點內向，交際能力不強，不善於表達，這也是致命的一點。我興趣愛好喜歡聽歌，但不會唱歌；還比較喜歡運動，比如球類的都喜歡；平時上上網，看看電影，對於學習，通常是前半學期比較積極後半學期就開始懶惰了 

  
 

    

    
    個人簡歷製作過程中應注意的地方
      簡歷作為一個人求職面試的工具，需要大家好好準備，注意其中的問題，才能製作出一份毫無缺陷的精美簡歷。今天小編就將告訴大家個人簡歷製作當中的禁忌，讓大家在今後製作簡歷時，少犯這些錯誤。1.內容不要重複、過多有得人為了讓簡歷看上去內容豐富，就將一個方面的小內容，不斷在簡歷中重複提出，導致簡歷內容十分混亂，讓人看上去 

  
 

    

    
    Python升級3.6 強力Django+殺手級Xadmin打造線上教育平臺 收藏 P
       
 
 前往下載 
 
   第1章 課程介紹 介紹課程目標、通過課程能學習到的內容、和系統開發前需要具備的知識 
   
    1-1 專案演示和課程介紹 
    
   第2章 windows下搭建開發環境 介紹專案開發需要安裝的開發軟體、 python虛擬virtualenv和 virtualen 

  
 

    

    
    植彩霞的個人簡歷
      姓名：植彩霞 
性別：女 
年齡：18 
自我認知：雖然膽量不夠大，但能吃苦耐勞，有責任心，懂得尊重別人，團結友愛，熱愛集體。希望能在學好專業課的基礎上閱讀其它更多的課外書籍，不斷增加新知識，開拓視野，參加更多的社會實踐活動，培養組織能力和社交能力，不斷完善自己，提高自身素質。 
職業目標：先通過考證，拿到所 

  
 

    

    
    精美個人簡歷該如何製作
       
  
  
 個人簡歷是一個在求職面試的過程當中所必備的工具。精美的個人簡歷或許能輕鬆的幫助求職者通過面試，順利成為公司員工。因此在大家在製作個人簡歷時一定要更加認真、仔細。下面小編就教給大家如何製作精美個人簡歷，博得面試官的歡心。  1.寫簡歷內容不要過多 求職簡歷一般來說頁面不會過多，畢竟簡歷只是面試 

  
 

    

    
    4種創意封面個人簡歷模板
       
  
  
 大家在面試的過程中首先做得第一件時間就是將自己的個人簡歷遞給面試官。而面試官接過簡歷第一眼看到得則是簡歷的封面。因此一份優秀的個人簡歷，除了精彩的內容和漂亮的排版之外，獨居創意的封面設計也會給面試官帶來不一樣的感覺。下面就給大家帶來4種創意封面個人簡歷模板。 封面紫色鉛筆個人簡歷Word模板 

  
 

    

    
    個人簡歷封面Word模板分享，給找工作的你
       
  
  
 許多人在找工作的時候，都只是比較注重簡歷內容的填寫，很少會特別重視個人簡歷的封面，其實個人簡歷的封面是比較重要的，人們第一眼看到的就是你的封面，決定了第一印象，那麼個人簡歷封面怎麼做呢？就讓漂亮的小編來給大家分享一個吧，給正在找工作而迷茫的你，想要的話可以點選下面的連結進行下載 http:/ 

  
 

    

    
    ionic學習（九）：ionic3引入echarts及線上測試後複製到專案內
       
 
 參考這裡：https://blog.csdn.net/weixin_36593033/article/details/78087329
 步驟
 1.安裝
 安裝命令：
  npm install echarts --save//下載ECharts
  npm install @types/echa 

  
 

    

    
    用 Python+nginx+django 打造線上家庭影院
       
  
  
 我喜歡看電影，尤其是好的電影，我會看上三四遍，仔細感受電影帶給我的另一種人生體驗，不同時期，不同年齡段看相同的電影，體驗也會不一樣。比如你上學時期看周星馳的電影可能就僅看到了笑點，工作之年之後再看，也許你會覺得這蘊含著深刻的人生哲理。 
 以前下載的電影，放的到處都是，手機上，U 盤裡，平板

ECharts 打造線上個人簡歷

一目錄

二前言

三整體搭建

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 - 前端研發

ECharts 打造線上個人簡歷

ECharts 打造線上個人簡歷【升級版】

個人簡歷

盒子模型折磨人！！！個人簡歷來一份

大學生個人簡歷模板

Leancloud+Valine打造Hexo個人博客極簡評論系統

微信小程序|個人簡歷

用html+css寫一下個人簡歷

會計183鄭揚玲個人簡歷

田倩瑜的個人簡歷

會計183李家豔個人簡歷

房歆翊的個人簡歷

個人簡歷製作過程中應注意的地方

Python升級3.6 強力Django+殺手級Xadmin打造線上教育平臺收藏 P

植彩霞的個人簡歷

精美個人簡歷該如何製作

4種創意封面個人簡歷模板

個人簡歷封面Word模板分享，給找工作的你

ionic學習（九）：ionic3引入echarts及線上測試後複製到專案內

用 Python+nginx+django 打造線上家庭影院