TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/teacherMap.vue

<template>
  <div class="content">
    <div class="map">
      <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
    </div>
    <div class="teacher-show">
      <div class="header">
        <h1 class="title ">全国名师展示</h1>
        <ul class="region">
          <li><a href="" class="active" rel="all">全部</a></li>
          <li><a href="" rel="330000" class="">浙江省</a></li>
          <li><a href="" rel="440000" class="">广东省</a></li>
          <li><a href="" rel="210000" class="">辽宁省</a></li>
          <li><a href="" rel="350000" class="">福建省</a></li>
        </ul>
      </div>
      <div class="select">
        <Select v-model="model1" placeholder="学段" style="width:100px">
          <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Select v-model="model1" placeholder="学科" style="width:100px">
          <Option v-for="item in subjectList" :value="item.value" placeholder="学科" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="content-buttom">

        <div class="teacher-item" style="cursor: pointer" v-for="item in teacherList">
          <div class="t-title">
            <span>{{item.provice}}</span>
            <span>
              {{item.title}}
            </span>
          </div>
          <div class="img-content">
            <img src="http://www.wuhaneduyun.cn/uploads/snsPhotos/snscover/2019/0330/262/5c9f1ffb2b06c.png_00494494_200x200.jpg" class="th_pto">
          </div>
          <div class="teacher-info">
            <p class="name">{{item.name}}</p>
            <div class="subject">
              <p>{{item.period}}<span></span>{{item.subject}}</p>
            </div>
          </div>
          <div class="teacher-detailed">
            <div class="item">
              <p class="number">{{item.number1}}</p>
              <p class="txt">{{item.text1}}</p>
            </div>
            <div class="item">
              <p class="number">{{item.number2}}</p>
              <p class="txt">{{item.text2}}</p>
            </div>
            <div class="item">
              <p class="number">{{item.number3}}</p>
              <p class="txt">{{item.text3}}</p>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="data-view">
      <div class="four">
        <img src="https://css.huijiaoyun.com/tianyu_edu/html_other_edu/cd_good_school/images/four.png" alt="">
      </div>
      <div class="resource-data">
        <div class="data-item">
          <div class="img-content">
            <span class="data-view-teacher"></span>
          </div>
          <p class="data-name">名师总数</p>
          <p class="number">13201</p>
        </div>
        <div class="data-item">
          <div class="img-content">
            <span class="data-view-member"></span>
          </div>
          <p class="data-name">成员总数</p>
          <p class="number">579260</p>
        </div>
        <div class="data-item">
          <div class="img-content">
            <span class="data-view-article"></span>
          </div>
          <p class="data-name">文章总数</p>
          <p class="number">1561686</p>
        </div>
        <div class="data-item">
          <div class="img-content">
            <span class="data-view-active"></span>
          </div>
          <p class="data-name">活动总数</p>
          <p class="number">38792</p>
        </div>
        <div class="data-item">
          <div class="img-content">
            <span class="data-view-resource"></span>
          </div>
          <p class="data-name">资源总数</p>
          <p class="number">1428690</p>
        </div>
        <div class="data-item">
          <div class="img-content">
            <span class="data-view-move"></span>
          </div>
          <p class="data-name">优课总数</p>
          <p class="number">234346</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import '../../static/china.js' // 引入中国地图数据
  // import 'echarts/map/js/china.js';
  export default {
    data() {
      return {
        chart: null,
        data: [],
        total: 0,
        model1:'',
        periodList: [
          {
            value: 1,
            label: '学前'
          },
          {
            value: 2,
            label: '小学'
          },
          {
            value: 3,
            label: '初中'
          },
          {
            value: 4,
            label: '高中'
          },
          {
            value: 5,
            label: '中职'
          },
        ],
        subjectList: [
          {
            value: 1,
            label: '语文'
          },
          {
            value: 2,
            label: '数学'
          },
          {
            value: 3,
            label: '英语'
          },
          {
            value: 4,
            label: '生物'
          },
          {
            value:5,
            label: '化学'
          },
        ],
        teacherList: [
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500'},
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },


        ],

        geoCoordMap: {
          "四川省": [104.06, 30.67],
          "陕西省": [108.78, 34.40],
          "浙江省": [120.04, 30.35],
          "广东省": [113.23, 23.22],
          "湖北省": [114.12, 30.76],
          "宁夏回族自治区": [106.09, 38.62],
          "河南省": [113.45, 34.90],
          "黑龙江省": [126.48, 45.99],
          "甘肃省": [103.67, 36.22],
          "河北省": [114.34, 38.22],
          "北京市": [116.40, 39.94],
          "江苏省": [118.72, 32.24],
          "辽宁省": [123.24, 41.95],
          "吉林省": [125.23, 43.90],
          "安徽省": [117.17, 31.99],
          "福建省": [119.16, 26.18],
          "江西省": [115.80, 28.77],
          "山东省": [116.91, 36.81],
          "湖南省": [112.80, 28.47],
          "海南省": [110.18, 19.92],
          "贵州省": [106.49, 26.84],
          "云南省": [102.59, 25.25],
          "青海省": [101.60, 36.75],
          "西藏自治区": [90.97, 29.84],
        },

      };
    },
    mounted() {
      this.drawLine();
    },

    methods: {
      convertData(data) {
        var res = [];
        for (var i = 0; i < 5; i++) {
          var geoCoord = this.geoCoordMap[[i]];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      },
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        var option = {
          backgroundColor: '',
          title: {
            //text: '全国教师使用情况统计图',
            left: 'center',
            top: '8%',
            textStyle: {
              color: 'black',
              fontSize: '22'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + '<br/>' +
                params.seriesName + ": " + params.value[2]
            }
          },
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['全国报名情况'],
            textStyle: {
              color: 'green'
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'white',
                borderColor: '#81ADDC'
              },
              emphasis: {
                areaColor: 'lightgreen'
              }
            }
          },
          series: [
            {
              name: '报名人数',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.convertData(this.data),
              symbolSize: function (val) {
                return val[2] / 4;
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              }
            },
            {
              name: '报名人数',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: this.convertData(this.data.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 5)),
              symbolSize: function (val) {
                return val[2] / 6;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'fill'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 16,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        }
        // 绘制图表
        myChart.setOption(option);
        
      }
    },
    
  }
</script>
<style scoped>
  .map {
    width: 100%;
    height: 600px;
    /*margin-left:150px;*/
    padding-left: 250px;
    background: url("../../assets/image/resource/title-bg.jpg") center 120% no-repeat;
  }
  .header {
    width: 100%;
    height: 56px;
    margin:auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #e4e4e4;
  }
  .title {
    font-size: 32px;
    line-height: 56px;
    color: #000;
    float:left;
  }
  .region {
    width: 580px;
    margin-left: 60px;
    float: left;
  }
   .region li {
    float: left;
    margin-right: 60px;
    margin-top: 12px;
    font-weight:700;
    font-size: 20px;
    list-style:none;
  }
    .region li a:hover {
      color: #1a89e3;
      border-bottom: 2px solid #1a89e3;
    }
    .region li a {
      display: inline-block;
      line-height: 36px;
      color: #888;
      padding-bottom: 6px;
    }
  .teacher-show {
    width: 1200px;
    height: 1228px;
    margin: 45px auto auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .select {
    float: right;
    margin-top: -3%;
  }
  .content-buttom {
    width: 1200px;
    height: 1228px;
  }
  .teacher-item {
    width: 222px;
    height: 313px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ececec;
    -webkit-box-shadow: 1px 1px 10px #ececec;
    box-shadow: 1px 1px 10px #ececec;
    margin-bottom: 20px;
    background: #fff;
    float: left;
    margin-left: 1%;
    margin-top: 1%;
  }
  .t-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
    .t-title span {
      display: inline-block;
      line-height: 20px;
      font-size: 16px;
      color: #555;
      margin: 20px;
    }
   .img-content {
    width: 100%;
    height: 100px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .th_pto {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
  }
  .teacher-info {
    width: 100%;
    height: 70px;
    text-align: center;
    margin-top: 22px;
  }
    .teacher-info .name {
      font-size: 18px;
      line-height: 30px;
      font-weight: bold;
    }
    .teacher-info .subject {
      width: 116px;
      height: 24px;
      margin: 0 auto;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      background: -webkit-gradient(linear, left top, right top, from(#29cff7), to(#4ae3c7));
      background: -webkit-linear-gradient(left, #29cff7, #4ae3c7);
      background: -o-linear-gradient(left, #29cff7, #4ae3c7);
      background: linear-gradient(to right, #29cff7, #4ae3c7);
    }
      .teacher-info .subject p span {
        display: inline-block;
        width: 4px;
        height: 4px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        margin-top: 10px;
        background: #fff;
        margin: 3px 6px;
      }
  .teacher-detailed {
    width: 100%;
    height: 60px;
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
   .item .txt {
    color: #888;
  }
  .data-view {
    width: 100%;
    height: 663px;
    overflow: hidden;
    background: url('../../assets/image/resource/data-view-bg.png') no-repeat center center;
  }
  .four {
    width: 409px;
    height: 248px;
    overflow: hidden;
    margin: 40px auto;
  }
    .four img {
      width: 409px;
    }
  .ewm_img {
    width: 79.5%;
    height: 300px;
    text-align: right;
    position: absolute;
    top: 2128px;
    left: 0px;
  }
    .ewm_img img {
      width: 150px;
      height: 150px;
    }
  .ewm_text {
    font-size: 17px;
    color: #fff;
    margin-top: 10px;
  }
  .resource-data {
    width: 1100px;
    height: 130px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 130px auto 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .data-item {
    width: 130px;
    height: 100%;
  }
  .img-content {
    width: 60px;
    height: 60px;
    margin: 25px auto 17px;
    text-align: center;
  }
  .data-view-teacher {
    width: 43px;
    height: 51px;
    margin-top: 4px;
    background: url('../../assets/image/resource/data-view-teacher.png') no-repeat;
  }
  .data-view-member {
    width: 54px;
    height: 33px;
    margin-top: 13px;
    background: url('../../assets/image/resource/data-view-member.png') no-repeat;
  }
  .data-view-article {
    width: 46px;
    height: 50px;
    margin-top: 4px;
    background: url('../../assets/image/resource/data-view-article.png') no-repeat;
  }
  .data-view-active {
    width: 44px;
    height: 50px;
    margin-top: 4px;
    background: url('../../assets/image/resource/data-view-active.png') no-repeat;
  }
  .data-view-resource {
    width: 46px;
    height: 50px;
    margin-top: 4px;
    background: url('../../assets/image/resource/data-view-resource.png') no-repeat;
  }
  .data-view-move {
    width: 52px;
    height: 50px;
    margin-top: 4px;
    background: url('../../assets/image/resource/data-view-move.png') no-repeat;
  }
  .data-name {
    font-size: 18px;
    color: #555;
  }
  .number {
    font-size: 24px;
    color: #000;
  }

</style>