Skip to content

C
cxsfjx_project_echarts
提交 b6cf9c10 authored 作者: Your Name's avatar Your Name
浏览文件
操作

fix(服务强军兴军): 静态页面完成

上级 fa8f73d0
隐藏空白字符变更
内嵌 并排
正在显示 包含 1061 行增加 和 147 行删除
public/mocks/evaluatIndicator/mapGeoData.json
浏览文件 @ b6cf9c10
This source diff could not be displayed because it is too large. You can view the blob instead.
public/mocks/evaluatIndicator/mapPointList.json
浏览文件 @ b6cf9c10
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
"number": 62, "number": 62,
"value": [ "value": [
119.649506, 119.649506,
29.089524 29.089524
] ]
}, },
{ {
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
"name": "舟山市", "name": "舟山市",
"number": 62, "number": 62,
"value": [ "value": [
122.106863, 122.606863,
30.016028 30.246028
] ]
}, },
{ {
......
src/route/evaluatIndicator.ts
浏览文件 @ b6cf9c10
/** /**
* 评价体系模块——路由 * 评价体系模块——路由
*/ */
export enum evaluatIndicatorRouter { export enum EvaluatIndicatorRouter {
EVALUAT_INDICATOR = "/evaluatIndicator", EVALUAT_INDICATOR = "/evaluatIndicator",
INDUSTRIAL = "/evaluatIndicator/industrial", INDUSTRIAL = "/evaluatIndicator/industrial",
ARMY = "/evaluatIndicator/army", ARMY = "/evaluatIndicator/army",
...@@ -11,20 +11,20 @@ export enum evaluatIndicatorRouter { ...@@ -11,20 +11,20 @@ export enum evaluatIndicatorRouter {
export default [ export default [
{ {
path: evaluatIndicatorRouter.EVALUAT_INDICATOR, path: EvaluatIndicatorRouter.EVALUAT_INDICATOR,
name: "EvaluatIndicator", name: "EvaluatIndicator",
component: () => import("@/views/evaluatIndicator/index/index.vue") component: () => import("@/views/evaluatIndicator/index/index.vue")
}, },
{ {
path: evaluatIndicatorRouter.INDUSTRIAL, path: EvaluatIndicatorRouter.INDUSTRIAL,
name: "Industrial", name: "Industrial",
component: () => import("@/views/evaluatIndicator/industrial/index.vue") component: () => import("@/views/evaluatIndicator/industrial/index.vue")
}, },
// { {
// path: evaluatIndicatorRouter.ARMY, path: EvaluatIndicatorRouter.ARMY,
// name: "Army", name: "Army",
// component: () => import("@/views/evaluatIndicator/army/index.vue") component: () => import("@/views/evaluatIndicator/army/index.vue")
// }, },
{ {
path: "/:pathMatch(.*)*", path: "/:pathMatch(.*)*",
redirect: "/evaluatIndicator", redirect: "/evaluatIndicator",
......
src/views/evaluatIndicator/army/index.vue
浏览文件 @ b6cf9c10
...@@ -6,13 +6,8 @@ ...@@ -6,13 +6,8 @@
<el-col class="map-right" :span="16"> <el-col class="map-right" :span="16">
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="12"> <el-col :span="12">
<div class="card-item"> <div class="economic-construct card-item">
<!-- <Person <EconomicConstruct />
echartsId="incomExtend"
echartsTitle="服务强军新军总览"
echartsDesText="主营业务收入趋势"
:cardItems="extendCardItems"
/> -->
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
...@@ -43,6 +38,7 @@ import StrongArmy from "./model/StrongArmy/index.vue"; ...@@ -43,6 +38,7 @@ import StrongArmy from "./model/StrongArmy/index.vue";
import Person from "./model/Person/index.vue"; import Person from "./model/Person/index.vue";
import Science from "./model/Science/index.vue"; import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue"; import Munitions from "./model/Munitions/index.vue";
import EconomicConstruct from "./model/EconomicConstruct/index.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
...@@ -50,6 +46,7 @@ export default defineComponent({ ...@@ -50,6 +46,7 @@ export default defineComponent({
Person, Person,
Science, Science,
Munitions, Munitions,
EconomicConstruct,
}, },
setup() {}, setup() {},
data() { data() {
...@@ -85,19 +82,16 @@ export default defineComponent({ ...@@ -85,19 +82,16 @@ export default defineComponent({
.map-warpper { .map-warpper {
box-sizing: border-box; box-sizing: border-box;
.economic-construct {
flex: 1;
}
.map-right { .map-right {
.card-item { .card-item {
flex: 1; flex: 1;
// margin-right: 8px;
// padding-bottom: 0;
} }
} }
} }
.footer-warpper { .footer-warpper {
margin-top: 20px; margin-top: 20px;
.business-extend {
// height: 430px;
}
} }
</style> </style>
src/views/evaluatIndicator/army/model/EconomicConstruct/index.vue 0 → 100644
浏览文件 @ b6cf9c10
<template>
<MapTitle text="经济建设与国防密切相关的建设项目贯彻国防要求落实情况" />
<el-row class="economic-info" justify="space-between">
<el-col :span="11">
<div class="card-item">
<span class="card-text">国防要求建设项目</span>
<div class="info-wrapper">
<div class="info-details">
<div class="info-item">
<span class="title">项目数量</span>
<div><span>18</span>个</div>
</div>
<div class="info-item">
<span class="title">投资额</span>
<div><span>888</span>亿元</div>
</div>
</div>
<!-- 环形进度条 -->
<div id="circularEchart" class="circular"></div>
</div>
</div>
</el-col>
<el-col :span="1">
<el-divider direction="vertical"></el-divider>
</el-col>
<el-col class="increase-rate" :span="11">
<div class="card-item">
<span class="card-text">省军民融合重大示范项目</span>
<div class="info-wrapper">
<div class="info-details">
<div class="info-item">
<span class="title">项目数量</span>
<div><span>18</span>个</div>
</div>
<div class="info-item">
<span class="title">投资额</span>
<div><span>900</span>亿元</div>
</div>
</div>
<!-- 环形进度条 -->
<div id="cirRightEchart" class="circular"></div>
</div>
</div>
</el-col>
</el-row>
<div class="bar-title">各市"千百十"项目投资金额及进度情况</div>
<div id="economicConstruct" class="economic-construct"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = {
name: "国防要求建设项目",
type: "level_1",
value: [20, 20, 40, 52, 52, 44, 118, 132, 124, 156, 112],
rate: [
{
city: "杭州",
value: 20,
},
{
city: "宁波",
value: 30,
},
{
city: "温州",
value: 30,
},
{
city: "胡洲",
value: 70,
},
{
city: "嘉兴",
value: 80,
},
{
city: "绍兴",
value: 60,
},
{
city: "金华",
value: 40,
},
{
city: "衡州",
value: 30,
},
{
city: "舟山",
value: 10,
},
{
city: "台州",
value: 50,
},
{
city: "丽水",
value: 50,
},
],
};
const xAxisValue = [
"杭州",
"宁波",
"温州",
"胡洲",
"嘉兴",
"绍兴",
"金华",
"衡州",
"舟山",
"台州",
"丽水",
];
/**
* 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
seriesData: SeriesData,
mapEcharts: null,
cirLeftCharts: null,
cirRightEchart: null,
};
},
mounted() {
this.initEcharts();
this.initCircularEcharts();
},
computed: {
optionBar() {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: SeriesData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
const seriesLine = {
type: "line",
itemStyle: {
color: "#3aba67",
},
yAxisIndex: 1,
data: SeriesData.rate.map((item) => {
return {
value: item.value,
label: "项目进度",
};
}),
};
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "economic-echart",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="economic-echart ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="economic-echart">
<span class=" title color_2">${params[1].data.label}</span>
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`;
return html;
},
},
legend: {},
grid: {
top: "5%",
left: "0%",
right: "5%",
bottom: "3%",
containLabel: true,
},
yAxis: [
{
type: "value",
name: "金额(亿元)",
},
{
type: "value",
name: "进度%",
min: 0,
max: 100,
splitLine: {
show:false
}
},
],
xAxis: {
type: "category",
data: xAxisValue,
},
series: [seriesBar, seriesLine],
};
},
ptionCirLeft() {
const value = 1;
return {
backgroundColor: "#fff",
title: [
{
text: `建设进度`,
left: "45%",
top: "30%",
textAlign: "center",
textStyle: {
fontSize: "16",
fontWeight: "400",
color: "#333",
textAlign: "center",
},
subtext: `${(value * 100).toFixed(0)}%`,
subtextStyle: {
fontSize: "22",
color: "#3aba67",
textAlign: "center",
},
},
],
polar: {
radius: ["100%", "80%"],
},
angleAxis: {
max: 100,
clockwise: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
z: 2,
showBackground: true,
backgroundStyle: {
color: "#e3e3e3",
},
data: [value * 100],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [
{
offset: 0,
color: "#60f795",
},
{
offset: 0.7,
color: "#3aba67d6",
},
{
offset: 1,
color: "#3aba67",
},
]),
},
},
},
],
};
},
ptionCirRight() {
const value = 1;
return {
backgroundColor: "#fff",
title: [
{
text: `建设进度`,
left: "45%",
top: "30%",
textAlign: "center",
textStyle: {
fontSize: "16",
fontWeight: "400",
color: "#333",
textAlign: "center",
},
subtext: `${(value * 100).toFixed(0)}%`,
subtextStyle: {
fontSize: "22",
color: "#4198ff",
textAlign: "center",
},
},
],
polar: {
radius: ["100%", "80%"],
},
angleAxis: {
max: 100,
clockwise: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
z: 2,
showBackground: true,
backgroundStyle: {
color: "#e3e3e3",
},
data: [value * 100],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [
{
offset: 0,
color: "#7eb9ff",
},
{
offset: 0.7,
color: "#4198ffe8",
},
{
offset: 1,
color: "#4198ff",
},
]),
},
},
},
],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("economicConstruct");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
initCircularEcharts() {
const dom = document.getElementById("circularEchart");
const domCirRightEchart = document.getElementById("cirRightEchart");
const cirLeftCharts = echarts.init(dom);
const cirRightEchart = echarts.init(domCirRightEchart);
cirLeftCharts.setOption(this.ptionCirLeft);
cirRightEchart.setOption(this.ptionCirRight);
this.cirLeftCharts = cirLeftCharts;
this.cirRightEchart = cirRightEchart;
},
},
unmounted() {
if (this.mapEcharts) {
this.mapEcharts.dispose();
this.mapEcharts = null;
}
},
});
</script>
<style>
.economic-echart {
width: 110px;
}
.economic-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.economic-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.economic-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.economic-echart .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.economic-echart .text-color_1 {
color: #4198ff;
}
.economic-echart .text-color_2 {
color: #3aba67;
}
.economic-echart .color_1::before {
background: #4198ff;
}
.economic-echart .color_2::before {
background: #3aba67;
}
</style>
<style lang="scss" scoped>
.economic-info {
margin-top: 15px;
height: 150px;
box-sizing: border-box;
.card-text {
color: #4198ff;
margin: 8px 0;
}
.card-item {
.info-wrapper {
margin-top: 5px;
display: flex;
align-items: center;
.info-details {
.info-item {
padding-left: 12px;
&:first-of-type {
margin-bottom: 8px;
}
.title {
font-weight: bold;
color: #333;
font-size: 14px;
position: relative;
&::before {
position: absolute;
display: inline-block;
content: " ";
top: 5px;
left: -12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff8553;
}
}
div {
padding-left: 20px;
display: flex;
align-items: center;
font-size: 14px;
color: #999;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
.circular {
margin-left: 40px;
width: 100px;
height: 100px;
}
}
}
.el-divider{
margin: 15% auto;
height: 70%;
background: #f3f3f3;
}
}
.bar-title {
color: #4198ff;
margin-bottom: 10px;
}
.economic-construct {
flex: 1;
height: 150px;
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/evaluatIndicator/army/model/Munitions/index.vue
浏览文件 @ b6cf9c10
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</el-col> </el-col>
<el-col class="city-echarts" :span="15" :offset="1"> <el-col class="city-echarts" :span="15" :offset="1">
<div class="title">国防科技工业军品收入规模及增长率</div> <div class="title">各市收入规模及增长率</div>
<div id="cityEcharts" class="echart-item"></div> <div id="cityEcharts" class="echart-item"></div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -43,8 +43,8 @@ const xAxisCity = [ ...@@ -43,8 +43,8 @@ const xAxisCity = [
"丽水", "丽水",
]; ];
const cityData = { const cityData = {
value: [820, 832, 901, 934, 1290], value: [820, 832, 901, 934, 1290, 794, 518, 213, 962, 1105, 888],
rate: [60, 70, 75, 85, 80], rate: [60, 70, 75, 85, 80, 51, 75, 56, 75, 78, 85],
}; };
/** /**
...@@ -73,7 +73,14 @@ export default defineComponent({ ...@@ -73,7 +73,14 @@ export default defineComponent({
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
data: item.value, barWidth: 20,
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
}; };
}); });
...@@ -89,7 +96,12 @@ export default defineComponent({ ...@@ -89,7 +96,12 @@ export default defineComponent({
focus: "series", focus: "series",
}, },
data: item.rate, data: item.rate.map((item) => {
return {
value: item,
label: "增长率",
};
}),
}; };
}); });
...@@ -99,8 +111,22 @@ export default defineComponent({ ...@@ -99,8 +111,22 @@ export default defineComponent({
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
textStyle: { className: "munition-echart",
color: "#4198ff", formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}年</span>`;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="munition-echart">
<span class=" title color_2">${params[1].data.label}</span>
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`;
return html;
}, },
}, },
legend: {}, legend: {},
...@@ -137,7 +163,14 @@ export default defineComponent({ ...@@ -137,7 +163,14 @@ export default defineComponent({
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
data: cityData.value, barWidth: 20,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
}; };
const seriesLine = { const seriesLine = {
...@@ -151,7 +184,12 @@ export default defineComponent({ ...@@ -151,7 +184,12 @@ export default defineComponent({
focus: "series", focus: "series",
}, },
data: cityData.rate, data: cityData.rate.map((item) => {
return {
value: item,
label: "增长率",
};
}),
}; };
return { return {
...@@ -160,8 +198,21 @@ export default defineComponent({ ...@@ -160,8 +198,21 @@ export default defineComponent({
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
textStyle: { formatter: (params) => {
color: "#4198ff", let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="munition-echart">
<span class=" title color_2">${params[1].data.label}</span>
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`;
return html;
}, },
}, },
legend: {}, legend: {},
...@@ -223,25 +274,58 @@ export default defineComponent({ ...@@ -223,25 +274,58 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style> <style>
.business-pie-tooltip .title { .munition-echart {
width: 110px;
}
.munition-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
.business-pie-tooltip .pie-text { .munition-echart .title {
padding-left: 10px; padding-left: 10px;
margin-top: 5px; font-weight: 600;
font-size: 12px; font-size: 12px;
display: flex; color: #666;
justify-content: flex-end; position: relative;
align-items: center;
} }
.business-pie-tooltip .pie-text span { .munition-echart .title::before {
color: #4198ff; position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.munition-echart .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px; font-size: 20px;
} }
.munition-echart .text:last-of-type {
margin: 0;
}
.munition-echart .text-color_1 {
color: #4198ff;
}
.munition-echart .text-color_2 {
color: #eca933;
}
.munition-echart .color_1::before {
background: #4198ff;
}
.munition-echart .color_2::before {
background: #eca933;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.echart-item { .echart-item {
flex: 1; flex: 1;
......
src/views/evaluatIndicator/army/model/Person/index.vue
浏览文件 @ b6cf9c10
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="value-des"><span>500</span>亿元</div> <div class="value-des"><span>500</span>亿元</div>
</div> </div>
<div class="item"> <div class="item">
<span>入伍总比列</span> <span>入伍总比列</span>
<div class="value-des"><span>5%</span></div> <div class="value-des"><span>5%</span></div>
</div> </div>
...@@ -23,13 +23,11 @@ import { defineComponent } from "vue"; ...@@ -23,13 +23,11 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const seriesData = [ const seriesData = {
{ value: [30, 50, 80, 60, 89, 58, 75, 85, 62, 28, 25],
// name: "国防要求建设项目", rate: [0.1, 0.5, 0.2, 0.3, 0.8, 0.6, 0.85, 0.12, 0.6, 0.3, 0.6],
value: [820, 832, 1260], };
}, const xAxisCity = [
];
const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
"温州", "温州",
...@@ -62,44 +60,89 @@ export default defineComponent({ ...@@ -62,44 +60,89 @@ export default defineComponent({
}, },
computed: { computed: {
optionBar() { optionBar() {
const seriesLine = seriesData.map((item) => { const seriesBar = {
return { type: "bar",
type: "line", itemStyle: {
itemStyle: { color: "#4198ff",
color: "#4198ff", },
}, barWidth: 20,
emphasis: {
focus: "series", data: seriesData.value.map((item) => {
}, return {
value: item,
data: item.value, label: "入伍人数",
}; };
}); }),
};
const seriesLine = {
type: "line",
stack: "Total",
itemStyle: {
color: "#429a9d",
},
yAxisIndex: 1,
emphasis: {
focus: "series",
},
data: seriesData.rate.map((item) => {
return {
value: item,
label: "入伍比率",
};
}),
};
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
textStyle: { axisPointer: {
color: "#4198ff", type: "shadow",
},
className: "person-echart",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="person-echart ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="person-echart">
<span class=" title color_2">${params[1].data.label}</span>
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`;
return html;
}, },
}, },
legend: {}, legend: {},
grid: { grid: {
top: "11%", top: "12%",
left: "0%", left: "0%",
right: "5%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
}, },
yAxis: { yAxis: [
type: "value", {
name: "人数" type: "value",
}, name: "规模(亿元)",
},
{
type: "value",
name: "入伍率(%)",
min: 0,
max: 1,
},
],
xAxis: { xAxis: {
type: "category", type: "category",
data: xAxisValue, data: xAxisCity,
}, },
series: seriesLine, series: [seriesBar, seriesLine],
}; };
}, },
}, },
...@@ -120,6 +163,56 @@ export default defineComponent({ ...@@ -120,6 +163,56 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style>
.person-echart {
width: 110px;
}
.person-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.person-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.person-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.person-echart .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.person-echart .text:last-of-type {
margin: 0;
}
.person-echart .text-color_1 {
color: #4198ff;
}
.person-echart .text-color_2 {
color: #429a9d;
}
.person-echart .color_1::before {
background: #4198ff;
}
.person-echart .color_2::before {
background: #429a9d;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.incom-echarts-line { .incom-echarts-line {
flex: 1; flex: 1;
...@@ -127,7 +220,7 @@ export default defineComponent({ ...@@ -127,7 +220,7 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
} }
.describes { .describes {
margin: 0 10px 15px 0; margin: 0 10px 12px 0;
box-sizing: border-box; box-sizing: border-box;
.card-items { .card-items {
margin: 15px 0; margin: 15px 0;
......
src/views/evaluatIndicator/army/model/Science/index.vue
浏览文件 @ b6cf9c10
<template> <template>
<MapTitle text="民口单位服务武器装备科研生产情况" /> <MapTitle text="民口单位服务武器装备科研生产情况" />
<el-row class="science-info" justify="space-between">
<el-col :span="11">
<div class="card-item">
<span>民口单位军品收入</span>
<div>10<span>亿元</span></div>
</div>
<div class="title">主营业务收入分布</div> <div class="card-item">
<span>人均民口单位军品收入</span>
<div>10<span>万元</span></div>
</div>
</el-col>
<el-col class="increase-rate" :span="12">
<div class="title">城市增长率</div>
<div class="rate-list">
<div class="rate-list-head rate-list-item">
<span>城市</span>
<span>增长率</span>
</div>
<el-scrollbar height="92px">
<div
class="rate-list-item"
v-for="(item, index) in seriesData.rate"
:key="index"
>
<span>{{ item.city }}</span>
<span class="rate-value">{{ item.value }}%</span>
</div>
</el-scrollbar>
</div>
</el-col>
</el-row>
<div class="science-title">各市民口单位军品收入</div>
<div id="incomDistribution" class="incom-distribution"></div> <div id="incomDistribution" class="incom-distribution"></div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -10,14 +43,58 @@ import { defineComponent } from "vue"; ...@@ -10,14 +43,58 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const seriesData = [ const SeriesData = {
{ name: "国防要求建设项目",
name: "国防要求建设项目", type: "level_1",
type: "level_1", value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [820, 832, 901, 934, 1290, 1330, 1320], rate: [
}, {
]; city: "杭州",
value: 20,
},
{
city: "宁波",
value: 30,
},
{
city: "温州",
value: 30,
},
{
city: "胡洲",
value: 70,
},
{
city: "嘉兴",
value: 80,
},
{
city: "绍兴",
value: 60,
},
{
city: "金华",
value: 40,
},
{
city: "衡州",
value: 30,
},
{
city: "舟山",
value: 10,
},
{
city: "台州",
value: 50,
},
{
city: "丽水",
value: 50,
},
],
};
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -42,6 +119,7 @@ export default defineComponent({ ...@@ -42,6 +119,7 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
seriesData: SeriesData,
mapEcharts: null, mapEcharts: null,
}; };
}, },
...@@ -50,43 +128,54 @@ export default defineComponent({ ...@@ -50,43 +128,54 @@ export default defineComponent({
}, },
computed: { computed: {
optionBar() { optionBar() {
const seriesBarList = seriesData.map((item) => { const seriesLine = {
return { type: "line",
type: "bar", itemStyle: {
itemStyle: { color: "#4198ff",
color: "#4198ff", },
}, emphasis: {
data: item.value, focus: "series",
}; },
}); label: {
show: true,
const seriesLineList = seriesData.map((item) => { position: "top",
return { },
type: "line", areaStyle: {
stack: "Total", opacity: 0.8,
itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: "#fac858", {
}, offset: 0,
emphasis: { color: "#4198ff",
focus: "series", },
}, {
offset: 1,
color: "#fff",
},
]),
},
data: item.value, data: SeriesData.rate,
}; };
});
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { className: "science-echart",
type: "shadow", formatter: (params) => {
}, let html = `<span class="name">${params[0].axisValue}市</span>`;
textStyle: {
color: "#4198ff", html += `<div class="science-echart ">
<span class=" title color_1">民口单位军品收入</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>`;
return html;
}, },
}, },
legend: {}, legend: {},
grid: { grid: {
top: "5%",
left: "0%", left: "0%",
right: "5%", right: "5%",
bottom: "3%", bottom: "3%",
...@@ -100,7 +189,7 @@ export default defineComponent({ ...@@ -100,7 +189,7 @@ export default defineComponent({
type: "category", type: "category",
data: xAxisValue, data: xAxisValue,
}, },
series: [...seriesBarList, ...seriesLineList], series: [seriesLine],
}; };
}, },
}, },
...@@ -121,15 +210,109 @@ export default defineComponent({ ...@@ -121,15 +210,109 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style>
.science-echart {
width: 110px;
}
.science-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.science-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.science-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.science-echart .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.science-echart .text-color_1 {
color: #4198ff;
}
.science-echart .color_1::before {
background: #4198ff;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .science-info {
margin-top: 15px;
height: 150px;
box-sizing: border-box;
.card-item {
color: #333;
padding: 8px 15px;
box-sizing: border-box;
background: #f8f9fb;
border-radius: 5px;
margin-bottom: 8px;
&:last-of-type {
margin-bottom: 0;
}
div {
color: #4198ff;
font-size: 24px;
display: flex;
align-items: center;
span {
margin-left: 10px;
font-size: 14px;
color: #999;
}
}
}
.increase-rate {
.title {
color: #4198ff;
margin-bottom: 5px;
}
.rate-list {
.rate-list-item {
padding: 5px 40px 5px 20px;
display: flex;
align-items: center;
font-size: 12px;
color: #666;
justify-content: space-between;
}
.rate-list-head {
background: #ddeaf8;
}
.el-scrollbar {
background: #f8f9fb;
}
.rate-value {
color: #4198ff;
}
}
}
}
.science-title {
color: #4198ff; color: #4198ff;
margin: 30px 0 10px 0;
font-size: 14px;
} }
.incom-distribution { .incom-distribution {
flex: 1; flex: 1;
height: 300px; height: 150px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/evaluatIndicator/army/model/StrongArmy/index.vue
浏览文件 @ b6cf9c10
...@@ -59,7 +59,7 @@ export default defineComponent({ ...@@ -59,7 +59,7 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
value: "", value: 1,
options: [ options: [
{ label: "得分情况", value: 1 }, { label: "得分情况", value: 1 },
{ label: "军转民收入及增长率", value: 2 }, { label: "军转民收入及增长率", value: 2 },
...@@ -68,7 +68,7 @@ export default defineComponent({ ...@@ -68,7 +68,7 @@ export default defineComponent({
], ],
years: [2019, 2020, 2021], years: [2019, 2020, 2021],
curYearIndex: 0, curYearIndex: 0,
mapEcharts: null mapEcharts: null,
}; };
}, },
mounted() { mounted() {
...@@ -112,7 +112,8 @@ export default defineComponent({ ...@@ -112,7 +112,8 @@ export default defineComponent({
show: true, show: true,
position: "top", position: "top",
}, },
data: [20, 60, 70, 80, 68, 75, 80], barWidth: 20,
data: [20, 60, 70, 80, 68, 75, 80, 51, 26, 12, 35],
}, },
], ],
}; };
...@@ -123,7 +124,7 @@ export default defineComponent({ ...@@ -123,7 +124,7 @@ export default defineComponent({
const dom = document.getElementById("TargetBar"); const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar); mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts this.mapEcharts = mapEcharts;
}, },
yearHandle(index: number) { yearHandle(index: number) {
this.curYearIndex = index; this.curYearIndex = index;
...@@ -139,14 +140,13 @@ export default defineComponent({ ...@@ -139,14 +140,13 @@ export default defineComponent({
}); });
</script> </script>
<style> <style>
.target-bar-tooltip .title{ .target-bar-tooltip .title {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
.target-bar-tooltip .bar-text { .target-bar-tooltip .bar-text {
padding-left: 10px; padding-left: 10px;
color: #4198ff; color: #4198ff;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -154,7 +154,7 @@ export default defineComponent({ ...@@ -154,7 +154,7 @@ export default defineComponent({
padding-left: 10px; padding-left: 10px;
.title { .title {
color: #4198ff; color: #4198ff;
margin: 10px 0; margin: 12px 0;
font-size: 14px; font-size: 14px;
} }
.years { .years {
...@@ -179,7 +179,7 @@ export default defineComponent({ ...@@ -179,7 +179,7 @@ export default defineComponent({
.target-bar { .target-bar {
flex: 1; flex: 1;
height: 250px; height: 260px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/evaluatIndicator/index/model/CardList/industrial.vue
浏览文件 @ b6cf9c10
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons"; import { Aim } from "@element-plus/icons";
import {evaluatIndicatorRouter} from "@/route/evaluatIndicator" import {EvaluatIndicatorRouter} from "@/route/evaluatIndicator"
export default defineComponent({ export default defineComponent({
components: { components: {
...@@ -77,7 +77,7 @@ export default defineComponent({ ...@@ -77,7 +77,7 @@ export default defineComponent({
setup() {}, setup() {},
methods: { methods: {
detailsHandle() { detailsHandle() {
this.$router.push(evaluatIndicatorRouter.INDUSTRIAL) this.$router.push(EvaluatIndicatorRouter.INDUSTRIAL)
}, },
}, },
}); });
......
src/views/evaluatIndicator/index/model/CardList/strongArmy.vue
浏览文件 @ b6cf9c10
...@@ -94,6 +94,9 @@ ...@@ -94,6 +94,9 @@
*/ */
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
import {
EvaluatIndicatorRouter
} from "@/route/evaluatIndicator"
export default defineComponent({ export default defineComponent({
components: { components: {
...@@ -101,7 +104,9 @@ export default defineComponent({ ...@@ -101,7 +104,9 @@ export default defineComponent({
}, },
setup() {}, setup() {},
methods: { methods: {
detailsHandle() {}, detailsHandle() {
this.$router.push(EvaluatIndicatorRouter.ARMY);
},
}, },
}); });
</script> </script>
......
src/views/evaluatIndicator/index/model/Income/index.vue
浏览文件 @ b6cf9c10
...@@ -128,6 +128,9 @@ export default defineComponent({ ...@@ -128,6 +128,9 @@ export default defineComponent({
name: "增长率%", name: "增长率%",
min: 0, min: 0,
max: 100, max: 100,
splitLine: {
show: false,
},
}, },
], ],
xAxis: { xAxis: {
...@@ -173,7 +176,7 @@ export default defineComponent({ ...@@ -173,7 +176,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
color: #999; color: #999;
justify-content: space-between; justify-content: space-between;
} }
.tooltip-income .row-item div { .tooltip-income .row-item div {
......
src/views/evaluatIndicator/index/model/Map/index.vue
浏览文件 @ b6cf9c10
...@@ -4,12 +4,7 @@ ...@@ -4,12 +4,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service"; import { getMapGeoData, getMapPointList } from "../service";
// import mapGeoData from "../../../../../../mocks/evaluatIndicator/mapGeoData.json"
import MapGeoData from "./mapGeoData";
import MapPointList from "./mapPointList";
export default defineComponent({ export default defineComponent({
setup() {}, setup() {},
...@@ -63,7 +58,7 @@ export default defineComponent({ ...@@ -63,7 +58,7 @@ export default defineComponent({
type: "scatter", type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
zlevel: 2, zlevel: 2,
symbolOffset: [0, 0],
label: { label: {
normal: { normal: {
show: true, show: true,
...@@ -81,7 +76,8 @@ export default defineComponent({ ...@@ -81,7 +76,8 @@ export default defineComponent({
color: "#f3696a", color: "#f3696a",
}, },
symbolKeepAspect: true, symbolKeepAspect: true,
symbol: 'path://M6.09,0a5,5,0,0,0-5,5c0,2.77,5,9.28,5,9.28s5-6.51,5-9.28A5,5,0,0,0,6.09,0Zm0,7.41A2.29,2.29,0,1,1,8.38,5.12,2.31,2.31,0,0,1,6.09,7.41Z', symbol:
"path://M6.09,0a5,5,0,0,0-5,5c0,2.77,5,9.28,5,9.28s5-6.51,5-9.28A5,5,0,0,0,6.09,0Zm0,7.41A2.29,2.29,0,1,1,8.38,5.12,2.31,2.31,0,0,1,6.09,7.41Z",
symbolSize: 16, symbolSize: 16,
data: this.pointList, data: this.pointList,
}, },
...@@ -91,14 +87,10 @@ export default defineComponent({ ...@@ -91,14 +87,10 @@ export default defineComponent({
}, },
methods: { methods: {
async initEcharts() { async initEcharts() {
// const { data: getMapData } = await getMapGeoData(); const { data: getMapData } = await getMapGeoData();
// const { data: pointList } = await getMapPointList(); const { data: pointList } = await getMapPointList();
const { data: getMapData } = MapGeoData;
const { data: pointList } = MapPointList;
echarts.registerMap("ZJ", getMapData); echarts.registerMap("ZJ", getMapData);
const mapEcharts = echarts.init(document.getElementById("map")); const mapEcharts = echarts.init(document.getElementById("map"));
mapEcharts.showLoading({ color: "#fff" }); mapEcharts.showLoading({ color: "#fff" });
...@@ -124,7 +116,7 @@ export default defineComponent({ ...@@ -124,7 +116,7 @@ export default defineComponent({
</script> </script>
<style > <style >
.map-item canvas:first-of-type{ .map-item canvas:first-of-type {
transform: scaleY(1.1) scaleX(1.3); transform: scaleY(1.1) scaleX(1.3);
} }
</style> </style>
...@@ -133,6 +125,5 @@ export default defineComponent({ ...@@ -133,6 +125,5 @@ export default defineComponent({
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
</style> </style>
src/views/evaluatIndicator/index/model/Map/mapPointList.js
浏览文件 @ b6cf9c10
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
"name": "舟山市", "name": "舟山市",
"number": 62, "number": 62,
"value": [ "value": [
122.106863, 122.606863,
30.016028 30.246028
] ]
}, },
{ {
......
src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue
浏览文件 @ b6cf9c10
...@@ -160,7 +160,6 @@ export default defineComponent({ ...@@ -160,7 +160,6 @@ export default defineComponent({
.income-echart { .income-echart {
width: 110px; width: 110px;
} }
.income-echart .name { .income-echart .name {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 14px; font-size: 14px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论