<template>
<div class="full-box ztfx">
<div class="" style="width: 100%;height:100%;" >
<div class="top-tip-box t-title">当前位置：专题分析 > 企业发展专题分析</div>
<div class="ztfx-info-box">
<div class="left-search-box">
<div class="lsb-top">数据截止时间：{{$Util.isEmpty(totalData.latestDate)?lastTime:totalData.latestDate}}</div>
<div class="lsb-search">
<div class="lsb-search-box">
<div class="sl-row">
<div class="sl-row-label">时间</div>
<el-date-picker
type="date"
:picker-options="beginDate(filter.endDate)"
v-model="filter.startDate"
placeholder="开始日期"
value-format="yyyy-MM-dd"
style="width:calc(100% - 40px);float: left;">
</el-date-picker>
</div>
<div class="sl-row">
<div class="sl-row-label">至</div>
<el-date-picker
type="date"
:picker-options="processDate(filter.startDate)"
v-model="filter.endDate"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width:calc(100% - 40px);float: left;">
</el-date-picker>
</div>
</div>
<div class="lsb-search-border">
<div class="lsbb-top"></div>
<div class="lsbb-role"></div>
<div class="lsbb-bottom"></div>
</div>
</div>
<div class="lsb-info">
<div class="lsb-title"><span class="dot"></span>年度信息汇总</div>
<div class="item-chart">
<div class="chart-group">
<div class="chart-pie">
<div class="pie-box">
<div class="circle"><div class="circle2"><div class="circle3">{{totalData.total}}</div></div></div>
</div>
<div class="pie-title">累计企业工业总产值</div>
</div>
<div class="chart-pie">
<div class="pie-box">
<div class="circle7"><div class="circle8"><div class="circle9">{{totalData.totalTb}}%</div></div></div>
</div>
<div class="pie-title">同比</div>
</div>
</div>
<div class="chart-group">
<div class="chart-pie">
<div class="pie-box">
<div class="circle4"><div class="circle5"><div class="circle6">{{totalData.current}}</div></div></div>
</div>
<div class="pie-title">当月工业企业总产值</div>
</div>
<div class="chart-pie">
<div class="pie-box">
<div class="circle10"><div class="circle11"><div class="circle12">{{totalData.currentTb}}%</div></div></div>
</div>
<div class="pie-title">同比</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-info-box">
<div class="right-left-border">
<div class="rlb-top"></div>
<div class="rlb-role"></div>
<div class="rlb-bottom"></div>
</div>
<div class="ri-box">
<div class="ztfx-charts-box" style="width:100%;height:calc(100% - 10px);">
<div class="ztfx-chart-item">
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-title"><span class="dot"></span>企业工业总产值行业分布</div>
<div class="ztfx-chart-info" id="chartOne"></div>
</div>
<div class="ztfx-chart-item">
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-title"><span class="dot"></span>企业工业产值时间趋势分布</div>
<div class="ztfx-chart-info" id="chartTwo"></div>
</div>
<div class="ztfx-chart-item">
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-title"><span class="dot"></span>企业数量发展分布图</div>
<div class="ztfx-chart-info" id="chartThree"></div>
</div>
<div class="ztfx-chart-item" style='position: relative'>
<div class="roles-one"></div><div class="roles-two"></div>
<div class="roles-three"></div><div class="roles-four"></div>
<div class="ztfx-chart-title"><span class="dot"></span>企业规模分布图</div>
<div class="ztfx-chart-info" id="chartFour"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
export default {
name: 'jjyx',
data () {
return {
showCondition:false,
year:new Date(year).format("yyyy"),
lastTime:new Date(year).format("yyyy-MM"),
filter:{
startDate: new Date().format("yyyy-")+"01-01",
endDate:new Date().format("yyyy-MM-dd")
},
totalData:{total: 0,current: 0,currentTb: 0,year: 2017,latestDate:'',totalTb: 0},
defaultOp:{
title: { show: false },
legend:{show:false,height:"0"},
grid:{top:30,bottom:30},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#777'
},
crossStyle: {
color: 'rgba(255,255,255,.8)',
}
}
},
xAxis: {
axisLabel:{color:'rgba(255,255,255,.9)'/*,interval:0*/},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
}
},
chartsTitle:{left:'',right:'同比'}
}
},
mounted (){
/*this.getMapData();*/
this.getTotalData();
this.loadTabCharts();
},
watch:{
"filter.startDate":function(){
let vm = this
vm.loadTabCharts()
},
"filter.endDate":function(){
let vm = this
vm.loadTabCharts()
}
},
methods:{
loadTabCharts(){
let vm = this
/*this.drawLineOne('chartOne',['生物医药','电子信息','新能源','金属加工','轻工制造'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
vm.chartsTitle.left='总产值(万元)';
this.drawLine('chartTwo',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],[12,334,344,333,787,12,122,334,34,5,66,111],[122,223,440,22,678,22,22,22,344,56,56,56],[2,22,34,45,88,2,22,34,45,88,12,24]);*/
/* vm.chartsTitle.left='';
this.drawLine('chartThree',['投产运营','工业企业','规上工业','上市公司','高新技术'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);
let t = [{name: "企业产值100亿以上企业", value: 122},{name: "企业产值50-100亿以上企业", value: 233},{name: "企业产值10-50亿以上企业", value: 453},{name: "企业产值5-10亿以上企业", value: 453},{name: "企业产值1-5亿以上企业", value: 453}];
let legend=[];
t.forEach(function (item) {
legend.push(item.name)
})
this.drawPie("chartFour",t,legend)*/
let timeStart = !vm.$Util.isEmpty(vm.filter.startDate) ? vm.filter.startDate.split("-")[0] : null,
timeEnd = !vm.$Util.isEmpty(vm.filter.endDate) ? vm.filter.endDate.split("-")[0] : null;
if(timeStart == null || timeEnd== null || timeStart > timeEnd || timeStart <timeEnd){
let dataText = timeStart == null ? '请选择开始时间':timeEnd ==null ? '请选择结算时间':'支持查询同一年数据，请选择起止时间为同一年后查询！';
vm.$message({
showClose: true,
message:dataText,
type: 'warning'
})
return;
}
this.getOneData();
this.getTwoData();
this.getThreeData()
this.getFourData();
},
getTotalData(){
let vm = this;
vm.$http.get('/dx-economy-api/subject/qyfz/total',{params:{year:vm.year}}).then(function (resp) {
let t = resp.data.data
vm.totalData = t;
})
},
getOneData(){
let vm = this;
vm.$http.get('/dx-economy-api/subject/qyfz/industry',{params:vm.filter}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left='总产值(亿元)';vm.chartsTitle.right = ''
vm.drawLine('chartOne',t.xAxis,t.value,null,t.value2);
})
},
getTwoData(){
let vm = this;
vm.$http.get('/dx-economy-api/subject/qyfz/times',{params:vm.filter}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left='总产值(亿元)';vm.chartsTitle.right = ''
vm.drawLine('chartTwo',t.xAxis,t.value,null,t.value2);
})
},
getThreeData(){
let vm = this;
vm.$http.get('/dx-economy-api/subject/qyfz/qyfz',{params:vm.filter}).then(function (resp) {
let t = resp.data.data
vm.chartsTitle.left='';vm.chartsTitle.right = ''
vm.drawLineOne('chartThree',t.xAxis,t.value,null,null);
})
},
getFourData(){
let vm = this;
vm.$http.get('/dx-economy-api/subject/qyfz/qygm',{params:vm.filter}).then(function (resp) {
let t = resp.data.data
let legend=[];
t.forEach(function (item) {
legend.push(item.name)
})
vm.drawPie("chartFour",t,legend)
})
},
/**/
drawLine(container,cate,d1,d2,d3){
let vm = this
let myChart = vm.$echarts.init(document.getElementById(container))
let op = {
xAxis: {
type:"category",
data: cate,
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
},
yAxis:[
{
type: 'value',
name:vm.chartsTitle.left,
minInterval: 1,
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{
color:'rgba(255,255,255,.8)',
formatter: function (value) {
let texts = [];
if(value<1000){
texts.push(value)
}else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
texts.push(Math.ceil(value/1000) + "千")
}else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
texts.push(Math.ceil(value/10000) + "万")
}else if(Math.ceil(value/1000000)>=1){
texts.push(Math.ceil(value/1000000) + "百万")
}
return value
}},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
},
{
type: 'value',
name: '同比',
/*minInterval: 100,*/
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{color:'rgba(255,255,255,.8)'},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{show:false}
}
],
series: [
{
name: vm.chartsTitle.left,
type: 'bar',
color:"#6ee988",
barMaxWidth:'20',
data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
itemStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#6ee988' // 0% 处的颜色
}, {
offset: 1, color: '#6ee988' // 100% 处的颜色
}]
}
}
},
{
name: '工业产值',
type: 'bar',
color:"#16e1ff",
barMaxWidth:'20',
data: d2,//[100,200,33,56,188,123,143,23,99],//res.zcz
itemStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#16e1ff' // 0% 处的颜色
}, {
offset: 1, color: '#16e1ff' // 100% 处的颜色
}]
}
}
},
{
name: '同比',
type: 'line',
yAxisIndex: 1,
color:"#e0e63d",
data: d3,//[10,20,30,44,77,55,66,22,100],//res.tb
areaStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#e0e63d' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
}]
}
}
}]
}
myChart.setOption($.extend(true,op,vm.defaultOp));
if(container == "gytz") {
/*myChart.on('click', function (param) {
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
vm.$router.push({name: "gytz", params: {sDate: _start, eDate: _end}})
})*/
}
},
drawLineOne(container,cate,d1,d3){
let vm = this
let myChart = vm.$echarts.init(document.getElementById(container))
let op = {
xAxis: {
type:"category",
data: cate,
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
},
yAxis:[
{
type: 'value',
name:vm.chartsTitle.left,
/*minInterval: 1,*/
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{
color:'rgba(255,255,255,.8)',
formatter: function (value) {
let texts = [];
if(value<1000){
texts.push(value)
}else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
texts.push(Math.ceil(value/1000) + "千")
}else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
texts.push(Math.ceil(value/10000) + "万")
}else if(Math.ceil(value/1000000)>=1){
texts.push(Math.ceil(value/1000000) + "百万")
}
return value
}},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
},
{
type: 'value',
name: '同比',
/*minInterval: 100,*/
show:vm.chartsTitle.right == '' ? false:true,
nameTextStyle:{color:'rgba(255,255,255,.8)'},
axisLabel:{color:'rgba(255,255,255,.8)'},
axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
splitLine:{show:false}
}
],
series: [
{
name: vm.chartsTitle.left,
type: 'bar',
color:"#6ee988",
barMaxWidth:'20',
data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
itemStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#6ee988' // 0% 处的颜色
}, {
offset: 1, color: '#6ee988' // 100% 处的颜色
}]
}
}
},
{
name: '同比',
type: 'line',
yAxisIndex: 1,
color:"#e0e63d",
show:vm.chartsTitle.right == '' ? false:true,
data: d3,//[10,20,30,44,77,55,66,22,100],//res.tb
areaStyle: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#e0e63d' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
}]
}
}
}]
}
myChart.setOption($.extend(true,op,vm.defaultOp));
if(container == "gytz") {
myChart.on('click', function (param) {
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
vm.$router.push({name: "gytz", params: {sDate: _start, eDate: _end}})
})
}
},
drawPie(container,data,legend){
let vm = this
let myChart = vm.$echarts.init(document.getElementById(container))
let op = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
color:['#efca5a','#7dbbea','#ef995a','#ef5a6f','#a8de74','#de74a1','#cb74de','#7483de','#74d8de','#74dec1','#6cef5a','#d85aef'],
legend: {
type: 'scroll',
orient: 'vertical',
x:"right",
data:legend,
textStyle:{color:"rgba(255,255,255,.8)"}
},
series: [
{
name:'企业规模分布图',
type:'pie',
radius:['55%', '80%'],
minAngle: 30,
center:['40%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show:false,
formatter: '{b|{b}}{abg|}\n{hr|}\n {c} {per|{d}%} ',
rich: {
hr: {borderColor: 'rgba(255,255,255,.3)',width: '100%',borderWidth: 0.5,height: 0},
b: {lineHeight: 22,align: 'center',fontSize:10},
per: {backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}
}
},
},
data:data
}
]
}
myChart.setOption(op)
/*myChart.on('click', function (param) {
let _start = "",_end = "";
if(!vm.$Util.isEmpty(vm.timeFilter)){
if(vm.timeFilter.length === 1){
_start = vm.timeFilter[0];
}else if(vm.timeFilter.length === 2){
_start = vm.timeFilter[0];
_end = vm.timeFilter[1];
}
}
vm.$router.push({name:"jjyx",params:{sDate:_start,eDate:_end,bk:'',industry:param.name}})
})*/
},
}
}
</script>
<style>
.search-row-condition .el-date-editor .el-range-input{width:35%!important;}
</style>
<style scoped>
</style>
