proginn-frontend/pages/salary/_id.vue

<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>