Skip to content

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

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

上级 fa8f73d0
显示空白字符变更
内嵌 并排
正在显示 包含 1035 行增加 和 121 行删除
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
......@@ -68,8 +68,8 @@
"name": "舟山市",
"number": 62,
"value": [
122.106863,
30.016028
122.606863,
30.246028
]
},
{
......
src/route/evaluatIndicator.ts
浏览文件 @ b6cf9c10
/**
* 评价体系模块——路由
*/
export enum evaluatIndicatorRouter {
export enum EvaluatIndicatorRouter {
EVALUAT_INDICATOR = "/evaluatIndicator",
INDUSTRIAL = "/evaluatIndicator/industrial",
ARMY = "/evaluatIndicator/army",
......@@ -11,20 +11,20 @@ export enum evaluatIndicatorRouter {
export default [
{
path: evaluatIndicatorRouter.EVALUAT_INDICATOR,
path: EvaluatIndicatorRouter.EVALUAT_INDICATOR,
name: "EvaluatIndicator",
component: () => import("@/views/evaluatIndicator/index/index.vue")
},
{
path: evaluatIndicatorRouter.INDUSTRIAL,
path: EvaluatIndicatorRouter.INDUSTRIAL,
name: "Industrial",
component: () => import("@/views/evaluatIndicator/industrial/index.vue")
},
// {
// path: evaluatIndicatorRouter.ARMY,
// name: "Army",
// component: () => import("@/views/evaluatIndicator/army/index.vue")
// },
{
path: EvaluatIndicatorRouter.ARMY,
name: "Army",
component: () => import("@/views/evaluatIndicator/army/index.vue")
},
{
path: "/:pathMatch(.*)*",
redirect: "/evaluatIndicator",
......
src/views/evaluatIndicator/army/index.vue
浏览文件 @ b6cf9c10
......@@ -6,13 +6,8 @@
<el-col class="map-right" :span="16">
<el-row :gutter="16">
<el-col :span="12">
<div class="card-item">
<!-- <Person
echartsId="incomExtend"
echartsTitle="服务强军新军总览"
echartsDesText="主营业务收入趋势"
:cardItems="extendCardItems"
/> -->
<div class="economic-construct card-item">
<EconomicConstruct />
</div>
</el-col>
<el-col :span="12">
......@@ -43,6 +38,7 @@ import StrongArmy from "./model/StrongArmy/index.vue";
import Person from "./model/Person/index.vue";
import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue";
import EconomicConstruct from "./model/EconomicConstruct/index.vue";
export default defineComponent({
components: {
......@@ -50,6 +46,7 @@ export default defineComponent({
Person,
Science,
Munitions,
EconomicConstruct,
},
setup() {},
data() {
......@@ -85,19 +82,16 @@ export default defineComponent({
.map-warpper {
box-sizing: border-box;
.economic-construct {
flex: 1;
}
.map-right {
.card-item {
flex: 1;
// margin-right: 8px;
// padding-bottom: 0;
}
}
}
.footer-warpper {
margin-top: 20px;
.business-extend {
// height: 430px;
}
}
</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 @@
</el-col>
<el-col class="city-echarts" :span="15" :offset="1">
<div class="title">国防科技工业军品收入规模及增长率</div>
<div class="title">各市收入规模及增长率</div>
<div id="cityEcharts" class="echart-item"></div>
</el-col>
</el-row>
......@@ -43,8 +43,8 @@ const xAxisCity = [
"丽水",
];
const cityData = {
value: [820, 832, 901, 934, 1290],
rate: [60, 70, 75, 85, 80],
value: [820, 832, 901, 934, 1290, 794, 518, 213, 962, 1105, 888],
rate: [60, 70, 75, 85, 80, 51, 75, 56, 75, 78, 85],
};
/**
......@@ -73,7 +73,14 @@ export default defineComponent({
itemStyle: {
color: "#4198ff",
},
data: item.value,
barWidth: 20,
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
});
......@@ -89,7 +96,12 @@ export default defineComponent({
focus: "series",
},
data: item.rate,
data: item.rate.map((item) => {
return {
value: item,
label: "增长率",
};
}),
};
});
......@@ -99,8 +111,22 @@ export default defineComponent({
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#4198ff",
className: "munition-echart",
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: {},
......@@ -137,7 +163,14 @@ export default defineComponent({
itemStyle: {
color: "#4198ff",
},
data: cityData.value,
barWidth: 20,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
const seriesLine = {
......@@ -151,7 +184,12 @@ export default defineComponent({
focus: "series",
},
data: cityData.rate,
data: cityData.rate.map((item) => {
return {
value: item,
label: "增长率",
};
}),
};
return {
......@@ -160,8 +198,21 @@ export default defineComponent({
axisPointer: {
type: "shadow",
},
textStyle: {
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: {},
......@@ -223,25 +274,58 @@ export default defineComponent({
},
});
</script>
<style>
.business-pie-tooltip .title {
.munition-echart {
width: 110px;
}
.munition-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.business-pie-tooltip .pie-text {
.munition-echart .title {
padding-left: 10px;
margin-top: 5px;
font-weight: 600;
font-size: 12px;
display: flex;
justify-content: flex-end;
align-items: center;
color: #666;
position: relative;
}
.business-pie-tooltip .pie-text span {
color: #4198ff;
.munition-echart .title::before {
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;
}
.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 lang="scss" scoped>
.echart-item {
flex: 1;
......
src/views/evaluatIndicator/army/model/Person/index.vue
浏览文件 @ b6cf9c10
......@@ -23,13 +23,11 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const seriesData = [
{
// name: "国防要求建设项目",
value: [820, 832, 1260],
},
];
const xAxisValue = [
const seriesData = {
value: [30, 50, 80, 60, 89, 58, 75, 85, 62, 28, 25],
rate: [0.1, 0.5, 0.2, 0.3, 0.8, 0.6, 0.85, 0.12, 0.6, 0.3, 0.6],
};
const xAxisCity = [
"杭州",
"宁波",
"温州",
......@@ -62,44 +60,89 @@ export default defineComponent({
},
computed: {
optionBar() {
const seriesLine = seriesData.map((item) => {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: seriesData.value.map((item) => {
return {
value: item,
label: "入伍人数",
};
}),
};
const seriesLine = {
type: "line",
stack: "Total",
itemStyle: {
color: "#4198ff",
color: "#429a9d",
},
yAxisIndex: 1,
emphasis: {
focus: "series",
},
data: item.value,
data: seriesData.rate.map((item) => {
return {
value: item,
label: "入伍比率",
};
}),
};
});
return {
tooltip: {
trigger: "axis",
textStyle: {
color: "#4198ff",
axisPointer: {
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: {},
grid: {
top: "11%",
top: "12%",
left: "0%",
right: "5%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
yAxis: [
{
type: "value",
name: "规模(亿元)",
},
{
type: "value",
name: "人数"
name: "入伍率(%)",
min: 0,
max: 1,
},
],
xAxis: {
type: "category",
data: xAxisValue,
data: xAxisCity,
},
series: seriesLine,
series: [seriesBar, seriesLine],
};
},
},
......@@ -120,6 +163,56 @@ export default defineComponent({
},
});
</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>
.incom-echarts-line {
flex: 1;
......@@ -127,7 +220,7 @@ export default defineComponent({
box-sizing: border-box;
}
.describes {
margin: 0 10px 15px 0;
margin: 0 10px 12px 0;
box-sizing: border-box;
.card-items {
margin: 15px 0;
......
src/views/evaluatIndicator/army/model/Science/index.vue
浏览文件 @ b6cf9c10
<template>
<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>
</template>
<script lang="ts">
......@@ -10,14 +43,58 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const seriesData = [
{
const SeriesData = {
name: "国防要求建设项目",
type: "level_1",
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 = [
"杭州",
"宁波",
......@@ -42,6 +119,7 @@ export default defineComponent({
setup() {},
data() {
return {
seriesData: SeriesData,
mapEcharts: null,
};
},
......@@ -50,43 +128,54 @@ export default defineComponent({
},
computed: {
optionBar() {
const seriesBarList = seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
color: "#4198ff",
},
data: item.value,
};
});
const seriesLineList = seriesData.map((item) => {
return {
const seriesLine = {
type: "line",
stack: "Total",
itemStyle: {
color: "#fac858",
color: "#4198ff",
},
emphasis: {
focus: "series",
},
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4198ff",
},
{
offset: 1,
color: "#fff",
},
]),
},
data: item.value,
data: SeriesData.rate,
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#4198ff",
className: "science-echart",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}市</span>`;
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: {},
grid: {
top: "5%",
left: "0%",
right: "5%",
bottom: "3%",
......@@ -100,7 +189,7 @@ export default defineComponent({
type: "category",
data: xAxisValue,
},
series: [...seriesBarList, ...seriesLineList],
series: [seriesLine],
};
},
},
......@@ -121,15 +210,109 @@ export default defineComponent({
},
});
</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>
.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;
margin: 30px 0 10px 0;
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;
}
.incom-distribution {
flex: 1;
height: 300px;
height: 150px;
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/evaluatIndicator/army/model/StrongArmy/index.vue
浏览文件 @ b6cf9c10
......@@ -59,7 +59,7 @@ export default defineComponent({
setup() {},
data() {
return {
value: "",
value: 1,
options: [
{ label: "得分情况", value: 1 },
{ label: "军转民收入及增长率", value: 2 },
......@@ -68,7 +68,7 @@ export default defineComponent({
],
years: [2019, 2020, 2021],
curYearIndex: 0,
mapEcharts: null
mapEcharts: null,
};
},
mounted() {
......@@ -112,7 +112,8 @@ export default defineComponent({
show: true,
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({
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts
this.mapEcharts = mapEcharts;
},
yearHandle(index: number) {
this.curYearIndex = index;
......@@ -139,14 +140,13 @@ export default defineComponent({
});
</script>
<style>
.target-bar-tooltip .title{
.target-bar-tooltip .title {
color: #333;
font-weight: bold;
}
.target-bar-tooltip .bar-text {
padding-left: 10px;
color: #4198ff;
}
</style>
<style lang="scss" scoped>
......@@ -154,7 +154,7 @@ export default defineComponent({
padding-left: 10px;
.title {
color: #4198ff;
margin: 10px 0;
margin: 12px 0;
font-size: 14px;
}
.years {
......@@ -179,7 +179,7 @@ export default defineComponent({
.target-bar {
flex: 1;
height: 250px;
height: 260px;
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/evaluatIndicator/index/model/CardList/industrial.vue
浏览文件 @ b6cf9c10
......@@ -67,7 +67,7 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { Aim } from "@element-plus/icons";
import {evaluatIndicatorRouter} from "@/route/evaluatIndicator"
import {EvaluatIndicatorRouter} from "@/route/evaluatIndicator"
export default defineComponent({
components: {
......@@ -77,7 +77,7 @@ export default defineComponent({
setup() {},
methods: {
detailsHandle() {
this.$router.push(evaluatIndicatorRouter.INDUSTRIAL)
this.$router.push(EvaluatIndicatorRouter.INDUSTRIAL)
},
},
});
......
src/views/evaluatIndicator/index/model/CardList/strongArmy.vue
浏览文件 @ b6cf9c10
......@@ -94,6 +94,9 @@
*/
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import {
EvaluatIndicatorRouter
} from "@/route/evaluatIndicator"
export default defineComponent({
components: {
......@@ -101,7 +104,9 @@ export default defineComponent({
},
setup() {},
methods: {
detailsHandle() {},
detailsHandle() {
this.$router.push(EvaluatIndicatorRouter.ARMY);
},
},
});
</script>
......
src/views/evaluatIndicator/index/model/Income/index.vue
浏览文件 @ b6cf9c10
......@@ -128,6 +128,9 @@ export default defineComponent({
name: "增长率%",
min: 0,
max: 100,
splitLine: {
show: false,
},
},
],
xAxis: {
......
src/views/evaluatIndicator/index/model/Map/index.vue
浏览文件 @ b6cf9c10
......@@ -4,12 +4,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
// import mapGeoData from "../../../../../../mocks/evaluatIndicator/mapGeoData.json"
import MapGeoData from "./mapGeoData";
import MapPointList from "./mapPointList";
import { getMapGeoData, getMapPointList } from "../service";
export default defineComponent({
setup() {},
......@@ -63,7 +58,7 @@ export default defineComponent({
type: "scatter",
coordinateSystem: "geo",
zlevel: 2,
symbolOffset: [0, 0],
label: {
normal: {
show: true,
......@@ -81,7 +76,8 @@ export default defineComponent({
color: "#f3696a",
},
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,
data: this.pointList,
},
......@@ -91,14 +87,10 @@ export default defineComponent({
},
methods: {
async initEcharts() {
// const { data: getMapData } = await getMapGeoData();
// const { data: pointList } = await getMapPointList();
const { data: getMapData } = MapGeoData;
const { data: pointList } = MapPointList;
const { data: getMapData } = await getMapGeoData();
const { data: pointList } = await getMapPointList();
echarts.registerMap("ZJ", getMapData);
const mapEcharts = echarts.init(document.getElementById("map"));
mapEcharts.showLoading({ color: "#fff" });
......@@ -124,7 +116,7 @@ export default defineComponent({
</script>
<style >
.map-item canvas:first-of-type{
.map-item canvas:first-of-type {
transform: scaleY(1.1) scaleX(1.3);
}
</style>
......@@ -133,6 +125,5 @@ export default defineComponent({
flex: 1;
box-sizing: border-box;
height: 100%;
}
</style>
src/views/evaluatIndicator/index/model/Map/mapPointList.js
浏览文件 @ b6cf9c10
......@@ -68,8 +68,8 @@
"name": "舟山市",
"number": 62,
"value": [
122.106863,
30.016028
122.606863,
30.246028
]
},
{
......
src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue
浏览文件 @ b6cf9c10
......@@ -160,7 +160,6 @@ export default defineComponent({
.income-echart {
width: 110px;
}
.income-echart .name {
margin-bottom: 15px;
font-size: 14px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论