parent
82a2e67aea
commit
476dc182b2
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
@ -0,0 +1,229 @@
|
||||
<!-- 企业综合经营贡献TOP5 -->
|
||||
<template>
|
||||
<div id="echartsFive" ref="myChartFive"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
let colors = ['#EE462A','#FF8929', '#FFBB00', '#5CBC69', '#00AEFF']
|
||||
let dataSource = [
|
||||
{ value: 48, name: 'TOP1',entprice: "苏州众汇聚合信息科技有限公司1"},
|
||||
{ value: 36, name: 'TOP2',entprice: "苏州众司2"},
|
||||
{ value: 30, name: 'TOP3',entprice: "苏州众汇聚合信息科技有限公司3"},
|
||||
{ value: 22, name: 'TOP4',entprice: "苏州众汇聚合信息科技有限公司4"},
|
||||
{ value: 16, name: 'TOP5',entprice: "苏州众汇聚合信息科技有限公司5"},
|
||||
];
|
||||
// 公用调整
|
||||
let itemStyle = {
|
||||
// normal: {
|
||||
borderRadius: 4,
|
||||
borderColor: "#F5F8FA",
|
||||
borderWidth: 4,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
// },
|
||||
};
|
||||
return {
|
||||
myChartFive: false,
|
||||
sum: 5000,
|
||||
dataSource:dataSource,
|
||||
option: {
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '32%',
|
||||
top: '5%',
|
||||
bottom: '1%'
|
||||
},
|
||||
xAxis: { show: false },
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
position: 'left',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
inverse: true,
|
||||
data: dataSource.map((item, index) => item.name),
|
||||
axisLabel: {
|
||||
align: 'center',
|
||||
padding: [0, 40, 0, 0],
|
||||
formatter: (name, index) => {
|
||||
return `{name${index}|${name}}`
|
||||
},
|
||||
rich: {
|
||||
name0: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
padding: [5,8,3,8],
|
||||
fontFamily: "Arial",
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#EE462A',
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
name1: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
padding: [5,8,3,8],
|
||||
fontFamily: "Arial",
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#FF8929',
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
name2: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
padding: [5,8,3,8],
|
||||
fontFamily: "Arial",
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#ffbb00',
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
name3: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
padding: [5,8,3,8],
|
||||
fontFamily: "Arial",
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#5CBC69',
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
name4: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
padding: [5,8,3,8],
|
||||
fontFamily: "Arial",
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#00AEFF',
|
||||
verticalAlign: "middle",
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: { // 改变y轴颜色
|
||||
show: false
|
||||
},
|
||||
data: dataSource.map((item, index) => item.value),
|
||||
axisLabel: {
|
||||
verticalAlign: 'middle',
|
||||
align: 'left',
|
||||
padding: [0, 0, 0, 20],
|
||||
formatter: (value) => {
|
||||
let name;
|
||||
for (let index = 0; index < this.dataSource.length; index++) {
|
||||
if(this.dataSource[index].value == value) {
|
||||
name = this.dataSource[index].entprice
|
||||
}
|
||||
|
||||
}
|
||||
return "{entprice|" + name + "}{value|" + value + "}{unit|%}"
|
||||
},
|
||||
rich: {
|
||||
entprice:{
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: "14px",
|
||||
color: "#666",
|
||||
align:"left"
|
||||
},
|
||||
value:{
|
||||
fontFamily: "DINCondensed",
|
||||
fontSize: "24px",
|
||||
color: "#0086FF",
|
||||
fontWeight: "bold",
|
||||
align:"left",
|
||||
padding: [3,0,0,10],
|
||||
fontStyle: "italic",
|
||||
},
|
||||
unit:{
|
||||
fontFamily: "Arial",
|
||||
fontSize: "12px",
|
||||
color: "#0086FF",
|
||||
fontWeight: "bold",
|
||||
align:"left",
|
||||
padding: [3,0,0,-10],
|
||||
fontStyle: "italic",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '总量',
|
||||
type: 'bar',
|
||||
barWidth: 12, // 柱子宽度
|
||||
showBackground: true,
|
||||
barGap: '60%',
|
||||
barCategoryGap: '60%',
|
||||
backgroundStyle: {
|
||||
color: '#fff',
|
||||
borderRadius: 30
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false // 开启显示
|
||||
},
|
||||
barBorderRadius: 30,
|
||||
borderWidth: 2,
|
||||
color: "#0086FF",
|
||||
}
|
||||
},
|
||||
data: dataSource.map((item, index) => item.value),
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(()=>{
|
||||
this.initEchart();
|
||||
})
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
cancalDebounce(){
|
||||
window.onresize = this.myChartFive.resize();
|
||||
},
|
||||
initEchart(){
|
||||
var chartDom = document.getElementById("echartsFive");
|
||||
this.myChartFive = echarts.init(chartDom);
|
||||
this.myChartFive.setOption(this.option)
|
||||
// this.legendselectchanged(this.myChartFive)
|
||||
},
|
||||
// legendselectchanged(myChart){
|
||||
// myChart.on('legendselectchanged', function (params) {
|
||||
// console.log('点击了', params.name);
|
||||
// });
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,226 @@
|
||||
<!-- 资金拨付情况分析 -->
|
||||
<template>
|
||||
<div id="echartsFour" ref="myChartFour"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
let colors = ['#EE462A','#FF8929', '#FFBB00', '#5CBC69', '#00AEFF']
|
||||
let datas = [
|
||||
{ value: 800, proportion: 16, name: '制造业服务化奖励', label:{color:"#EE462A"}},
|
||||
{ value: 800, proportion: 16, name: '鼓励社会信用体系建设', label:{color:"#FF8929"}},
|
||||
{ value: 1800, proportion: 36, name: '产业提升和品牌建设奖励', label:{color:"#FFBB00"}},
|
||||
{ value: 800, proportion: 16, name: '经营奖励', label:{color:"#5CBC69"}},
|
||||
{ value: 800, proportion: 16, name: '一事一议', label:{color:"#00AEFF"}},
|
||||
];
|
||||
// 公用调整
|
||||
let itemStyle = {
|
||||
// normal: {
|
||||
borderRadius: 4,
|
||||
borderColor: "#F5F8FA",
|
||||
borderWidth: 4,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
// },
|
||||
};
|
||||
return {
|
||||
myChartFour: false,
|
||||
sum: 5000,
|
||||
option: {
|
||||
color:colors,
|
||||
// grid: {
|
||||
// top: "0%",
|
||||
// left: "5%",
|
||||
// right: "80%",
|
||||
// bottom: "8%", //也可设置left和right设置距离来控制图表的大小
|
||||
// },
|
||||
// title: {
|
||||
// text: "总额",
|
||||
// subtext: 800,
|
||||
// textStyle: {
|
||||
// color: "#65FDFD",
|
||||
// fontSize: 32,
|
||||
// // align: 'center'
|
||||
// },
|
||||
// subtextStyle: {
|
||||
// fontSize: 36,
|
||||
// color: "#ffc20e",
|
||||
// fontWeight: "bold"
|
||||
// },
|
||||
// x: "center",
|
||||
// y: "center",
|
||||
// },
|
||||
legend: {
|
||||
bottom: '32%',
|
||||
right: '2%',
|
||||
orient: 'vertical',
|
||||
data: datas,
|
||||
icon: 'square',
|
||||
itemWith: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 10,
|
||||
selectedMode: true,
|
||||
// padding: [5, 10, 5, 0],
|
||||
formatter(name) {
|
||||
debugger;
|
||||
const item = datas.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#666666',
|
||||
fontSize: 14,
|
||||
width: 100,
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 数据
|
||||
type: "pie",
|
||||
zlevel: 3,
|
||||
radius: ["40%", "55%"],
|
||||
center: ["35%", "50%"],
|
||||
itemStyle: itemStyle,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
data: datas,
|
||||
label: {
|
||||
// show: true,
|
||||
// position: "outside",
|
||||
padding: [10, -30],
|
||||
formatter: (params) => {
|
||||
return "{a|" +params.value+"}{b|" + "万元}\n{c|" + params.data.proportion + "}{d|" + "%}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
b: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
color: "#666666",
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
c: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
d: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
padding: [5, 0, 0, 0],
|
||||
}
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 25,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "阴影圈",
|
||||
type: "pie",
|
||||
radius: ["0%", "35%"],
|
||||
center: ["35%", "50%"],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: (params) => {
|
||||
return "{value|总额}\n\n{label|"+ this.sum + "}{unit|万元}";
|
||||
},
|
||||
rich: {
|
||||
//中间文字
|
||||
value: {
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
fontSize: 14,
|
||||
fontFamily: 'AlibabaPuHuiTiM',
|
||||
color: "#666"
|
||||
},
|
||||
label: {
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
fontFamily: 'DINCondensed',
|
||||
color: "#333",
|
||||
fontSize: 24,
|
||||
},
|
||||
unit: {
|
||||
verticalAlign: 'middle',
|
||||
fontSize: 12,
|
||||
fontFamily: 'AlibabaPuHuiTiR',
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(0, 174, 255, 0.1)",
|
||||
borderWidth:1,
|
||||
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||
},
|
||||
zlevel: 4,
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(()=>{
|
||||
this.initEchart();
|
||||
})
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
cancalDebounce(){
|
||||
window.onresize = this.myChartFour.resize();
|
||||
},
|
||||
initEchart(){
|
||||
var chartDom = document.getElementById("echartsFour");
|
||||
this.myChartFour = echarts.init(chartDom);
|
||||
this.myChartFour.setOption(this.option)
|
||||
// this.legendselectchanged(this.myChartFour)
|
||||
},
|
||||
// legendselectchanged(myChart){
|
||||
// myChart.on('legendselectchanged', function (params) {
|
||||
// console.log('点击了', params.name);
|
||||
// });
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
<!-- 资金引导情况分析 -->
|
||||
<template>
|
||||
<section>
|
||||
<el-table v-loading="loading" :data="tableData" :height="tabHeader" border :header-cell-style="{background:'#E8F3FC'}">
|
||||
<el-table-column label="投放类型" key="type" prop="type" align="center" width="180"/>
|
||||
<el-table-column label="申报年份" key="year" prop="year" align="center" width="80">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<div class="Table-header">投放金额</div>
|
||||
<span class="Table-unit">(亿元)</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-number">{{ scope.row.deliveryAmount }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属项目" key="operation" prop="operation" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-table-Info" @click="ProjectInfo(scope.row)">{{ scope.row.project }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属企业" key="enterprice" prop="enterprice" align="center" />
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
tableData:[
|
||||
{
|
||||
type:"经营奖励",
|
||||
deliveryAmount: 58,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
type:"制造业服务化奖励",
|
||||
deliveryAmount: 60,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
type:"产业提升和品牌建设奖励",
|
||||
deliveryAmount: 48,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
type:"鼓励社会信用体系建设",
|
||||
deliveryAmount: 64,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
type:"一事一议",
|
||||
deliveryAmount: 48,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
}
|
||||
],
|
||||
tabHeader: 288,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.cancalDebounce();
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
// 屏幕尺寸变化
|
||||
cancalDebounce(){
|
||||
const element = document.getElementById('analyse-middle-box-id'); // 通过元素的 ID 获取元素
|
||||
const header = document.getElementById('box-header-id'); // 通过元素的 ID 获取元素
|
||||
const elementHeight = element.offsetHeight;
|
||||
const headerHeight = header.offsetHeight;
|
||||
this.tabHeader = elementHeight - headerHeight - 35;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<!-- 拨付资金企业申请情况TOP5 -->
|
||||
<template>
|
||||
<section>
|
||||
<el-table v-loading="loading" :data="tableData" :height="tabHeader" border :header-cell-style="{background:'#E8F3FC'}">
|
||||
<el-table-column label="排名" key="type" prop="type" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-ranking" :style="{backgroundColor: scope.row.rankingBg}">{{ scope.row.ranking }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="申报年份" key="year" prop="year" align="center" width="80">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<div class="Table-header">投放金额</div>
|
||||
<span class="Table-unit">(亿元)</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-number">{{ scope.row.deliveryAmount }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属项目" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-table-Info" @click="ProjectInfo(scope.row)">{{ scope.row.project }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属企业" key="enterprice" prop="enterprice" align="center" />
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
tableData:[
|
||||
{
|
||||
ranking:"TOP1",
|
||||
rankingBg:"#EE462A",
|
||||
deliveryAmount: 58,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
ranking:"TOP2",
|
||||
rankingBg:"#FF8929",
|
||||
deliveryAmount: 60,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
ranking:"TOP3",
|
||||
rankingBg:"#ffbb00",
|
||||
deliveryAmount: 48,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
ranking:"TOP4",
|
||||
rankingBg:"#5CBC69",
|
||||
deliveryAmount: 64,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
},{
|
||||
ranking:"TOP5",
|
||||
rankingBg:"#00AEFF",
|
||||
deliveryAmount: 48,
|
||||
project:"xxx项目",
|
||||
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||
}
|
||||
],
|
||||
tabHeader: 288,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.cancalDebounce();
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
// 屏幕尺寸变化
|
||||
cancalDebounce(){
|
||||
const element = document.getElementById('analyse-middle-box-id'); // 通过元素的 ID 获取元素
|
||||
const header = document.getElementById('box-header-id'); // 通过元素的 ID 获取元素
|
||||
const elementHeight = element.offsetHeight;
|
||||
const headerHeight = header.offsetHeight;
|
||||
this.tabHeader = elementHeight - headerHeight - 35;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<!-- 重点及特色项目 -->
|
||||
<template>
|
||||
<section>
|
||||
<el-table v-loading="loading" :data="tableData" :height="265" border :header-cell-style="{background:'#E8F3FC'}">
|
||||
<el-table-column label="项目名称" key="projectName" prop="projectName" align="center" />
|
||||
<el-table-column label="申报年份" key="year" prop="year" align="center"/>
|
||||
<el-table-column label="项目类别" key="projectType" prop="projectType" align="center" />
|
||||
<el-table-column label="操作" key="operation" prop="operation" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-table-Info" @click="ProjectInfo(scope.row)">查看详情</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
tableData:[
|
||||
{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},{
|
||||
projectName:"项目落户",
|
||||
year: 2024,
|
||||
projectType:"省级总部",
|
||||
},
|
||||
],
|
||||
tabHeader: 300,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.cancalDebounce();
|
||||
// window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
// 屏幕尺寸变化
|
||||
cancalDebounce(){
|
||||
const element = document.getElementById('analyse-middle-box-id'); // 通过元素的 ID 获取元素
|
||||
const header = document.getElementById('box-header-id'); // 通过元素的 ID 获取元素
|
||||
const elementHeight = element.offsetHeight;
|
||||
const headerHeight = header.offsetHeight;
|
||||
this.tabHeader = elementHeight - headerHeight - 30;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
// 新落户企业统计
|
||||
export { default as echartDataTwo } from './statisticsNew'
|
||||
// 引入投资统计分析
|
||||
export { default as echartDataThree } from './statisticsAnalyse'
|
||||
// 资金拨付情况分析
|
||||
export { default as echartDataFour } from './capitalAppropriateAnalyse'
|
||||
// 01.企业综合经营贡献TOP5
|
||||
export { default as echartDataFive } from './TopEchart'
|
||||
// 重点及特色项目
|
||||
export { default as TableOne } from './emphasisProject'
|
||||
// 资金引导情况分析
|
||||
export { default as TableTwo } from './capitalCondition'
|
||||
// 拨付资金企业申请情况TOP5
|
||||
export { default as TableThree } from './capitalConditionTOP5'
|
||||
// 促进产业项目情况
|
||||
export { default as TableFour } from './promoteProject'
|
||||
// 02.行业纵深情况
|
||||
export { default as TableFive } from './industryTable'
|
||||
// 促进产业载体分析
|
||||
export { default as TableSix } from './promoteTable'
|
||||
// 重点及特色项目
|
||||
export { default as TableSeven } from './featureProject'
|
||||
// 产业品牌打造宣传
|
||||
export { default as TableEight } from './brandPublicity'
|
||||
@ -0,0 +1,75 @@
|
||||
<!-- 02.行业纵深情况 -->
|
||||
<template>
|
||||
<div class="industry-table-box">
|
||||
<section>
|
||||
<el-table v-loading="loading" class="dataMap-two-table" :data="tableData" :row-class-name="tableRowClassName" :header-cell-style="{background:'#E8F3FC'}"> <!-- :max-height="tabHeader" -->
|
||||
<el-table-column label="行业大类" prop="industryCategories" align="center"/>
|
||||
<el-table-column label="全年营收" prop="yearRevenue" align="center">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<div class="Table-header">全年营收</div>
|
||||
<span class="Table-unit">(亿元)</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-number">{{ scope.row.yearRevenue }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="增加值(亿元)" prop="addValue" align="center">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<div class="Table-header">增加值</div>
|
||||
<span class="Table-unit">(亿元)</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-number">{{ scope.row.addValue }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="增加值增速(按不变价)" prop="growth" align="center">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<div class="Table-header">增加值增速</div>
|
||||
<span class="Table-unit">(按不变价)</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-number">{{ scope.row.growth }} <span>%</span></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="增加值占GDP比重" prop="gdpProportion" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-trace-table-number">{{ scope.row.gdpProportion }} <span>%</span></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getIndustryDepth } from "@/api/jin_ji_hu/dataCloudMap"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
tableData: [],
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getList();
|
||||
},
|
||||
methods:{
|
||||
getList(){
|
||||
this.loading = true;
|
||||
getIndustryDepth().then(res=>{
|
||||
this.loading = false;
|
||||
this.tableData = res.data
|
||||
})
|
||||
},
|
||||
// 修改table背景色
|
||||
tableRowClassName({row, rowIndex}){
|
||||
if (rowIndex % 2 == 0) {
|
||||
return 'evenNumber-row';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div id="echartsThree" ref="myChartThree"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
let colors = ['#FFA329','#00AEFF']
|
||||
let datas = [
|
||||
{ value: 40, name: '外资实缴资本', label:{color:"#FFA329"}},
|
||||
{ value: 24, name: '内资实缴资本', label:{color:"#00AEFF"}},
|
||||
];
|
||||
// 公用调整
|
||||
let itemStyle = {
|
||||
// normal: {
|
||||
borderRadius: 4,
|
||||
borderColor: "#F5F8FA",
|
||||
borderWidth: 4,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
// },
|
||||
};
|
||||
return {
|
||||
myChartThree: false,
|
||||
option: {
|
||||
color:colors,
|
||||
grid: {
|
||||
top: "0%",
|
||||
left: "5%",
|
||||
right: "80%",
|
||||
bottom: "8%", //也可设置left和right设置距离来控制图表的大小
|
||||
},
|
||||
legend: {
|
||||
bottom: '32%',
|
||||
right: '2%',
|
||||
orient: 'vertical',
|
||||
data: datas,
|
||||
icon: 'square',
|
||||
itemWith: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 50,
|
||||
// padding: [5, 10, 5, 0],
|
||||
formatter(name) {
|
||||
debugger;
|
||||
const item = datas.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#666666',
|
||||
fontSize: 14,
|
||||
width: 100,
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 数据
|
||||
type: "pie",
|
||||
zlevel: 3,
|
||||
radius: ["40%", "55%"],
|
||||
center: ["35%", "50%"],
|
||||
itemStyle: itemStyle,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
data: datas,
|
||||
label: {
|
||||
// show: true,
|
||||
// position: "outside",
|
||||
padding: [10, -30],
|
||||
formatter: (params) => {
|
||||
return "{a|" +params.value+"}{b|" + "家}\n{c|" + params.value + "}{d|" + "%}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
b: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
color: "#666666",
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
c: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
d: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
padding: [5, 0, 0, 0],
|
||||
}
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 25,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "阴影圈",
|
||||
type: "pie",
|
||||
radius: ["0%", "35%"],
|
||||
center: ["35%", "50%"],
|
||||
hoverAnimation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(0, 174, 255, 0.1)",
|
||||
borderWidth:1,
|
||||
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||
},
|
||||
zlevel: 4,
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(()=>{
|
||||
this.initEchart();
|
||||
})
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
cancalDebounce(){
|
||||
window.onresize = this.myChartThree.resize();
|
||||
},
|
||||
initEchart(){
|
||||
var chartDom = document.getElementById("echartsThree");
|
||||
this.myChartThree = echarts.init(chartDom);
|
||||
this.myChartThree.setOption(this.option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div id="echartsTwo" ref="myChartTwo"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
let colors = ['#FFA329','#00AEFF','#5CBC69']
|
||||
let datas = [
|
||||
{ value: 40, name: '5G互联网领域', label:{color:"#FFA329"}},
|
||||
{ value: 24, name: '制造业领域', label:{color:"#00AEFF"}},
|
||||
{ value: 32, name: '现代物流领域', label:{color:"#5CBC69"}},
|
||||
];
|
||||
// 公用调整
|
||||
let itemStyle = {
|
||||
// normal: {
|
||||
borderRadius: 4,
|
||||
borderColor: "#F5F8FA",
|
||||
borderWidth: 4,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
// },
|
||||
};
|
||||
return {
|
||||
myChartTwo: false,
|
||||
option: {
|
||||
color:colors,
|
||||
grid: {
|
||||
top: "0%",
|
||||
left: "5%",
|
||||
right: "80%",
|
||||
bottom: "8%", //也可设置left和right设置距离来控制图表的大小
|
||||
},
|
||||
legend: {
|
||||
bottom: '32%',
|
||||
right: '2%',
|
||||
orient: 'vertical',
|
||||
data: datas,
|
||||
icon: 'square',
|
||||
itemWith: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 30,
|
||||
// padding: [5, 10, 5, 0],
|
||||
formatter(name) {
|
||||
debugger;
|
||||
const item = datas.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#666666',
|
||||
fontSize: 14,
|
||||
width: 100,
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 数据
|
||||
type: "pie",
|
||||
zlevel: 3,
|
||||
radius: ["40%", "55%"],
|
||||
center: ["35%", "50%"],
|
||||
itemStyle: itemStyle,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
data: datas,
|
||||
label: {
|
||||
// show: true,
|
||||
// position: "outside",
|
||||
padding: [10, -30],
|
||||
formatter: (params) => {
|
||||
return "{a|" +params.value+"}{b|" + "家}\n{c|" + params.value + "}{d|" + "%}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
b: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
color: "#666666",
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
c: {
|
||||
fontFamily: "DINCondensed",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
d: {
|
||||
fontFamily: "AlibabaPuHuiTiR",
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
padding: [5, 0, 0, 0],
|
||||
}
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 40,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "阴影圈",
|
||||
type: "pie",
|
||||
radius: ["0%", "35%"],
|
||||
center: ["35%", "50%"],
|
||||
hoverAnimation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(0, 174, 255, 0.1)",
|
||||
borderWidth:1,
|
||||
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||
},
|
||||
zlevel: 4,
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(()=>{
|
||||
this.initEchart();
|
||||
})
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.cancalDebounce);
|
||||
},
|
||||
methods:{
|
||||
cancalDebounce(){
|
||||
console.log("走了吗");
|
||||
window.onresize = this.myChartTwo.resize();
|
||||
},
|
||||
initEchart(){
|
||||
var chartDom = document.getElementById("echartsTwo");
|
||||
this.myChartTwo = echarts.init(chartDom);
|
||||
this.myChartTwo.setOption(this.option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue