Skip to content

T
techbook
Commit d67699d1 authored by zhangyanni's avatar zhangyanni
Browse files
Options

政府第三屏

parent 1a797923
Show whitespace changes
Inline Side-by-side
Showing with 681 additions and 3 deletions
src/views/report/forthScreen.vue 0 → 100644
View file @ d67699d1
<template>
<div class="forthEchart">
<p>河北省预测产值</p>
<div class="tabList">
<span @click="handleTo(1)" :class="currentIndex==1?'activeLi':''"><p>产值</p> <i class="spanI"
v-if="currentIndex==1"></i></span>
<span @click="handleTo(2)" :class="currentIndex==2?'activeLi':''"><p>税收</p> <i class="spanI"
v-if="currentIndex==2"></i></span>
<span @click="handleTo(3)" :class="currentIndex==3?'activeLi':''"><p>专利</p> <i class="spanI"
v-if="currentIndex==3"></i></span>
<span @click="handleTo(4)" :class="currentIndex==4?'activeLi':''"><p>人才</p> <i class="spanI"
v-if="currentIndex==4"></i></span>
</div>
<div class="list" v-show="currentIndex==1">
<div>
<div id="forthEchart1"></div>
</div>
</div>
<div class="list" v-show="currentIndex==2">
<div>
<div id="forthEchart2"></div>
</div>
</div>
<div class="list" v-show="currentIndex==3">
<div>
<div id="forthEchart3"></div>
</div>
</div>
<div class="list" v-show="currentIndex==4">
<div>
<div id="forthEchart4"></div>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
import '../../../public/js/techbook';
export default {
name: "forthScreen",
data() {
return {
currentIndex: 1,
category: ['第一年(2019)', '第二年(2020)', '第三年(2021)', '第四年(2022)', '第五年(2023)', '第六年(2024)', '第七年(2025)'],
lineData: [44000, 46656, 49459.68, 54918.56, 63201.6, 63403.9, 72375.6],
barData: [40000, 43200, 46224, 50384, 56430, 59815, 65796],
addData1: [
{
name: 40000,
value: "10%"
},
{
name: 43200,
value: "8%"
},
{
name: 46224,
value: "7%"
},
{
name: 50384,
value: "9%"
},
{
name: 56430,
value: "12%"
},
{
name: 59815,
value: "6%"
},
{
name: 65796,
value: "10%"
},
],
lineData2: [5657.04, 5996.99, 6537.24, 7191.57, 7983.34, 8154.58, 9140.05],
barData2: [5238, 5604.66, 6053, 6597.77, 7257.58, 7693, 8385.37],
addData2: [
{
name: 5238,
value: "8%"
},
{
name: 5604.66,
value: "7%"
},
{
name: 6053,
value: "8%"
},
{
name: 6597.77,
value: "9%"
},
{
name: 7257.58,
value: "10%"
},
{
name: 7693,
value: "6%"
},
{
name: 8385.37,
value: "9%"
},
],
lineData3: [141596, 162116.04, 210963.06, 295669.12, 356613.12, 435318.75, 634694.4],
barData3: [108920, 132882, 167431, 217660, 278604, 348255, 470144],
addData3: [
{
name: 108920,
value: "30%"
},
{
name: 132882,
value: "22%"
},
{
name: 167431,
value: "26%"
},
{
name: 217660,
value: "30%"
},
{
name: 278604,
value: "28%"
},
{
name: 348255,
value: "25%"
},
{
name: 470144,
value: "35%"
},
],
lineData4: [40.1, 49.19, 60.52, 76.9, 89.30, 110.76, 148.75],
barData4: [34.74, 41.34, 50.02, 62.02, 74.42, 90.79, 116.21],
addData4: [
{
name: 34.74,
value: "18%"
},
{
name: 41.34,
value: "19%"
},
{
name: 50.02,
value: "21%"
},
{
name: 62.02,
value: "24%"
},
{
name: 74.42,
value: "20%"
},
{
name: 90.79,
value: "22%"
},
{
name: 116.21,
value: "28%"
},
],
}
},
computed: {
forthEcharts() {
var that = this,resultData;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
that.addData1.forEach((item) => {
if (item.name == params[1].value) {
resultData =`<p>同比增长：${item.value}</p>`;
}
})
return resultData;
}
},
legend: {
data: ['预期数值', '目前数值'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: this.category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
name:"亿元",
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: '预期数值',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: this.lineData,
},
{
name: '目前数值',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0ABB87'},
{offset: 1, color: '#0ABB87'}
]
)
}
},
data: this.barData
},
{
name: '预期数值',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(20,200,212,0.5)'},
{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
{offset: 1, color: 'rgba(20,200,212,0)'}
]
)
}
},
z: -12,
data: this.lineData
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f'
}
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: this.lineData
}
]
}
},
forthEcharts2() {
var that = this,resultData;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
that.addData2.forEach((item) => {
if (item.name == params[1].value) {
resultData =`<p>同比增长：${item.value}</p>`;
}
})
return resultData;
}
},
legend: {
data: ['预期数值', '目前数值'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: this.category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
name:"亿元",
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: '预期数值',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: this.lineData2,
},
{
name: '目前数值',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0ABB87'},
{offset: 1, color: '#0ABB87'}
]
)
}
},
data: this.barData2
},
{
name: '预期数值',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(20,200,212,0.5)'},
{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
{offset: 1, color: 'rgba(20,200,212,0)'}
]
)
}
},
z: -12,
data: this.lineData2
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f'
}
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: this.lineData2
}
]
}
},
forthEcharts3() {
var that = this,resultData;
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
that.addData3.forEach((item) => {
if (item.name == params[1].value) {
resultData =`<p>同比增长：${item.value}</p>`;
}
})
return resultData;
}
},
legend: {
data: ['预期数值', '目前数值'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: this.category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: '预期数值',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: this.lineData3,
},
{
name: '目前数值',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0ABB87'},
{offset: 1, color: '#0ABB87'}
]
)
}
},
data: this.barData3
},
{
name: '预期数值',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(20,200,212,0.5)'},
{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
{offset: 1, color: 'rgba(20,200,212,0)'}
]
)
}
},
z: -12,
data: this.lineData3
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f'
}
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: this.lineData3
}
]
}
},
forthEcharts4() {
var that = this,resultData;
return {
legend: {
data: ['预期数值', '目前数值'],
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
that.addData4.forEach((item) => {
if (item.name == params[1].value) {
resultData =`<p>同比增长：${item.value}</p>`;
}
})
return resultData;
}
},
xAxis: {
data: this.category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
name:"万元",
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: '预期数值',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: this.lineData4,
},
{
name: '目前数值',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0ABB87'},
{offset: 1, color: '#0ABB87'}
]
)
}
},
data: this.barData4
},
{
name: '预期数值',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(20,200,212,0.5)'},
{offset: 0.2, color: 'rgba(20,200,212,0.2)'},
{offset: 1, color: 'rgba(20,200,212,0)'}
]
)
}
},
z: -12,
data: this.lineData4
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f'
}
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: this.lineData4
}
]
}
}
},
methods: {
handleTo(type) {
this.currentIndex = type;
this.getInitEchart(type);
},
getInitEchart(type) {
let mapChart = document.getElementById("forthEchart"+type), resultEchart;
mapChart.style.width = window.innerWidth + 'px';
mapChart.style.height = '450px';
resultEchart = echarts.init(mapChart, 'techbook');
resultEchart.setOption(type==1?this.forthEcharts:type==2?this.forthEcharts2:type==3?this.forthEcharts3:this.forthEcharts4, true);
}
},
mounted() {
this.getInitEchart(1)
}
}
</script>
<style scoped lang="scss">
.forthEchart {
height: 100%;
background: url("../../assets/img/report/second_bg.png") no-repeat;
background-size: 100%;
color: #fff;
padding-top: 50px;
position: relative;
.tabList {
margin-top: 30px;
text-align: left;
margin-bottom: 23px;
font-weight: 500;
display: -webkit-flex; /*新版本语法：chrome 21+*/
display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
& > span {
display: inline-block;
margin-right: 50px;
color: #fff;
font-size: 16px;
cursor: pointer;
height: 20px;
position: relative;
}
& > span.activeLi {
color: #FFB822;
}
.spanI {
display: inline-block;
width: 50px;
height: 2px;
background: rgba(255, 185, 0, 1);
border-radius: 1px;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -25px;
}
}
}
</style>
\ No newline at end of file
src/views/report/reportIndex.vue
View file @ d67699d1
......@@ -24,13 +24,16 @@
<div id="thirdScreen" style="width:100%;height:100%;" v-if="isShowThird">
<thirdScreen :isShow="isShowThird" @hidePage="hidePage"></thirdScreen>
</div>
<div id="fifthScreen" style="width:100%;height:100%;" v-if="isShowForth">
<forthScreen></forthScreen>
</div>
</section>
<div class="buttonWrap" v-show="isShowPage">
<p :class="currentScreen==1?'activeP':''" @click="handleToWhich(1)"></p>
<p :class="currentScreen==2?'activeP':''" @click="handleToWhich(2)"></p>
<p :class="currentScreen==3?'activeP':''" @click="handleToWhich(3)"></p>
<p :class="currentScreen==4?'activeP':''" @click="handleToWhich(4)"></p>
<!--<p :class="currentScreen==4?'activeP':''" @click="handleToWhich(4)"></p>-->
</div>
</div>
</template>
......@@ -38,12 +41,13 @@
<script>
import secondMap from './secondMap';
import thirdScreen from './thirdScreen';
import forthScreen from './forthScreen';
export default {
name: "reportIndex",
components:{
secondMap,
thirdScreen
thirdScreen,
forthScreen
},
data(){
return{
......@@ -203,6 +207,7 @@
border: 1px solid #c9c9c9;
border-radius: 50%;
margin: 5px 0;
cursor: pointer;
&.activeP{
background: #D8D8D8;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment