Skip to content

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

fix(产业融合): 样式待调整

上级 6b2d0c48
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 230 行增加 和 107 行删除
src/App.vue
浏览文件 @ 90d1c4d9
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<AppHead /> <AppHead />
<div class="main-warpper"> <div class="main-warpper">
<router-view > </router-view> <router-view> </router-view>
</div> </div>
</div> </div>
</template> </template>
...@@ -27,8 +27,11 @@ export default defineComponent({ ...@@ -27,8 +27,11 @@ export default defineComponent({
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@font-face {
font-family: "tabTypeFace";
src: url("../public/assets/tabTypeFace.TTF");
}
#app { #app {
height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -36,11 +39,14 @@ export default defineComponent({ ...@@ -36,11 +39,14 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-width: 1920px;
padding: 20px 30px;
background: #f5f9fb;
box-sizing: border-box;
} }
.main-warpper { .main-warpper {
padding: 0 20px 20px;
flex: 1; flex: 1;
background: #f5f9fb;
box-sizing: border-box; box-sizing: border-box;
} }
</style> </style>
src/components/mapTitle/index.vue
浏览文件 @ 90d1c4d9
...@@ -31,6 +31,7 @@ export default defineComponent({ ...@@ -31,6 +31,7 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 20px;
&::before { &::before {
content: " "; content: " ";
display: inline-block; display: inline-block;
...@@ -46,9 +47,10 @@ export default defineComponent({ ...@@ -46,9 +47,10 @@ export default defineComponent({
color: #666; color: #666;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
&:hover {
color: #4197ff; color: #4197ff;
} // &:hover {
// color: #4197ff;
// }
} }
} }
</style> </style>
\ No newline at end of file
src/layout/head.vue
浏览文件 @ 90d1c4d9
...@@ -164,7 +164,7 @@ export default defineComponent({ ...@@ -164,7 +164,7 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
.container { .container {
padding: 0 20px; // padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
} }
// 一级导航栏 // 一级导航栏
...@@ -220,7 +220,6 @@ export default defineComponent({ ...@@ -220,7 +220,6 @@ export default defineComponent({
// 行动轨迹记录 // 行动轨迹记录
.proceed-record { .proceed-record {
margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0 20px; padding: 0 20px;
background: #fff; background: #fff;
......
src/route/index.ts
浏览文件 @ 90d1c4d9
import { createRouter, createWebHistory } from "vue-router" import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
import evaluatIndicator from "./evaluatIndicator" import evaluatIndicator from "./evaluatIndicator"
...@@ -9,13 +9,11 @@ const routes: any[] = [ ...@@ -9,13 +9,11 @@ const routes: any[] = [
] ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHashHistory(),
routes, routes,
scrollBehavior(to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
return { top: 0 } return { top: 0 }
}, },
}) })
export default navigation(router); export default navigation(router);
\ No newline at end of file
src/views/evaluatIndicator/index/index.vue
浏览文件 @ 90d1c4d9
<template> <template>
<el-row class="map-warpper" :gutter="16"> <el-row class="map-warpper">
<el-col class="map-left" :span="8"> <el-col class="map-left">
<div class="performance-com card-item"><Performance /></div> <div class="performance-com card-item"><Performance /></div>
<div class="card-item rank-list"><RankList /></div> <div class="card-item rank-list"><RankList /></div>
</el-col> </el-col>
<el-col class="map-middle" :span="8"> <div class="map-middle" >
<div class="card-item"><Map /></div> <div class="card-item map-item"><Map /></div>
</el-col> </div>
<el-col class="map-right" :span="8"> <div class="map-right">
<div class="performance-com card-item"><InvestmentProgress /></div> <div class="performance-com card-item"><InvestmentProgress /></div>
<div class="card-item incom-graphic"><Income /></div> <div class="card-item incom-graphic"><Income /></div>
</el-col> </div>
</el-row> </el-row>
<!-- 卡片信息展示 --> <!-- 卡片信息展示 -->
...@@ -71,11 +71,11 @@ export default defineComponent({ ...@@ -71,11 +71,11 @@ export default defineComponent({
.card-item { .card-item {
background: #fff; background: #fff;
border-radius: 5px; border-radius: 5px;
padding: 15px 8px; padding: 16px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 2px 2px 10px #eee; box-shadow: 2px 2px 10px #04223d10;
// &:hover { // &:hover {
// // transform: translateY(-5px); // // transform: translateY(-5px);
...@@ -89,6 +89,10 @@ export default defineComponent({ ...@@ -89,6 +89,10 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
.map-left { .map-left {
min-width: 586px;
max-width: 586px;
box-sizing: border-box;
margin-right: 16px;
.rank-list { .rank-list {
margin-top: 16px; margin-top: 16px;
height: 312px; height: 312px;
...@@ -99,14 +103,25 @@ export default defineComponent({ ...@@ -99,14 +103,25 @@ export default defineComponent({
height: 640px; height: 640px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding-left: -8px !important; margin-right: 16px;
width: 100%;
height: 100%; // width: 100%;
min-width: 662px;
max-width: 662px;
.card-item { .card-item {
flex: 1; // flex: 1;
padding: 0;
}
.map-item {
min-width: 662px;
} }
} }
.map-right { .map-right {
min-width: 580px;
width: 580px;
box-sizing: border-box;
.incom-graphic { .incom-graphic {
margin-top: 16px; margin-top: 16px;
height: 312px; height: 312px;
......
src/views/evaluatIndicator/index/model/CardList/common.css
浏览文件 @ 90d1c4d9
...@@ -22,3 +22,10 @@ ...@@ -22,3 +22,10 @@
background: #f8f9fb; background: #f8f9fb;
border-radius: 5px; border-radius: 5px;
} }
.flex-row {
display: flex;
align-items: center;
}
.margin-left5{
margin-left: 5px;
}
\ No newline at end of file
src/views/evaluatIndicator/index/model/CardList/index.vue
浏览文件 @ 90d1c4d9
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
<el-row <el-row
v-for="item in infoList" v-for="item in infoList"
:key="item.label" :key="item.label"
class="font-size14 color-666 item-bg margin-bottom8" class="row-item font-size14 color-666 item-bg margin-bottom8"
justify="space-between" justify="space-between"
align="middle" align="middle"
> >
<el-col :span="18"> {{ item.label }}</el-col> <el-col :span="18"> {{ item.label }}</el-col>
<el-col :span="6"> <el-col :span="6">
<el-row align="middle"> <el-row align="middle" justify="end">
<span class="font-size20 color-pramiry">{{ item.value }}</span> <span class="font-size20 color-pramiry">{{ item.value }}</span>
<span class="font-size12 color-999">{{ item.unit }}</span> <span class="font-size12 color-999">{{ item.unit }}</span>
</el-row> </el-row>
...@@ -49,7 +49,7 @@ export default defineComponent({ ...@@ -49,7 +49,7 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./common.css"); @import url("./common.css");
.info { .info {
padding: 10px 5px; padding: 10px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
...@@ -62,5 +62,11 @@ export default defineComponent({ ...@@ -62,5 +62,11 @@ export default defineComponent({
.el-row { .el-row {
height: 28%; height: 28%;
} }
.row-item {
padding: 0 16px;
}
.row-text {
text-align: right;
}
} }
</style> </style>
src/views/evaluatIndicator/index/model/CardList/industrial.vue
浏览文件 @ 90d1c4d9
...@@ -85,7 +85,6 @@ export default defineComponent({ ...@@ -85,7 +85,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./common.css"); @import url("./common.css");
.info { .info {
padding: 10px 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
...@@ -113,11 +112,22 @@ export default defineComponent({ ...@@ -113,11 +112,22 @@ export default defineComponent({
margin-bottom: 0; margin-bottom: 0;
} }
.title { .title {
margin-left: 15px;
margin-bottom: 5px; margin-bottom: 5px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
position: relative;
&::before{
content: " ";
display: inline-block;
position: absolute;
top: 6px;
left: -12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #87bded;
}
} }
} }
} }
......
src/views/evaluatIndicator/index/model/CardList/strongArmy.vue
浏览文件 @ 90d1c4d9
...@@ -43,36 +43,43 @@ ...@@ -43,36 +43,43 @@
</div> </div>
<!-- foot --> <!-- foot -->
<el-row class="foot-wrapper" :gutter="10"> <el-row class="foot-wrapper " :gutter="16">
<el-col :span="16"> <el-col :span="15" class="foot-row-text">
<el-row class="item-bg margin-bottom8"> <el-row class="item-bg margin-bottom8">
<el-col class="font-size14 color-666">国防科技工业军品收入</el-col> <el-col class=" padding0-8 font-size14 color-666"
<el-col> >国防科技工业军品收入</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span> <span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span> <span class="font-size12 color-999">亿元</span>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="item-bg"> <el-row class="item-bg">
<el-col class="font-size14 color-666">民口单位军需品收入</el-col> <el-col class="padding0-8 font-size14 color-666"
<el-col> >民口单位军需品收入</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span> <span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span> <span class="font-size12 color-999">亿元</span>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col class="font-size14 color-666 item-bg" :span="8">
<el-col class="font-size14 color-666 item-bg" :span="9">
<el-row class="margin-bottom8"> <el-row class="margin-bottom8">
<el-col class="font-size14 color-666">应届大学生应征入伍</el-col> <el-col class="padding0-8 font-size14 color-666"
<el-col> >应届大学生应征入伍</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span> <span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">人</span> <span class="font-size12 color-999">人</span>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col class="font-size14 color-666">应征入伍率</el-col> <el-col class="padding0-8 font-size14 color-666">应征入伍率</el-col>
<el-col> <el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span> <span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span> <span class="font-size12 color-999">亿元</span>
</el-col> </el-col>
...@@ -101,19 +108,28 @@ export default defineComponent({ ...@@ -101,19 +108,28 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./common.css"); @import url("./common.css");
.info { .info {
padding: 10px 5px; padding: 10px 0;
.text-list { .text-list {
.el-row { .el-row {
margin-bottom: 6px; margin-bottom: 6px;
padding: 0 8px;
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
} }
.foot-row-text {
margin-left: 0 !important;
}
.foot-wrapper { .foot-wrapper {
margin-top: 10px; margin-top: 10px;
width: 100%;
.padding0-8 {
padding: 0 8px;
}
.margin-bottom8 { .margin-bottom8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
......
src/views/evaluatIndicator/index/model/CardList/systemConstruct.vue
浏览文件 @ 90d1c4d9
...@@ -12,42 +12,48 @@ ...@@ -12,42 +12,48 @@
2021年 2021年
</el-row> </el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between"> <el-row
<el-col class="font-size14 color-666" :span="18" class="item-bg margin-bottom12"
>各地召开融委全体会议次数</el-col align="middle"
justify="space-between"
> >
<el-col class="font-size20 color-pramiry" :span="5"> <el-col class="item-text font-size14 color-666" :span="16">
30 <span class="font-size12 color-999">次</span> 各地召开融委全体会议次数
</el-col>
<el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
30 <span class="margin-left5 font-size12 color-999">次</span>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between"> <el-row
<el-col class="font-size14 color-666" :span="18" class="item-bg margin-bottom12 flex-one"
>与当地军分区（警备区）建立并落实军地协作机制</el-col align="middle"
justify="space-between"
> >
<el-col class="font-size20 color-pramiry" :span="5"> <el-col class="item-text font-size14 color-666" :span="18">
30 <span class="font-size12 color-999">次</span> 与当地军分区（警备区）建立并落实军地协作机制
</el-col>
<el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
30 <span class="margin-left5 font-size12 color-999">次</span>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom12"> <el-row class="info-item font-size14 color-666 item-bg margin-bottom12">
<el-row class="title"> <el-row class="item-text title"> 各地军民融合办工作人员 </el-row>
各地军民融合办工作人员
</el-row>
<el-col :span="24"> <el-col :span="24">
<el-row justify="space-between"> <el-row justify="space-between">
<div class="item-row"> <div class="item-row">
<span class="font-size14 color-666">专职</span> <span class="font-size14 color-666">专职</span>
<el-col class="font-size20 color-pramiry"> <el-col class="jf-end flex-row font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span> 30 <span class="margin-left5 font-size12 color-999">人</span>
</el-col> </el-col>
</div> </div>
<div class="item-row"> <div class="item-row">
<span class="font-size14 color-666">兼职</span> <span class="font-size14 color-666">兼职</span>
<el-col class="font-size20 color-pramiry"> <el-col class="flex-row font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span> 30 <span class="margin-left5 font-size12 color-999">人</span>
</el-col> </el-col>
</div> </div>
</el-row> </el-row>
...@@ -77,7 +83,6 @@ export default defineComponent({ ...@@ -77,7 +83,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./common.css"); @import url("./common.css");
.info { .info {
padding: 0 5px 10px 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
...@@ -94,25 +99,50 @@ export default defineComponent({ ...@@ -94,25 +99,50 @@ export default defineComponent({
.info-item { .info-item {
margin-bottom: 10px; margin-bottom: 10px;
padding: 15px 10px; padding: 15px;
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.title { .title {
margin-bottom: 5px; margin-bottom: 5px;
color: #333; color: #333;
font-weight: bold;
} }
.item-row { .item-row {
padding: 0 20px; padding: 0 20px;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
text-align: center; div {
margin-top: -6px;
}
} }
} }
.color-pramiry { .color-pramiry {
text-align: center; text-align: center;
} }
.item-text {
margin-left: 15px;
color: #333;
position: relative;
&::before {
content: " ";
display: inline-block;
position: absolute;
top: 5px;
left: -10px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #87bded;
}
}
.flex-one{
flex-wrap: nowrap;
padding-right: 15px;
}
.jf-end{
justify-content: flex-end;
}
} }
</style> </style>
src/views/evaluatIndicator/index/model/Income/index.vue
浏览文件 @ 90d1c4d9
...@@ -10,8 +10,8 @@ import { defineComponent } from "vue"; ...@@ -10,8 +10,8 @@ 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";
enum Echart_color_Enum { enum Echart_color_Enum {
level_1 = "#fac858", level_1 = "#4198ff",
level_2 = "#4198ff", level_2 = "#4f5d81",
} }
const seriesData = [ const seriesData = [
...@@ -20,13 +20,13 @@ const seriesData = [ ...@@ -20,13 +20,13 @@ const seriesData = [
type: "level_1", type: "level_1",
echartType: "bar", echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85], growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [1820, 1032, 2045, 1852], barValue: [1820, 1332, 2045, 1852],
}, },
{ {
name: "民口单位军品收入", name: "民口单位军品收入",
type: "level_2", type: "level_2",
echartType: "bar", echartType: "bar",
barValue: [1232, 1264, 156, 2661, 15616], barValue: [1232, 1264, 2661, 15616],
growthRate: [50, 60, 70, 80, 80, 60, 85], growthRate: [50, 60, 70, 80, 80, 60, 85],
}, },
]; ];
...@@ -55,7 +55,7 @@ export default defineComponent({ ...@@ -55,7 +55,7 @@ export default defineComponent({
itemStyle: { itemStyle: {
color: Echart_color_Enum[item.type], color: Echart_color_Enum[item.type],
}, },
barWidth: 20,
data: item.barValue.map((barItem, barIndex) => { data: item.barValue.map((barItem, barIndex) => {
return { return {
value: barItem, value: barItem,
...@@ -91,8 +91,7 @@ export default defineComponent({ ...@@ -91,8 +91,7 @@ export default defineComponent({
}, },
className: "tooltip-income", className: "tooltip-income",
formatter: (params) => { formatter: (params) => {
let html = ""; let html = `<span class="year">${params[0].axisValue}年</span>`;
console.log("---", params);
params.forEach((item) => { params.forEach((item) => {
const { data = {} } = item; const { data = {} } = item;
...@@ -108,10 +107,12 @@ export default defineComponent({ ...@@ -108,10 +107,12 @@ export default defineComponent({
return html; return html;
}, },
}, },
legend: {}, legend: {
right: "2%",
},
grid: { grid: {
left: "0%", left: "2%",
right: "5%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
}, },
...@@ -155,16 +156,24 @@ export default defineComponent({ ...@@ -155,16 +156,24 @@ export default defineComponent({
}); });
</script> </script>
<style> <style>
.tooltip-income .year {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-income .title { .tooltip-income .title {
font-weight: 600; font-weight: 600;
color: #333; font-size: 12px;
color: #666;
} }
.tooltip-income .row-item { .tooltip-income .row-item {
padding: 0 15px 10px 15px; padding: 0 15px 10px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 12px;
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/InvestmentProgress/index.vue
浏览文件 @ 90d1c4d9
...@@ -11,7 +11,7 @@ import MapTitle from "@/components/mapTitle/index.vue"; ...@@ -11,7 +11,7 @@ import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
enum Bar_Enum { enum Bar_Enum {
level_1 = "#fac858", level_1 = "#fac858",
level_2 = "#4198ff", level_2 = "#1ba6eb",
} }
const seriesData = [ const seriesData = [
...@@ -19,15 +19,15 @@ const seriesData = [ ...@@ -19,15 +19,15 @@ const seriesData = [
name: "国防要求建设项目", name: "国防要求建设项目",
type: "level_1", type: "level_1",
echartType: "bar", echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85], growthRate: [80, 85, 95, 65, 85, 70, 85, 70, 80, 90, 40],
barValue: [820, 832, 901, 934, 1290, 1330, 1320], barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1180, 1292, 1000, 1205],
}, },
{ {
name: "省军民融合重大示范项目", name: "省军民融合重大示范项目",
type: "level_2", type: "level_2",
echartType: "bar", echartType: "bar",
barValue: [820, 832, 901, 934, 1290, 1330, 1320], barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1251, 1120, 1050, 888],
growthRate: [50, 60, 70, 80, 80, 60, 85], growthRate: [50, 60, 70, 80, 80, 60, 85, 62, 75, 85, 72],
}, },
]; ];
...@@ -67,6 +67,7 @@ export default defineComponent({ ...@@ -67,6 +67,7 @@ export default defineComponent({
itemStyle: { itemStyle: {
color: Bar_Enum[item.type], color: Bar_Enum[item.type],
}, },
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => { data: item.barValue.map((barItem, barIndex) => {
return { return {
...@@ -103,10 +104,9 @@ export default defineComponent({ ...@@ -103,10 +104,9 @@ export default defineComponent({
}, },
className: "tooltip-progress", className: "tooltip-progress",
formatter: (params) => { formatter: (params) => {
let html = ""; let html = `<span class="name">${params[0].axisValue}</span>`;
params.forEach((item) => { params.forEach((item) => {
const { data = {} } = item; const { data = {} } = item;
console.log(data);
html += `<div class="tooltip-progress"> html += `<div class="tooltip-progress">
<span class="title">${item.seriesName}</span> <span class="title">${item.seriesName}</span>
...@@ -120,16 +120,19 @@ export default defineComponent({ ...@@ -120,16 +120,19 @@ export default defineComponent({
return html; return html;
}, },
}, },
legend: {},
grid: { grid: {
left: "0%", left: "2%",
right: "5%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
},
legend: {
right: "2%"
}, },
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "金额(亿元)",
}, },
{ {
type: "value", type: "value",
...@@ -164,17 +167,29 @@ export default defineComponent({ ...@@ -164,17 +167,29 @@ export default defineComponent({
}); });
</script> </script>
<style> <style>
.tooltip-progress .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-progress .title { .tooltip-progress .title {
font-weight: 600; font-weight: 600;
color: #333; font-size: 12px;
color: #666;
} }
.tooltip-progress .row-item { .tooltip-progress .row-item {
padding: 0 15px 10px 15px; padding: 0 15px 10px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 12px;
color: #999;
justify-content: space-between; justify-content: space-between;
} }
.tooltip-progress .row-item div {
margin-right: 15px;
}
.tooltip-progress .row-item p { .tooltip-progress .row-item p {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
...@@ -193,7 +208,7 @@ export default defineComponent({ ...@@ -193,7 +208,7 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.investment-progress { .investment-progress {
flex: 1; flex: 1;
height: 250px; height: 245px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/evaluatIndicator/index/model/Map/index.vue
浏览文件 @ 90d1c4d9
...@@ -6,8 +6,9 @@ import { defineComponent } from "vue"; ...@@ -6,8 +6,9 @@ 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 "../../../../../../mocks/evaluatIndicator/mapGeoData.json"
import MapGeoData from "./mapGeoData" import MapGeoData from "./mapGeoData";
import MapPointList from "./mapPointList" import MapPointList from "./mapPointList";
export default defineComponent({ export default defineComponent({
...@@ -18,18 +19,16 @@ export default defineComponent({ ...@@ -18,18 +19,16 @@ export default defineComponent({
data() { data() {
return { return {
pointList: [], pointList: [],
mapEcharts: null mapEcharts: null,
}; };
}, },
computed: { computed: {
options() { options() {
return { return {
tooltip: { tooltip: {
borderColor: '#333', borderColor: "#333",
formatter: function (params) { formatter: function (params) {
return ( return params.name;
params.name
);
}, },
}, },
geo: { geo: {
...@@ -52,16 +51,19 @@ export default defineComponent({ ...@@ -52,16 +51,19 @@ export default defineComponent({
}, },
}, },
}, },
grid: {
top: "0",
left: "0%",
right: "0%",
bottom: "3%",
containLabel: true,
},
series: [ series: [
{ {
type: "scatter", type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
zlevel: 2, zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 2,
},
label: { label: {
normal: { normal: {
show: true, show: true,
...@@ -76,10 +78,11 @@ export default defineComponent({ ...@@ -76,10 +78,11 @@ export default defineComponent({
}, },
}, },
itemStyle: { itemStyle: {
color: '#f3696a', color: "#f3696a",
}, },
symbol: "pin", symbolKeepAspect: true,
symbolSize: 40, 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, data: this.pointList,
}, },
], ],
...@@ -94,7 +97,6 @@ export default defineComponent({ ...@@ -94,7 +97,6 @@ export default defineComponent({
const { data: getMapData } = MapGeoData; const { data: getMapData } = MapGeoData;
const { data: pointList } = MapPointList; 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"));
...@@ -120,10 +122,17 @@ export default defineComponent({ ...@@ -120,10 +122,17 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style >
.map-item canvas:first-of-type{
transform: scaleY(1.1) scaleX(1.3);
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.map-item { .map-item {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
</style> </style>
src/views/evaluatIndicator/index/model/Map/mapGeoData.js
浏览文件 @ 90d1c4d9
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论