|
|
@@ -1,13 +1,20 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="map">
|
|
|
+ <span class="map-pro">四川省</span>
|
|
|
+
|
|
|
<div class="my-map">
|
|
|
<div id="myChart" :style="{width: '600px', height: '600px'}"></div>
|
|
|
</div>
|
|
|
<div class="chart">
|
|
|
- <span>四川省</span>
|
|
|
- <p>15854名优秀名师</p>
|
|
|
- <div id="Chart" :style="{width: '500px', height: '700px'}"></div>
|
|
|
+ <h1>15854</h1><h2>个</h2>
|
|
|
+ <span>名师工作室</span>
|
|
|
+ <ul>
|
|
|
+ <li><span>5215人</span><span>一线教师</span></li>
|
|
|
+ <li><span>5215个</span><span>资源</span></li>
|
|
|
+ <li><span>54546次</span><span>关注度</span></li>
|
|
|
+ </ul>
|
|
|
+ <!--<div id="Chart" :style="{width: '500px', height: '700px'}"></div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="teacher-show">
|
|
|
@@ -236,7 +243,7 @@
|
|
|
},
|
|
|
mounted() {
|
|
|
this.drawLine();
|
|
|
- this.drawChart();
|
|
|
+ //this.drawChart();
|
|
|
this.teacherList = this.teacher.datazt;
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -309,120 +316,120 @@
|
|
|
console.log(params);
|
|
|
});
|
|
|
},
|
|
|
- drawChart() {
|
|
|
- var myChart = echarts.init(document.getElementById('Chart'));
|
|
|
- var xData = [],
|
|
|
- yData = [];
|
|
|
- var min = 50; // 最小值的定义
|
|
|
- this.teacherData.map(function (a, b) {
|
|
|
- xData.push(a.name);
|
|
|
- if (a.value === 0) {
|
|
|
- yData.push(a.value + min);
|
|
|
- } else {
|
|
|
- yData.push(a.value);
|
|
|
- }
|
|
|
- });
|
|
|
- var option = {
|
|
|
- //color: ['#3398DB'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'line',
|
|
|
- lineStyle: {
|
|
|
- opacity: 0
|
|
|
- }
|
|
|
- },
|
|
|
- formatter: function (prams) {
|
|
|
- return "名师数：" + prams[0].data
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '0%',
|
|
|
- right: '0%',
|
|
|
- bottom: '5%',
|
|
|
- top: '5%',
|
|
|
- height: '50%',
|
|
|
- containLabel: true,
|
|
|
- z: 22
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- gridIndex: 0,
|
|
|
- data: xData,
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#0c3b71'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- color: 'rgb(170,170,170)',
|
|
|
- fontSize: 12
|
|
|
- }
|
|
|
- }],
|
|
|
- yAxis: [{
|
|
|
- type: 'value',
|
|
|
- gridIndex: 0,
|
|
|
- splitLine: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- max: 150,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#0c3b71'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: 'rgb(170,170,170)',
|
|
|
- formatter: '{value} '
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- gridIndex: 0,
|
|
|
- max: 200,
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- type: 'bar',
|
|
|
- barWidth: '20',
|
|
|
- xAxisIndex: 0,
|
|
|
- yAxisIndex: 0,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- //barBorderRadius: [30, 30, 0, 0],
|
|
|
- color: new echarts.graphic.LinearGradient(
|
|
|
- 0, 0, 0, 1, [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: '#00feff'
|
|
|
- //},
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: '#4da1ff'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#4da1ff'
|
|
|
- }
|
|
|
- ]
|
|
|
- )
|
|
|
- }
|
|
|
- },
|
|
|
- data: yData,
|
|
|
- zlevel: 11
|
|
|
+ //drawChart() {
|
|
|
+ // var myChart = echarts.init(document.getElementById('Chart'));
|
|
|
+ // var xData = [],
|
|
|
+ // yData = [];
|
|
|
+ // var min = 50; // 最小值的定义
|
|
|
+ // this.teacherData.map(function (a, b) {
|
|
|
+ // xData.push(a.name);
|
|
|
+ // if (a.value === 0) {
|
|
|
+ // yData.push(a.value + min);
|
|
|
+ // } else {
|
|
|
+ // yData.push(a.value);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // var option = {
|
|
|
+ // //color: ['#3398DB'],
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: 'axis',
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'line',
|
|
|
+ // lineStyle: {
|
|
|
+ // opacity: 0
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // formatter: function (prams) {
|
|
|
+ // return "名师数：" + prams[0].data
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // grid: {
|
|
|
+ // left: '0%',
|
|
|
+ // right: '0%',
|
|
|
+ // bottom: '5%',
|
|
|
+ // top: '5%',
|
|
|
+ // height: '50%',
|
|
|
+ // containLabel: true,
|
|
|
+ // z: 22
|
|
|
+ // },
|
|
|
+ // xAxis: [{
|
|
|
+ // type: 'category',
|
|
|
+ // gridIndex: 0,
|
|
|
+ // data: xData,
|
|
|
+ // axisTick: {
|
|
|
+ // alignWithLabel: true
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#0c3b71'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // show: true,
|
|
|
+ // color: 'rgb(170,170,170)',
|
|
|
+ // fontSize: 12
|
|
|
+ // }
|
|
|
+ // }],
|
|
|
+ // yAxis: [{
|
|
|
+ // type: 'value',
|
|
|
+ // gridIndex: 0,
|
|
|
+ // splitLine: {
|
|
|
+ // show: true
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: true
|
|
|
+ // },
|
|
|
+ // max: 150,
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#0c3b71'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // color: 'rgb(170,170,170)',
|
|
|
+ // formatter: '{value} '
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 'value',
|
|
|
+ // gridIndex: 0,
|
|
|
+ // max: 200,
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ // series: [{
|
|
|
+ // type: 'bar',
|
|
|
+ // barWidth: '20',
|
|
|
+ // xAxisIndex: 0,
|
|
|
+ // yAxisIndex: 0,
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // //barBorderRadius: [30, 30, 0, 0],
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1, [
|
|
|
+ // // {
|
|
|
+ // // offset: 0,
|
|
|
+ // // color: '#00feff'
|
|
|
+ // //},
|
|
|
+ // {
|
|
|
+ // offset: 0.5,
|
|
|
+ // color: '#4da1ff'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: '#4da1ff'
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: yData,
|
|
|
+ // zlevel: 11
|
|
|
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
+ // },
|
|
|
+ // ]
|
|
|
+ // };
|
|
|
+ // myChart.setOption(option);
|
|
|
+ //}
|
|
|
},
|
|
|
|
|
|
}
|
|
|
@@ -431,28 +438,56 @@
|
|
|
.map {
|
|
|
width: 65%;
|
|
|
height: 600px;
|
|
|
- margin:auto;
|
|
|
+ margin: auto;
|
|
|
/*margin-left:150px;*/
|
|
|
padding-left: 250px;
|
|
|
- /*background: url("../../assets/image/resource/title-bg.jpg") center 120% no-repeat;*/
|
|
|
- background-color:azure;
|
|
|
- display:flex;
|
|
|
+ background: url("../../assets/image/resource/map-bg.png") no-repeat;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ /*display:flex;*/
|
|
|
+ }
|
|
|
+ .map-pro {
|
|
|
+ display: block;
|
|
|
+ padding-top: 13%;
|
|
|
+ margin-left: 2%;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: orangered;
|
|
|
}
|
|
|
.my-map {
|
|
|
height: 600px;
|
|
|
width: 600px;
|
|
|
/*border: 1px solid red;*/
|
|
|
- margin-left: -25%;
|
|
|
+ /*text-align: right;*/
|
|
|
+ margin-top: -15%;
|
|
|
+ margin-left: 25%;
|
|
|
}
|
|
|
.chart {
|
|
|
- width: 520px;
|
|
|
- height: 550px;
|
|
|
- margin-top: 3%;
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ margin-top: -35%;
|
|
|
/* border: 1px solid red; */
|
|
|
- margin-left: 10%;
|
|
|
- box-shadow: 1px 1px 1px 1px lightblue;
|
|
|
- background-color: #fff;
|
|
|
+ margin-left: -18%;
|
|
|
+ }
|
|
|
+ .chart h1{
|
|
|
+ color:coral;
|
|
|
}
|
|
|
+ .chart h2 {
|
|
|
+ display: block;
|
|
|
+ margin-top: -10%;
|
|
|
+ margin-left: 25%;
|
|
|
+ }
|
|
|
+ .chart ul {
|
|
|
+ list-style:none;
|
|
|
+ width:150px;
|
|
|
+ }
|
|
|
+ .chart li {
|
|
|
+ width: 150px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid red;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 25px;
|
|
|
+ }
|
|
|
.header {
|
|
|
width: 100%;
|
|
|
height: 56px;
|
zhousheng
