|
|
|
|
@ -26,16 +26,60 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="echarts-data-box">
|
|
|
|
|
<div class="E-box-item">
|
|
|
|
|
<div class="img-box-one img-box"></div>
|
|
|
|
|
<div class="data-box">
|
|
|
|
|
<div class="box-number">
|
|
|
|
|
<span class="number-yuan">1758.13</span>
|
|
|
|
|
<span class="yuan-unit">亿元</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-bottom">【2023】服务业增加值</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="E-box-item">
|
|
|
|
|
<div class="img-box-two img-box"></div>
|
|
|
|
|
<div class="data-box">
|
|
|
|
|
<div class="box-number">
|
|
|
|
|
<span class="number-yuan">1.3</span>
|
|
|
|
|
<span class="yuan-unit">%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-bottom">【2023】服务业增速</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="E-box-item">
|
|
|
|
|
<div class="img-box-three img-box"></div>
|
|
|
|
|
<div class="data-box">
|
|
|
|
|
<div class="box-number">
|
|
|
|
|
<span class="number-yuan">49.9</span>
|
|
|
|
|
<span class="yuan-unit">%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-bottom">【2023】服务业增加值占GDP比重</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="echarts"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dataCloudMap-left-bottom">
|
|
|
|
|
<div class="bottom-left-title">
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<span class="dataCloudMap-title">行业纵深情况</span>
|
|
|
|
|
<div class="industry-title">
|
|
|
|
|
<div class="bottom-left-title">
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<span class="dataCloudMap-title">行业纵深情况</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
<div class="rightBtn">查看更多数据>></div>
|
|
|
|
|
</div>
|
|
|
|
|
<section>
|
|
|
|
|
<el-table v-loading="loadingOne" class="tabTwo-table" border :data="tableOneData" :row-class-name="tableRowClassName" > <!-- :max-height="tabHeader" -->
|
|
|
|
|
<el-table-column label="行业大类" prop="bigType" />
|
|
|
|
|
<el-table-column label="全年营收" prop="revenue" />
|
|
|
|
|
<el-table-column label="增加值（亿元）" prop="yuan" />
|
|
|
|
|
<el-table-column label="增加值增速（按不变价）" prop="speedUp" />
|
|
|
|
|
<el-table-column label="增加值占GDP比重" prop="proportion" />
|
|
|
|
|
</el-table>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="13" class="dataCloudMap-main-right">
|
|
|
|
|
@ -49,21 +93,27 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dataCloudMap-right-middle">
|
|
|
|
|
<div class="right-middle-title">
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<span class="dataCloudMap-title">荣誉情况</span>
|
|
|
|
|
<div class="honor-title">
|
|
|
|
|
<div class="right-middle-title">
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<span class="dataCloudMap-title">荣誉情况</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
<div class="rightBtn">查看更多数据>></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dataCloudMap-right-bottom">
|
|
|
|
|
<div class="right-bottom-title">
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<span class="dataCloudMap-title">项目追踪情况</span>
|
|
|
|
|
<div class="project-trace-title">
|
|
|
|
|
<div class="right-bottom-title">
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<span class="dataCloudMap-title">项目追踪情况</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
<div class="rightBtn">查看更多数据>></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
@ -88,6 +138,23 @@ export default {
|
|
|
|
|
// url1: require("../../assets/images/tb2.png"),
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
loadingOne: false,
|
|
|
|
|
tableOneData: [
|
|
|
|
|
{
|
|
|
|
|
bigType:"科学研究和技术服务业",
|
|
|
|
|
revenue:"506.63",
|
|
|
|
|
yuan:"201",
|
|
|
|
|
speedUp:"0.89%",
|
|
|
|
|
proportion:"11%",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
bigType:"科学研究和技术服务业",
|
|
|
|
|
revenue:"506.63",
|
|
|
|
|
yuan:"201",
|
|
|
|
|
speedUp:"0.89%",
|
|
|
|
|
proportion:"11%",
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
@ -110,10 +177,11 @@ export default {
|
|
|
|
|
// top: "3%",
|
|
|
|
|
// left: "10%",
|
|
|
|
|
// },
|
|
|
|
|
// backgroundColor: "#0f375f",
|
|
|
|
|
grid: {
|
|
|
|
|
top: "10%",
|
|
|
|
|
bottom: "25%", //也可设置left和right设置距离来控制图表的大小
|
|
|
|
|
top: "8%",
|
|
|
|
|
left: "3%",
|
|
|
|
|
right: "3%",
|
|
|
|
|
bottom: "35%", //也可设置left和right设置距离来控制图表的大小
|
|
|
|
|
},
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// trigger: "axis",
|
|
|
|
|
@ -133,147 +201,89 @@ export default {
|
|
|
|
|
// },
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: [
|
|
|
|
|
"当年完成水量",
|
|
|
|
|
"去年同期水量",
|
|
|
|
|
"滚动目标值水量",
|
|
|
|
|
"全年目标值水量",
|
|
|
|
|
"当年完成金额",
|
|
|
|
|
"去年同期金额",
|
|
|
|
|
"滚动目标金额",
|
|
|
|
|
"全年目标值",
|
|
|
|
|
"2019",
|
|
|
|
|
"2020",
|
|
|
|
|
"2021",
|
|
|
|
|
"2022",
|
|
|
|
|
"2023",
|
|
|
|
|
"2024",
|
|
|
|
|
],
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true, //隐藏X轴轴线
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#01FCE3",
|
|
|
|
|
// },
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#ccc",
|
|
|
|
|
opacity: 0.6,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true, //隐藏X轴刻度
|
|
|
|
|
show: false, //隐藏X轴刻度
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: "#ebf8ac", //X轴文字颜色
|
|
|
|
|
// },
|
|
|
|
|
color: "#666666", //X轴文字颜色
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "亿元",
|
|
|
|
|
// nameTextStyle: {
|
|
|
|
|
// // color: "#ebf8ac",
|
|
|
|
|
// },
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#FFFFFF",
|
|
|
|
|
// },
|
|
|
|
|
lineStyle :{
|
|
|
|
|
type: "dashed",
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: "#ebf8ac",
|
|
|
|
|
// },
|
|
|
|
|
color: "#666666",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// type: "value",
|
|
|
|
|
// // name: "同比",
|
|
|
|
|
// // nameTextStyle: {
|
|
|
|
|
// // color: "#ebf8ac",
|
|
|
|
|
// // },
|
|
|
|
|
// position: "right",
|
|
|
|
|
// splitLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// formatter: "{value} %", //右侧Y轴文字显示
|
|
|
|
|
// // textStyle: {
|
|
|
|
|
// // color: "#ebf8ac",
|
|
|
|
|
// // },
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// type: "value",
|
|
|
|
|
// gridIndex: 0,
|
|
|
|
|
// min: 50,
|
|
|
|
|
// max: 100,
|
|
|
|
|
// splitNumber: 8,
|
|
|
|
|
// splitLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// axisLine: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
// splitArea: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "销售水量",
|
|
|
|
|
type: "line",
|
|
|
|
|
// yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
// smooth: true, //平滑曲线显示 会让lineStyle的type设置的solid无效
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
|
|
symbolSize: 10, //标记的大小
|
|
|
|
|
itemStyle: {
|
|
|
|
|
//折线拐点标志的样式
|
|
|
|
|
color: "#058cff",
|
|
|
|
|
color: "#FFBB00",
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
},
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#058cff",
|
|
|
|
|
type: "solid",
|
|
|
|
|
color: "#FFBB00",
|
|
|
|
|
},
|
|
|
|
|
// 折线覆盖的颜色
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
// },
|
|
|
|
|
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
|
|
|
|
|
data: [4.8, 4.4, 5.4, 4.1, 3.6, 3.4],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "主营业务",
|
|
|
|
|
type: "bar",
|
|
|
|
|
// barWidth: 15,
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
// {
|
|
|
|
|
// offset: 0,
|
|
|
|
|
// color: "#00FFE3",
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// offset: 1,
|
|
|
|
|
// color: "#4693EC",
|
|
|
|
|
// },
|
|
|
|
|
// ]),
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
barWidth: 25,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
// {
|
|
|
|
|
// offset: 0,
|
|
|
|
|
// color: "#00FFE3",
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// offset: 1,
|
|
|
|
|
// color: "#4693EC",
|
|
|
|
|
// },
|
|
|
|
|
// ]),
|
|
|
|
|
// },
|
|
|
|
|
color: "#0086FF",
|
|
|
|
|
},
|
|
|
|
|
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
@ -283,6 +293,13 @@ export default {
|
|
|
|
|
active(e) {
|
|
|
|
|
this.activeIndex = e;
|
|
|
|
|
},
|
|
|
|
|
// 修改table背景色
|
|
|
|
|
tableRowClassName({row, rowIndex}){
|
|
|
|
|
if (rowIndex % 2 !== 0) {
|
|
|
|
|
return 'evenNumber-row';
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
