ECharts Создайте онлайн-резюме

внешний интерфейс ECharts

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


 Привет друзья, если вы считаете, что эта статья неплохая, не забудьте поставить лайк или звездочку.Ваши лайки и звездочки мотивируют меня писать все больше и больше интересных статей!Адрес GitHub


 【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки на эту статью могут быть битыми, иjsliangУ меня нет сил поддерживать старые статьи на стороне Nuggets, извините за это. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.


  Интернет зимой? Увольнения? Скачкообразная работа?
В последнее время я часто слышал от своих друзей об увольнениях и смене работы в компании, а затем помог нескольким джуниорам, которые не закончили учебу, изменить несколько резюме.

 Давайте воспользуемся Vue + ECharts + ElementUI для создания онлайн-резюме и развернем его на страницах GitHub для отображения!

  Онлайн-адрес конечного продукта:Нажмите, чтобы просмотреть

 Задействованные технологии:

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

каталог

 Чем отличается передок, который не подбрасывает, от соленой рыбы?

содержание
каталог
2 Предисловие
Три габаритные конструкции
 3.1 Базовая конфигурация
 3.2 Установите электронные карты
 3.3 Установите ElementUI
 3.4 Общая конфигурация
Реализация в четыре шага
 4.1 часть 1 - Основная информация
 4.2 часть 2 - раздача друзей
 4.3 часть 3 - Навыки
 4.4 часть 4 - Статья Достижения
 4.5 часть 5 - опыт работы
 4.6 часть 6 - Навыки программирования
 4.7 часть 7 - намерение поиска работы
5 Резюме

2 Предисловие

Назад к содержанию


 При использовании Vue + ECharts для написания проекта отчета компании у меня внезапно возникла идея, и я подумал, что могу написать онлайн-резюме.
Итак, сделал это.
Мнения в статье представляют собой только личные мнения и не представляют собой «лучшие идеи», пожалуйста, цивилизованные комментарии и научные ссылки.
Если у вас есть лучшие предложения, вы можете добавить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:

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: '<App/>'
})

проект/SRC/компоненты/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>

  1. Цитирование по запросу

  Если мы используем глобальные ссылки. Упаковка диаграмм ECharts приведет к чрезмерному размеру, поэтому лучше вводить их в проект по мере необходимости.
Здесь мы используемrequrieцитата вместоimport,Потому чтоimportПолный путь должен быть записан, что является более хлопотным.

проект/SRC/компоненты/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:

  1. Выбейте его в соответствии с приведенным выше случаем
  2. Просмотрите документацию по началу работы:Начните работу с ECharts за 5 минут
  3. Ознакомьтесь с различными примерами и начните с простой схемы, которую можно сделать самостоятельно.
  4. На шаге 3, если вы столкнулись с непонятным значением атрибута, не забудьте в любое время проверить документацию:Документация - Руководство по элементу конфигурации

 Таким образом, друзья смогут лучше начать работу с ECharts~


3.3 Установите ElementUI

Назад к содержанию


  Учитывая, что пользовательский интерфейс — это я, разработка — это я.
Итак, наслаждайтесь использованием фреймворков пользовательского интерфейса! Мне лень использовать здесь ElementUI.
Затем, чтобы проект был как можно меньше,jsliangСобираюсь представить ElementUI по запросу:

  1. Установите ElementUI:npm i element-ui -S
  2. Установите компонент Babel-плагина: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"
      }
    ]
  ]
}
  1. Внедрить по требованию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/>'
})

  Таким образом, вы можете использовать эти два компонента в своем проекте:

фрагмент кода project/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 Общая конфигурация

Назад к содержанию


 Все, что нужно, почти готово.
Итак, как выглядит наше резюме?
Поскольку на руках есть готовые «референсы» и «референсы», зайдите в интернет, чтобы посмотреть, как выглядят чужие электронные карты:

Как показано,jsliangЯ думаю, что макет этой картинки хорош, поэтому я скачал ее версию в формате png и версию в формате psd.
Тогда, я боюсь, что моим друзьям трудно представить, как работать, позвольте мне изменить его psd с PS:

 Очень хорошо, с первого взгляда понятно, что делать с этим онлайн-резюме.

 Приступим к работе по резке:

 во-первых, создавая 7componentsи удалить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/маршрутизатор/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Кодекс общей конфигурации отправляется в филиал, а небольшие партнеры, которым нужно это может загрузить его напрямую:

 ECharts Create Online Personal Resume Branch — полная конфигурация


Реализация в четыре шага

Назад к содержанию


 задавать вопросы: Что обычно содержит резюме?
отвечать:

  1. Основная информация: имя, годы работы, образование, девиз, возраст, контактный телефон, электронная почта, GitHub, Nuggets...
  2. Цель поиска работы: должность, город, зарплата, время подготовки к поступлению...
  3. опыт работы:……
  4. Личные навыки: Знание HTML5, CSS3, JavaScript…
  5. Образование/почетный аттестат (если эти два не очень выдающиеся,jsliangНе обращайте внимания на это предложение.)

 Итак, давайте напишем наше резюме на основе этих аспектов~


4.1 часть 1 - Основная информация

Назад к содержанию


  Без лишних слов начнем с кода:

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>电子邮箱：1741020489@qq.com</p>
    <p>博&emsp;&emsp;客：<a href="http://jsliang.top">jsliang.top</a></p>
    <p>掘&emsp;&emsp;金：<a href="https://juejin.cn/user/3403743728515246">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 часть 2 - раздача друзей

Назад к содержанию


  Без лишних слов начнем с кода:

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Описание карты реализовано.Вышеупомянутая конфигурация является только личным методом настройки.Для получения подробных методов, пожалуйста, обратитесь к:Конфигурация электронных диаграмм.


4.3 часть 3 - Навыки

Назад к содержанию


 Говоря о резюме, я до сих пор помню, что видел одно раньше, и я был очень впечатлен, потому что люди использовали диаграммы для отображения их в 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 часть 4 - Статья Достижения

Назад к содержанию


 Иногда мне просто хочется полениться, и я не могу вспомнить, что еще мне нужно сделать, поэтому я буду публиковать свои достижения во фронтенд-библиотеке документов:

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, часть 5 - Предварительные исследования и разработки

Назад к содержанию


 Важным пунктом резюме является опыт работы:

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>
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 часть 6 - Навыки программирования

Назад к содержанию


  Помимо опыта работы нам также необходимо показать, какие у нас навыки программирования:

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 часть 7 - намерение поиска работы

Назад к содержанию


  Наконец, конечно, мы должны выразить свое намерение подать заявку на работу, чтобы мисс 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>

  Результат показан ниже:

  На данный момент все коды написаны, ленивые друзья могут перейти по следующему адресу, чтобы скачать все коды:


5 Резюме

Назад к содержанию


  Наконец, взгляните на наш конечный продукт:

 Хорошо, вот и пришло время выложить этот готовый продукт в наш онлайн:

 Создайте веб-сайт с помощью GitHub Pages и VuePress.

 Нам нужно только настроить учетную запись GitHub Pages, чтобы развернуть это онлайн-резюме~
КонечноjsliangУ меня есть собственный сервер, поэтому я больше не использую страницы GitHub. Заинтересованные друзья могут подписаться на статью выше, чтобы бросить ~
Итак, эта статья закончена!


Дополнительный:

Ха-ха,jsliangужедо Чувствовать прибыть охватывать:

 Твой друг тролль в сети!

  • "Вау, а вы пользуетесь такими электронными картами? Можно пониже?!"
  • «Вау, Vue так написан? Ты знаешь Vue?»
  • "Ух ты,……"

 enm... Так что, что бы я ни говорил, я ничего не могу сказать об этих больших парнях, поэтому я не буду отвечать на некоторые комментарии, ха-ха~

 Наконец, я хочу, чтобы мои друзья нашли здесь лучшую работу~

  • Если вы считаете, что эта статья неплохая, не забудьте поставить лайк или звездочку.Ваши лайки и звездочки мотивируют меня писать все больше и больше интересных статей!Адрес GitHub

知识共享许可协议
библиотека документации jsliangЗависит отЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.

Категории