新增程序员工资查询界面

nuxt.config.js

@@ -67,6 +67,10 @@ module.exports = {
 		{ 
 			src: "plugins/vue-swiper.js", 
 			ssr: false 
+		},
+		{
+			src: "plugins/g2.js",
+			ssr: false
 		}
 	],
 	/*

package.json

@@ -12,6 +12,7 @@
     "generate": "cross-env nuxt generate"
   },
   "dependencies": {
+    "@antv/g2": "^3.5.9",
     "@better-scroll/pull-down": "^2.0.0-beta.2",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.1",

pages/salary/_id.vue

@@ -0,0 +1,724 @@
+<template>
+  <div>
+    <div class="wrapper pc" v-if="screenWidth > 960">
+      <div class="title">杭州-产品经理收入水平</div>
+      <div class="subtitle">杭州产品经理平均工资：￥66666/月，取自23212份数据样本，较2018年，减少1.1%，统计来自程序员客栈（proginn.com）</div>
+      <div class="content">
+        <div class="module-wrapper">
+          <div class="module-title">开发者薪资排行城市TOP10</div>
+          <div id="range-chart" class="range-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="average-title">平均工资：￥13000元/月</div>
+          <div class="average-subtitle">最高为16000元/月，最低为10000元/月其中，人工智能行业的产品经理平均工资最高达54363元/月</div>
+          <img class="average-img" src="@/assets/img/salary/average_salary.png" alt="">
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">按行业统计</div>
+          <div id="industry-chart" class="industry-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">按工作经验统计</div>
+          <div id="experience-chart" class="experience-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">按学历统计</div>
+          <div id="education-chart" class="education-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">按各城市岗位需求统计</div>
+          <div id="city-chart" class="city-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">全国城市产品经理平均工资</div>
+          <div class="module-list">
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">北京</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+          </div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">杭州其他岗位平均工资</div>
+          <div class="module-list">
+            <div class="module-item">
+              <div class="module-label">PHP</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">JAVA</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">Python</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">PHP</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">JAVA</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">Python</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">PHP</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">JAVA</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+            <div class="module-item">
+              <div class="module-label">Python</div>
+              <div class="module-line"></div>
+              <div class="module-salary">￥12800元/月</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="wrapper mobile" v-else-if="screenWidth > 0">
+      <div class="title-wrapper">
+        <div class="title">杭州-产品经理收入水平</div>
+        <div class="subtitle">杭州产品经理平均工资：￥66666/月，取自23212份数据样本，较2018年，减少1.1%，统计来自程序员客栈（proginn.com）</div>
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">开发者薪资排行城市TOP10</div>
+        <div id="range-chart" class="range-chart"></div>
+      </div>
+      <div class="module-wrapper">
+        <div class="average-title">平均工资：￥13000元/月</div>
+        <div class="average-subtitle">最高为16000元/月，最低为10000元/月其中，人工智能行业的产品经理平均工资最高达54363元/月</div>
+        <img class="average-img" src="@/assets/img/salary/average_salary.png" alt="">
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">按行业统计</div>
+        <div id="industry-chart" class="industry-chart"></div>
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">按工作经验统计</div>
+        <div id="experience-chart" class="experience-chart"></div>
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">按学历统计</div>
+        <div id="education-chart" class="education-chart"></div>
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">按各城市岗位需求统计</div>
+        <div id="city-chart" class="city-chart"></div>
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">全国城市产品经理平均工资</div>
+        <div class="module-list">
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">北京</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+        </div>
+      </div>
+      <div class="module-wrapper">
+        <div class="module-title">杭州其他岗位平均工资</div>
+        <div class="module-list">
+          <div class="module-item">
+            <div class="module-label">PHP</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">JAVA</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">Python</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">PHP</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">JAVA</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">Python</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">PHP</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">JAVA</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+          <div class="module-item">
+            <div class="module-label">Python</div>
+            <div class="module-line"></div>
+            <div class="module-salary">￥12800元/月</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      screenWidth: 0,
+    }
+  },
+  mounted() {
+    this.screenWidth = window.screen.width
+    this.$nextTick(()=>{
+      this.getRangeChart()
+      this.getIndustryChart()
+      this.getExperienceChart()
+      this.getEducationChart()
+      this.getCityChart()
+    })
+  },
+  methods: {
+    getRangeChart() {
+      const data = [{
+        item: '事例一',
+        count: 40,
+        percent: 0.4
+      }, {
+        item: '事例二',
+        count: 21,
+        percent: 0.21
+      }, {
+        item: '事例三',
+        count: 17,
+        percent: 0.17
+      }, {
+        item: '事例四',
+        count: 13,
+        percent: 0.13
+      }, {
+        item: '事例五',
+        count: 9,
+        percent: 0.09
+      }];
+      const chart = new G2.Chart({
+        container: 'range-chart',
+        forceFit: true,
+        height: 300
+      });
+      chart.source(data, {
+        percent: {
+          formatter: function formatter(val) {
+            val = val * 100 + '%';
+            return val;
+          }
+        }
+      });
+      chart.coord('theta', {
+        radius: 0.75
+      });
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      });
+      chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: function formatter(val, item) {
+          return item.point.item + ': ' + val;
+        }
+      }).tooltip('item*percent', function(item, percent) {
+        percent = percent * 100 + '%';
+        return {
+          name: item,
+          value: percent
+        };
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      });
+      chart.render();
+    },
+    getIndustryChart() {
+      const data = [{
+        industry: '行业一',
+        salary: 23000
+      }, {
+        industry: '行业二',
+        salary: 18000
+      }, {
+        industry: '行业三',
+        salary: 15000
+      }, {
+        industry: '行业四',
+        salary: 13000
+      }, {
+        industry: '行业五',
+        salary: 16000
+      }];
+      const chart = new G2.Chart({
+        container: 'industry-chart',
+        forceFit: true,
+        height: 300
+      });
+      chart.source(data);
+      chart.scale('salary', {
+        min: 0
+      });
+      chart.scale('industry', {
+        range: [0, 1]
+      });
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      });
+      chart.line().position('industry*salary');
+      chart.point().position('industry*salary').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      });
+      chart.render();
+    },
+    getExperienceChart() {
+      const data = [{
+        experience: '第一年',
+        salary: 7887
+      }, {
+        experience: '第二年',
+        salary: 9014
+      }, {
+        experience: '第三年',
+        salary: 12394
+      }, {
+        experience: '第四年',
+        salary: 13098
+      }, {
+        experience: '第五年',
+        salary: 29295
+      }];
+      const chart = new G2.Chart({
+        container: 'experience-chart',
+        forceFit: true,
+        height: 300
+      });
+      chart.source(data);
+      chart.scale('salary', {
+        min: 0
+      });
+      chart.scale('experience', {
+        range: [0, 1]
+      });
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      });
+      chart.line().position('experience*salary');
+      chart.point().position('experience*salary').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      });
+      chart.render();
+    },
+    getEducationChart() {
+      const data = [{
+        education: '高中',
+        salary: 7887
+      }, {
+        education: '大专',
+        salary: 9014
+      }, {
+        education: '本科',
+        salary: 12394
+      }, {
+        education: '硕士',
+        salary: 13098
+      }, {
+        education: '博士',
+        salary: 29295
+      }];
+      const chart = new G2.Chart({
+        container: 'education-chart',
+        forceFit: true,
+        height: 300
+      });
+      chart.source(data);
+      chart.scale('salary', {
+        min: 0
+      });
+      chart.scale('education', {
+        range: [0, 1]
+      });
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      });
+      chart.line().position('education*salary');
+      chart.point().position('education*salary').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      });
+      chart.render();   
+    },
+    getCityChart() {
+      const data = [
+        {
+          city: '北京',
+          salary: 23000
+        }, {
+          city: '上海',
+          salary: 15000
+        }, {
+          city: '深圳',
+          salary: 18000
+        }, {
+          city: '杭州',
+          salary: 13000
+        }, {
+          city: '武汉',
+          salary: 16000
+        }, {
+          city: '长沙',
+          salary: 10000
+        }, {
+          city: '成都',
+          salary: 17000
+        }, {
+          city: '广州',
+          salary: 14000
+        }, {
+          city: '南京',
+          salary: 10000
+        }, {
+          city: '苏州',
+          salary: 24000
+        }
+      ]
+      const chart = new G2.Chart({
+        container: 'city-chart',
+        forceFit: true,
+        height: 300
+      });
+      chart.source(data);
+      chart.scale('salary', {
+        min: 0
+      });
+      chart.scale('city', {
+        range: [0, 1]
+      });
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      });
+      chart.line().position('city*salary');
+      chart.point().position('city*salary').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      });
+      chart.render();  
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.wrapper {
+  overflow: hidden;
+}
+
+.main {
+  margin: 0;
+  width: 100%;
+}
+
+.pc {
+  margin: 10px auto;
+  padding-bottom: 36px;
+  width: 1000px;
+  background-color: #ffffff;
+  .title {
+    margin-top: 30px;
+    margin-left: 18px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #333333;
+  }
+  .subtitle {
+    margin-top: 7px;
+    margin-left: 18px;
+    line-height: 17px;
+    font-size: 12px;
+    color: #999999;
+  }
+  .content {
+    margin-top: 51px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .module-wrapper {
+    overflow: hidden;
+    width: 480px;
+    min-height: 366px;
+    border: 1px solid #EBEBEB;
+  }
+  .module-title {
+    margin-top: 22px;
+    margin-left: 31px;
+    line-height: 25px;
+    font-weight: 600;
+    font-size: 18px;
+    color: #000000;
+  }
+  .range-chart, .industry-chart, .experience-chart, .education-chart, .city-chart {
+    margin-top: 38px;
+    margin-left: -20px;
+  }
+  .average-title {
+    margin-top: 51px;
+    line-height: 28px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 20px;
+    color: #000000;
+  }
+  .average-subtitle {
+    margin: 9px auto 0;
+    width: 422px;
+    line-height: 18px;
+    font-size: 13px;
+    color: #666666;
+  }
+  .average-img {
+    margin: 50px auto 0;
+    display: block;
+    width: 235px;
+    height: 135px;
+  }
+  .module-list {
+    margin-top: 24px;
+    margin-bottom: 10px;
+  }
+  .module-item {
+    display: flex;
+    align-items: center;
+  }
+  .module-label {
+    margin-left: 25px;
+    line-height: 32px;
+    font-weight: 500;
+    font-size: 13px;
+    color: #000000;
+  }
+  .module-line {
+    flex: 1;
+    margin-left: 13px;
+    margin-right: 5px;
+    border-bottom: 1px dashed #BCBCBC;
+  }
+  .module-salary {
+    margin-right: 23px;
+    line-height: 32px;
+    font-size: 12px;
+    color: #666666;
+  }
+}
+
+.mobile {
+  .title-wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 2.38rem;
+    background-color: #ffffff;
+  }
+  .title {
+    margin-top: .54rem;
+    margin-left: .3rem;
+    line-height: .56rem;
+    font-weight: 600;
+    font-size: .4rem;
+    color: #333333;
+  }
+  .subtitle {
+    margin-top: .1rem;
+    margin-left: .3rem;
+    width: 7.04rem;
+    line-height: .34rem;
+    font-size: .24rem;
+    color: #999999;
+  }
+  .module-wrapper {
+    overflow: hidden;
+    margin-top: .12rem;
+    width: 100%;
+    background-color: #ffffff;
+  }
+  .module-title {
+    margin-top: .38rem;
+    margin-left: .36rem;
+    line-height: .44rem;
+    font-weight: 600;
+    font-size: .32rem;
+    color: #000000;
+  }
+  .range-chart, .industry-chart, .experience-chart, .education-chart, .city-chart {
+    margin-top: .38rem;
+    margin-left: -.4rem;
+  }
+  .average-title {
+    margin-top: .38rem;
+    margin-left: .36rem;
+    line-height: .44rem;
+    font-weight: 600;
+    font-size: .32rem;
+    color: #000000;
+  }
+  .average-subtitle {
+    margin: .28rem auto 0;
+    width: 6.76rem;
+    line-height: .36rem;
+    font-size: .24rem;
+    color: #666666;
+  }
+  .average-img {
+    margin: .94rem auto 0;
+    display: block;
+    width: 4.7rem;
+    height: 2.7rem;
+  }
+  .module-list {
+    margin-top: .34rem;
+    margin-bottom: .4rem;
+  }
+  .module-item {
+    display: flex;
+    align-items: center;
+  }
+  .module-label {
+    margin-left: .36rem;
+    line-height: .64rem;
+    font-weight: 500;
+    font-size: .26rem;
+    color: #000000;
+  }
+  .module-line {
+    flex: 1;
+    margin-left: .2rem;
+    margin-right: .1rem;
+    width: 4.44rem;
+    border-bottom: .02rem dashed #BCBCBC;
+  }
+  .module-salary {
+    margin-right: .3rem;
+    line-height: .64rem;
+    font-size: .24rem;
+    color: #666666;
+  }
+}
+</style>

pages/salary/index.vue

@@ -0,0 +1,458 @@
+<template>
+  <div>
+    <div class="wrapper pc" v-if="screenWidth > 960">
+      <div class="header">
+        <div class="title">查岗位薪资 就上程序员客栈</div>
+        <div class="search-wrapper">
+          <div class="search-content">
+            <input type="text" placeholder="请输入您需要查询的岗位名称，如Java" class="search-input">
+            <el-dropdown>
+              <div class="search-city">
+                <span>杭州</span>
+                <img src="@/assets/img/salary/icon_arrow_down.png" alt="">
+              </div>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>杭州</el-dropdown-item>
+                <el-dropdown-item>北京</el-dropdown-item>
+                <el-dropdown-item>上海</el-dropdown-item>
+                <el-dropdown-item>广州</el-dropdown-item>
+                <el-dropdown-item>深圳</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="search-btn">查询</div>
+        </div>
+        <div class="hot-search">热门搜索：<span>项目经理</span><span>Python</span><span>Java</span><span>UI设计师</span><span>iOS开发</span><span>C#</span></div>
+      </div>
+      <div class="content">
+        <div class="info">截至2019年9月6日，调查了全国38749756名开发者的工资数据后发现，上海开发者平均工资最高达￥97974元/月，Python开发者的平均工资最高达66666元/月，本数据仅供参考。</div>
+        <div class="module-wrapper">
+          <div class="module-title">开发者薪资排行城市TOP10</div>
+          <div id="city-chart" class="city-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">开发者薪资岗位TOP10</div>
+          <div id="job-chart" class="job-chart"></div>
+        </div>
+      </div>
+    </div>
+    <div class="wrapper mobile" v-else-if="screenWidth > 0">
+      <div class="header">
+        <div class="title">查岗位薪资<br/>就上程序员客栈</div>
+        <div class="search-wrapper">
+          <div class="search-content">
+            <input type="text" placeholder="岗位名称，如Java" class="search-input">
+            <el-dropdown>
+              <div class="search-city">
+                <span>杭州</span>
+                <img src="@/assets/img/salary/icon_arrow_down.png" alt="">
+              </div>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>杭州</el-dropdown-item>
+                <el-dropdown-item>北京</el-dropdown-item>
+                <el-dropdown-item>上海</el-dropdown-item>
+                <el-dropdown-item>广州</el-dropdown-item>
+                <el-dropdown-item>深圳</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="search-btn">查询</div>
+        </div>
+        <div class="hot-search">热门搜索：<span>项目经理</span><span>Python</span><span>Java</span><span>UI设计师</span><span>iOS开发</span><span>C#</span></div>
+      </div>
+      <div class="content">
+        <div class="info">截至2019年9月6日，调查了全国38749756名开发者的工资数据后发现，上海开发者平均工资最高达￥97974元/月，Python开发者的平均工资最高达66666元/月，本数据仅供参考。</div>
+        <div class="module-wrapper">
+          <div class="module-title">开发者薪资排行城市TOP10</div>
+          <div id="city-chart" class="city-chart"></div>
+        </div>
+        <div class="module-wrapper">
+          <div class="module-title">开发者薪资岗位TOP10</div>
+          <div id="job-chart" class="job-chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      screenWidth: 0,
+    }
+  },
+  mounted() {
+    this.screenWidth = window.screen.width
+    this.$nextTick(()=>{
+      this.getCityChart()
+      this.getJobChart()
+    })
+  },
+  methods: {
+    getCityChart() {
+      const data = [
+        {
+          city: '北京',
+          salary: 23000
+        },
+        {
+          city: '上海',
+          salary: 15000
+        },
+        {
+          city: '深圳',
+          salary: 18000
+        },
+        {
+          city: '杭州',
+          salary: 13000
+        },
+        {
+          city: '武汉',
+          salary: 16000
+        },
+        {
+          city: '长沙',
+          salary: 10000
+        },
+        {
+          city: '成都',
+          salary: 17000
+        },
+        {
+          city: '广州',
+          salary: 14000
+        },
+        {
+          city: '南京',
+          salary: 10000
+        },
+        {
+          city: '苏州',
+          salary: 24000
+        }
+      ]
+      const chart = new G2.Chart({
+        container: 'city-chart',
+        forceFit: true,
+        height: 300,
+      });
+      chart.source(data);
+      chart.scale('salary', {
+        tickInterval: 5000
+      });
+      chart.interval().position('city*salary');
+      chart.render()
+    },
+    getJobChart() {
+      const data = [
+        {
+          job: 'PHP',
+          salary: 23000
+        },
+        {
+          job: 'JAVA',
+          salary: 15000
+        },
+        {
+          job: 'python',
+          salary: 18000
+        },
+        {
+          job: 'ruby',
+          salary: 13000
+        },
+        {
+          job: 'SQL',
+          salary: 16000
+        },
+        {
+          job: 'linux',
+          salary: 10000
+        },
+        {
+          job: 'HTML',
+          salary: 17000
+        },
+        {
+          job: 'C',
+          salary: 14000
+        },
+        {
+          job: '产品经理',
+          salary: 10000
+        },
+        {
+          job: 'UI',
+          salary: 24000
+        }
+      ]
+      const chart = new G2.Chart({
+        container: 'job-chart',
+        forceFit: true,
+        height: 300,
+      });
+      chart.source(data);
+      chart.scale('salary', {
+        tickInterval: 5000
+      });
+      chart.interval().position('job*salary');
+      chart.render()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.wrapper {
+  overflow: hidden;
+}
+
+.main {
+  margin: 0;
+  width: 100%;
+}
+
+.pc {
+  .header {
+    overflow: hidden;
+    width: 100%;
+    height: 450px;
+    background-image: url('~@/assets/img/salary/background.png');
+    background-size: 1920px 533px;
+    background-repeat: no-repeat;
+    background-position: top center;
+  }
+
+  .title {
+    margin-top: 104px;
+    line-height: 53px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 38px;
+    color: #FFFFFF;
+  }
+
+  .search-wrapper {
+    margin-top: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-content {
+    width: 578px;
+    height: 53px;
+    border-radius: 4px 0px 0px 4px;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-input {
+    flex: 1;
+    padding-left: 14px;
+    padding-right: 14px;
+    font-size: 16px;
+    color: #999999;
+  }
+
+  .search-city {
+    margin-right: 18px;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-city span {
+    line-height: 14px;
+    font-weight: 600;
+    font-size: 16px;
+    color: #919AA7;
+  }
+
+  .search-city img {
+    margin-left: 4px;
+    width: 11px;
+    height: 7px;
+  }
+
+  .search-btn {
+    width: 104px;
+    height: 53px;
+    border-radius: 0px 4px 4px 0px;
+    background-color: #147EFF;
+    line-height: 53px;
+    text-align: center;
+    font-weight:600;
+    font-size: 20px;
+    color: #FFFFFF;
+  }
+
+  .hot-search {
+    margin: 15px auto 0;
+    width: 682px;
+    line-height: 20px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  .hot-search span {
+    margin-right: 20px;
+  }
+
+  .content {
+    overflow: hidden;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    background-color: #FFFFFF;
+  }
+
+  .info {
+    margin: 40px auto 0;
+    width: 807px;
+    line-height: 26px;
+    font-size: 15px;
+    color: #666666;
+  }
+
+  .module-wrapper {
+    margin: 50px auto 0;
+    width: 1000px;
+  }
+
+  .module-title {
+    margin-left: 47px;
+    line-height: 25px;
+    font-weight:600;
+    font-size: 18px;
+    color: #000000;
+  }
+
+  .city-chart, .job-chart {
+    margin: 50px auto 0;
+    width: 950px;
+  }
+}
+
+.mobile {
+  .header {
+    overflow: hidden;
+    width: 100%;
+    height: 6.5rem;
+    background-image: url('~@/assets/img/salary/background.png');
+    background-size: auto 6.5rem;
+    background-repeat: no-repeat;
+    background-position: top center;
+  }
+
+  .title {
+    margin-top: 1.16rem;
+    line-height: .92rem;
+    text-align: center;
+    font-weight: 600;
+    font-size: .66rem;
+    color: #FFFFFF;
+  }
+
+  .search-wrapper {
+    margin-top: .66rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-content {
+    width: 5.3rem;
+    height: .85rem;
+    border-radius: .06rem 0 0 .06rem;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-input {
+    flex: 1;
+    padding-left: .22rem;
+    padding-right: .22rem;
+    font-size: .26rem;
+    color: #999999;
+  }
+
+  .search-city {
+    margin-right: .32rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-city span {
+    font-weight: 600;
+    font-size: .26rem;
+    color: #919AA7;
+  }
+
+  .search-city img {
+    margin-left: .06rem;
+    width: .2rem;
+    height: .12rem;
+  }
+
+  .search-btn {
+    width: 1.66rem;
+    height: .85rem;
+    border-radius: .06rem 0 0 .06rem;
+    background-color: #147EFF;
+    line-height: .85rem;
+    text-align: center;
+    font-weight:600;
+    font-size: .32rem;
+    color: #FFFFFF;
+  }
+
+  .hot-search {
+    margin-top: .22rem;
+    margin-left: .26rem;
+    line-height: .34rem;
+    font-weight: 500;
+    font-size: .24rem;
+    color: #FFFFFF;
+  }
+
+  .hot-search span {
+    margin-right: .2rem;
+  }
+
+  .content {
+    overflow: hidden;
+  }
+
+  .info {
+    margin-bottom: .12rem;
+    padding: .5rem .28rem .48rem;
+    background-color: #ffffff;
+    line-height: .44rem;
+    font-size: .26rem;
+    color: #666666;
+  }
+
+  .module-wrapper {
+    overflow: hidden;
+    background-color: #ffffff;
+  }
+
+  .module-title {
+    margin-top: .44rem;
+    margin-left: .36rem;
+    line-height: .44rem;
+    font-weight: 600;
+    font-size: .32rem;
+    color: #000000;
+  }
+
+  .city-chart, .job-chart {
+    margin: .48rem auto 0;
+    width: 100%;
+  }
+}
+</style>

plugins/g2.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import G2 from '@antv/g2'
+ 
+Vue.use(G2)