teacherMap.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. <template>
  2. <div class="content">
  3. <div class="map">
  4. <div class="my-map">
  5. <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  6. </div>
  7. <div class="chart">
  8. <span>四川省</span>
  9. <p>15854名优秀名师</p>
  10. <div id="Chart" :style="{width: '500px', height: '700px'}"></div>
  11. </div>
  12. </div>
  13. <div class="teacher-show">
  14. <div class="header">
  15. <h1 class="title ">全国名师展示</h1>
  16. <ul class="region">
  17. <li><a href="" class="active" rel="all">全部</a></li>
  18. <li><a href="" rel="330000" class="">浙江省</a></li>
  19. <li><a href="" rel="440000" class="">广东省</a></li>
  20. <li><a href="" rel="210000" class="">辽宁省</a></li>
  21. <li><a href="" rel="350000" class="">福建省</a></li>
  22. </ul>
  23. </div>
  24. <div class="select">
  25. <Select v-model="model1" placeholder="学段" style="width:100px">
  26. <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
  27. </Select>
  28. <Select v-model="model1" placeholder="学科" style="width:100px">
  29. <Option v-for="item in subjectList" :value="item.value" placeholder="学科" :key="item.value">{{ item.label }}</Option>
  30. </Select>
  31. </div>
  32. <div class="content-buttom">
  33. <div class="teacher-item" style="cursor: pointer" v-for="item in teacherList" @click="teacherZone">
  34. <div class="t-title">
  35. <!--<router-link to="/TeacherZone"></router-link>-->
  36. <span>{{item.provice}}</span>
  37. <span>{{item.title}}</span>
  38. </div>
  39. <div class="img-content">
  40. <img :src="item.img" class="th_pto">
  41. </div>
  42. <div class="teacher-info">
  43. <p class="name">{{item.name}}</p>
  44. <div class="subject">
  45. <p>{{item.period}}<span></span>{{item.subject}}</p>
  46. </div>
  47. </div>
  48. <div class="teacher-detailed">
  49. <div class="item">
  50. <p class="number">{{item.number1}}</p>
  51. <p class="txt">{{item.text1}}</p>
  52. </div>
  53. <div class="item">
  54. <p class="number">{{item.number2}}</p>
  55. <p class="txt">{{item.text2}}</p>
  56. </div>
  57. <div class="item">
  58. <p class="number">{{item.number3}}</p>
  59. <p class="txt">{{item.text3}}</p>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="data-view">
  66. <div class="four">
  67. <img src="https://css.huijiaoyun.com/tianyu_edu/html_other_edu/cd_good_school/images/four.png" alt="">
  68. </div>
  69. <div class="resource-data">
  70. <div class="data-item">
  71. <div class="img-content">
  72. <span class="data-view-teacher"></span>
  73. </div>
  74. <p class="data-name">名师总数</p>
  75. <p class="number">13201</p>
  76. </div>
  77. <div class="data-item">
  78. <div class="img-content">
  79. <span class="data-view-member"></span>
  80. </div>
  81. <p class="data-name">成员总数</p>
  82. <p class="number">579260</p>
  83. </div>
  84. <div class="data-item">
  85. <div class="img-content">
  86. <span class="data-view-article"></span>
  87. </div>
  88. <p class="data-name">文章总数</p>
  89. <p class="number">1561686</p>
  90. </div>
  91. <div class="data-item">
  92. <div class="img-content">
  93. <span class="data-view-active"></span>
  94. </div>
  95. <p class="data-name">活动总数</p>
  96. <p class="number">38792</p>
  97. </div>
  98. <div class="data-item">
  99. <div class="img-content">
  100. <span class="data-view-resource"></span>
  101. </div>
  102. <p class="data-name">资源总数</p>
  103. <p class="number">1428690</p>
  104. </div>
  105. <div class="data-item">
  106. <div class="img-content">
  107. <span class="data-view-move"></span>
  108. </div>
  109. <p class="data-name">优课总数</p>
  110. <p class="number">234346</p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </template>
  116. <script>
  117. import echarts from 'echarts'
  118. import '../../static/china.js' // 引入中国地图数据
  119. // import 'echarts/map/js/china.js';
  120. export default {
  121. data() {
  122. return {
  123. chart: null,
  124. data: [],
  125. total: 0,
  126. model1:'',
  127. periodList: [
  128. {
  129. value: 1,
  130. label: '学前'
  131. },
  132. {
  133. value: 2,
  134. label: '小学'
  135. },
  136. {
  137. value: 3,
  138. label: '初中'
  139. },
  140. {
  141. value: 4,
  142. label: '高中'
  143. },
  144. {
  145. value: 5,
  146. label: '中职'
  147. },
  148. ],
  149. subjectList: [
  150. {
  151. value: 1,
  152. label: '语文'
  153. },
  154. {
  155. value: 2,
  156. label: '数学'
  157. },
  158. {
  159. value: 3,
  160. label: '英语'
  161. },
  162. {
  163. value: 4,
  164. label: '生物'
  165. },
  166. {
  167. value:5,
  168. label: '化学'
  169. },
  170. ],
  171. teacherList: [
  172. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people01.jpg'), title: '省级名师', name: '周杨', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500'},
  173. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people02.jpg'), title: '省级名师', name: '李俊峰', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  174. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people04.jpg'),title: '省级名师', name: '王志明', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  175. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people03.jpg'),title: '省级名师', name: '李国强', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  176. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people05.jpg'), title: '省级名师', name: '黄明莉', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  177. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people08.jpg'), title: '省级名师', name: '李章杰', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  178. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people06.jpg'), title: '省级名师', name: '周湾', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  179. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people07.jpg'), title: '省级名师', name: '徐建生', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  180. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people09.jpg'), title: '省级名师', name: '王福生', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  181. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people10.jpg'), title: '省级名师', name: '张凯伦', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  182. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people13.jpg'), title: '省级名师', name: '吴世杰', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  183. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people12.jpg'), title: '省级名师', name: '王先森', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  184. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people11.jpg'), title: '省级名师', name: '李德华', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  185. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people15.jpg'), title: '省级名师', name: '李萌萌', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  186. { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people14.jpg'), title: '省级名师', name: '张梦迪', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
  187. ],
  188. teacherData: [
  189. {
  190. "name": "高新区",
  191. "value": 80
  192. }, {
  193. "name": "青羊区",
  194. "value": 87
  195. }, {
  196. "name": "天府新区",
  197. "value": 60
  198. }, {
  199. "name": "锦江区",
  200. "value": 40
  201. }, {
  202. "name": "金牛区",
  203. "value": 50
  204. }, {
  205. "name": "郫都区",
  206. "value": 30
  207. }, {
  208. "name": "温江区",
  209. "value": 40
  210. }
  211. ]
  212. };
  213. },
  214. mounted() {
  215. this.drawLine();
  216. this.drawChart();
  217. },
  218. methods: {
  219. teacherZone() {
  220. this.$router.push('/TeacherZone')
  221. },
  222. drawLine() {
  223. var mapChart = echarts.init(document.getElementById('myChart'));
  224. // mapChart的配置
  225. var option = {
  226. series: [{
  227. type: 'map',
  228. mapType: 'china',
  229. label: {
  230. normal: {
  231. show: false,//显示省份标签
  232. textStyle: { color: "#141414" }//省份标签字体颜色
  233. },
  234. emphasis: {//对应的鼠标悬浮效果
  235. show: true,
  236. textStyle: { color: "#666" }
  237. }
  238. },
  239. lineStyle: {
  240. normal: {
  241. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  242. offset: 0, color: '#58B3CC'
  243. }, {
  244. offset: 1, color: '#F58158'
  245. }], false),
  246. width: 1,
  247. opacity: 0.5,
  248. curveness: 0.1
  249. }
  250. },
  251. itemStyle: {
  252. normal: {
  253. borderWidth: .5,//区域边框宽度
  254. borderColor: '#666',//区域边框颜色
  255. areaColor: "#fff",//区域颜色
  256. //background-image: linear-gradient(135deg, #f5f7fa 0 %, #c3cfe2 100 %);
  257. },
  258. emphasis: {
  259. borderWidth: .5,
  260. borderColor: '#4b0082',
  261. areaColor: "#008DFF",
  262. }
  263. },
  264. data: [
  265. { name: '四川', selected: true },//福建为选中状态
  266. { name: '广东', selected: true },//福建为选中状态
  267. { name: '湖北', selected: true },//福建为选中状态
  268. ]
  269. }],
  270. }
  271. mapChart.setOption(option);
  272. mapChart.on('click', function (params) {
  273. this.dataIndex = params.dataIndex;
  274. console.log(params);
  275. });
  276. },
  277. drawChart() {
  278. var myChart = echarts.init(document.getElementById('Chart'));
  279. var xData = [],
  280. yData = [];
  281. var min = 50; // 最小值的定义
  282. this.teacherData.map(function (a, b) {
  283. xData.push(a.name);
  284. if (a.value === 0) {
  285. yData.push(a.value + min);
  286. } else {
  287. yData.push(a.value);
  288. }
  289. });
  290. var option = {
  291. //color: ['#3398DB'],
  292. tooltip: {
  293. trigger: 'axis',
  294. axisPointer: {
  295. type: 'line',
  296. lineStyle: {
  297. opacity: 0
  298. }
  299. },
  300. formatter: function (prams) {
  301. return "名师数:" + prams[0].data
  302. }
  303. },
  304. grid: {
  305. left: '0%',
  306. right: '0%',
  307. bottom: '5%',
  308. top: '5%',
  309. height: '50%',
  310. containLabel: true,
  311. z: 22
  312. },
  313. xAxis: [{
  314. type: 'category',
  315. gridIndex: 0,
  316. data: xData,
  317. axisTick: {
  318. alignWithLabel: true
  319. },
  320. axisLine: {
  321. lineStyle: {
  322. color: '#0c3b71'
  323. }
  324. },
  325. axisLabel: {
  326. show: true,
  327. color: 'rgb(170,170,170)',
  328. fontSize: 12
  329. }
  330. }],
  331. yAxis: [{
  332. type: 'value',
  333. gridIndex: 0,
  334. splitLine: {
  335. show: true
  336. },
  337. axisTick: {
  338. show: true
  339. },
  340. max: 150,
  341. axisLine: {
  342. lineStyle: {
  343. color: '#0c3b71'
  344. }
  345. },
  346. axisLabel: {
  347. color: 'rgb(170,170,170)',
  348. formatter: '{value} '
  349. }
  350. },
  351. {
  352. type: 'value',
  353. gridIndex: 0,
  354. max: 200,
  355. }
  356. ],
  357. series: [{
  358. type: 'bar',
  359. barWidth: '20',
  360. xAxisIndex: 0,
  361. yAxisIndex: 0,
  362. itemStyle: {
  363. normal: {
  364. //barBorderRadius: [30, 30, 0, 0],
  365. color: new echarts.graphic.LinearGradient(
  366. 0, 0, 0, 1, [
  367. // {
  368. // offset: 0,
  369. // color: '#00feff'
  370. //},
  371. {
  372. offset: 0.5,
  373. color: '#4da1ff'
  374. },
  375. {
  376. offset: 1,
  377. color: '#4da1ff'
  378. }
  379. ]
  380. )
  381. }
  382. },
  383. data: yData,
  384. zlevel: 11
  385. },
  386. ]
  387. };
  388. myChart.setOption(option);
  389. }
  390. },
  391. }
  392. </script>
  393. <style scoped>
  394. .map {
  395. width: 65%;
  396. height: 600px;
  397. margin:auto;
  398. /*margin-left:150px;*/
  399. padding-left: 250px;
  400. /*background: url("../../assets/image/resource/title-bg.jpg") center 120% no-repeat;*/
  401. background-color:azure;
  402. display:flex;
  403. }
  404. .my-map {
  405. height: 600px;
  406. width: 600px;
  407. /*border: 1px solid red;*/
  408. margin-left: -25%;
  409. }
  410. .chart {
  411. width: 520px;
  412. height: 550px;
  413. margin-top: 3%;
  414. /* border: 1px solid red; */
  415. margin-left: 10%;
  416. box-shadow: 1px 1px 1px 1px lightblue;
  417. background-color: #fff;
  418. }
  419. .header {
  420. width: 100%;
  421. height: 56px;
  422. margin: auto;
  423. -webkit-box-sizing: border-box;
  424. box-sizing: border-box;
  425. border-bottom: 1px solid #e4e4e4;
  426. }
  427. .title {
  428. font-size: 32px;
  429. line-height: 56px;
  430. color: #000;
  431. float:left;
  432. }
  433. .region {
  434. width: 580px;
  435. margin-left: 60px;
  436. float: left;
  437. }
  438. .region li {
  439. float: left;
  440. margin-right: 60px;
  441. margin-top: 12px;
  442. font-weight:700;
  443. font-size: 20px;
  444. list-style:none;
  445. }
  446. .region li a:hover {
  447. color: #1a89e3;
  448. border-bottom: 2px solid #1a89e3;
  449. }
  450. .region li a {
  451. display: inline-block;
  452. line-height: 36px;
  453. color: #888;
  454. padding-bottom: 6px;
  455. }
  456. .teacher-show {
  457. width: 1200px;
  458. height: 1228px;
  459. margin: 45px auto auto;
  460. -webkit-box-sizing: border-box;
  461. box-sizing: border-box;
  462. }
  463. .select {
  464. float: right;
  465. margin-top: -3%;
  466. }
  467. .content-buttom {
  468. width: 1200px;
  469. height: 1228px;
  470. }
  471. .teacher-item {
  472. width: 222px;
  473. height: 313px;
  474. -webkit-box-sizing: border-box;
  475. box-sizing: border-box;
  476. -webkit-border-radius: 4px;
  477. border-radius: 4px;
  478. border: 1px solid #ececec;
  479. -webkit-box-shadow: 1px 1px 10px #ececec;
  480. box-shadow: 1px 1px 10px #ececec;
  481. margin-bottom: 20px;
  482. background: #fff;
  483. float: left;
  484. margin-left: 1%;
  485. margin-top: 1%;
  486. }
  487. .t-title {
  488. display: -webkit-box;
  489. display: -webkit-flex;
  490. display: -ms-flexbox;
  491. display: flex;
  492. -webkit-box-pack: justify;
  493. -webkit-justify-content: space-between;
  494. -ms-flex-pack: justify;
  495. justify-content: space-between;
  496. }
  497. .t-title span {
  498. display: inline-block;
  499. line-height: 20px;
  500. font-size: 16px;
  501. color: #555;
  502. margin: 20px;
  503. }
  504. .img-content {
  505. width: 100%;
  506. height: 100px;
  507. display: -webkit-box;
  508. display: -webkit-flex;
  509. display: -ms-flexbox;
  510. display: flex;
  511. }
  512. .th_pto {
  513. width: 110px;
  514. height: 105px;
  515. border-radius: 50%;
  516. margin-left: -20px;
  517. margin-top: -25px;
  518. position: relative;
  519. }
  520. .teacher-info {
  521. width: 100%;
  522. height: 70px;
  523. text-align: center;
  524. margin-top: 22px;
  525. }
  526. .teacher-info .name {
  527. font-size: 18px;
  528. line-height: 30px;
  529. font-weight: bold;
  530. }
  531. .teacher-info .subject {
  532. width: 116px;
  533. height: 24px;
  534. margin: 0 auto;
  535. -webkit-border-radius: 20px;
  536. border-radius: 20px;
  537. background: -webkit-linear-gradient(left, #a1c4fd, #c2e9fb);
  538. }
  539. .teacher-info .subject p span {
  540. display: inline-block;
  541. width: 4px;
  542. height: 4px;
  543. -webkit-border-radius: 50%;
  544. border-radius: 50%;
  545. margin-top: 10px;
  546. background: #fff;
  547. margin: 3px 6px;
  548. }
  549. .teacher-detailed {
  550. width: 100%;
  551. height: 60px;
  552. margin-top: 8px;
  553. display: -webkit-box;
  554. display: -webkit-flex;
  555. display: -ms-flexbox;
  556. display: flex;
  557. -webkit-justify-content: space-around;
  558. -ms-flex-pack: distribute;
  559. justify-content: space-around;
  560. }
  561. .item .txt {
  562. color: #888;
  563. }
  564. .data-view {
  565. width: 100%;
  566. height: 663px;
  567. overflow: hidden;
  568. background: url('../../assets/image/resource/data-view-bg.png') no-repeat center center;
  569. }
  570. .four {
  571. width: 409px;
  572. height: 248px;
  573. overflow: hidden;
  574. margin: 40px auto;
  575. }
  576. .four img {
  577. width: 409px;
  578. }
  579. .ewm_img {
  580. width: 79.5%;
  581. height: 300px;
  582. text-align: right;
  583. position: absolute;
  584. top: 2128px;
  585. left: 0px;
  586. }
  587. .ewm_img img {
  588. width: 150px;
  589. height: 150px;
  590. }
  591. .ewm_text {
  592. font-size: 17px;
  593. color: #fff;
  594. margin-top: 10px;
  595. }
  596. .resource-data {
  597. width: 1100px;
  598. height: 130px;
  599. -webkit-box-sizing: border-box;
  600. box-sizing: border-box;
  601. margin: 130px auto 0;
  602. display: -webkit-box;
  603. display: -webkit-flex;
  604. display: -ms-flexbox;
  605. display: flex;
  606. -webkit-justify-content: space-around;
  607. -ms-flex-pack: distribute;
  608. justify-content: space-around;
  609. }
  610. .data-item {
  611. width: 130px;
  612. height: 100%;
  613. }
  614. .img-content {
  615. width: 60px;
  616. height: 60px;
  617. margin: 25px auto 17px;
  618. text-align: center;
  619. }
  620. .data-view-teacher {
  621. width: 43px;
  622. height: 51px;
  623. margin-top: 4px;
  624. background: url('../../assets/image/resource/data-view-teacher.png') no-repeat;
  625. }
  626. .data-view-member {
  627. width: 54px;
  628. height: 33px;
  629. margin-top: 13px;
  630. background: url('../../assets/image/resource/data-view-member.png') no-repeat;
  631. }
  632. .data-view-article {
  633. width: 46px;
  634. height: 50px;
  635. margin-top: 4px;
  636. background: url('../../assets/image/resource/data-view-article.png') no-repeat;
  637. }
  638. .data-view-active {
  639. width: 44px;
  640. height: 50px;
  641. margin-top: 4px;
  642. background: url('../../assets/image/resource/data-view-active.png') no-repeat;
  643. }
  644. .data-view-resource {
  645. width: 46px;
  646. height: 50px;
  647. margin-top: 4px;
  648. background: url('../../assets/image/resource/data-view-resource.png') no-repeat;
  649. }
  650. .data-view-move {
  651. width: 52px;
  652. height: 50px;
  653. margin-top: 4px;
  654. background: url('../../assets/image/resource/data-view-move.png') no-repeat;
  655. }
  656. .data-name {
  657. font-size: 18px;
  658. color: #555;
  659. }
  660. .number {
  661. font-size: 24px;
  662. color: #000;
  663. }
  664. </style>