Skip to content

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

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

上级 6b2d0c48
显示空白字符变更
内嵌 并排
正在显示 包含 530 行增加 和 161 行删除
src/App.vue
浏览文件 @ 90d1c4d9
......@@ -5,7 +5,7 @@
<AppHead />
<div class="main-warpper">
<router-view > </router-view>
<router-view> </router-view>
</div>
</div>
</template>
......@@ -27,8 +27,11 @@ export default defineComponent({
padding: 0;
margin: 0;
}
@font-face {
font-family: "tabTypeFace";
src: url("../public/assets/tabTypeFace.TTF");
}
#app {
height: 100vh;
box-sizing: border-box;
}
......@@ -36,11 +39,14 @@ export default defineComponent({
display: flex;
flex-direction: column;
height: 100%;
min-width: 1920px;
padding: 20px 30px;
background: #f5f9fb;
box-sizing: border-box;
}
.main-warpper {
padding: 0 20px 20px;
flex: 1;
background: #f5f9fb;
box-sizing: border-box;
}
</style>
src/components/mapTitle/index.vue
浏览文件 @ 90d1c4d9
......@@ -31,6 +31,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
&::before {
content: " ";
display: inline-block;
......@@ -46,9 +47,10 @@ export default defineComponent({
color: #666;
cursor: pointer;
font-size: 14px;
&:hover {
color: #4197ff;
}
// &:hover {
// color: #4197ff;
// }
}
}
</style>
\ No newline at end of file
src/layout/head.vue
浏览文件 @ 90d1c4d9
......@@ -164,7 +164,7 @@ export default defineComponent({
box-sizing: border-box;
.container {
padding: 0 20px;
// padding: 0 20px;
box-sizing: border-box;
}
// 一级导航栏
......@@ -220,7 +220,6 @@ export default defineComponent({
// 行动轨迹记录
.proceed-record {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 20px;
background: #fff;
......
src/route/index.ts
浏览文件 @ 90d1c4d9
import { createRouter, createWebHistory } from "vue-router"
import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
import evaluatIndicator from "./evaluatIndicator"
......@@ -9,13 +9,11 @@ const routes: any[] = [
]
const router = createRouter({
history: createWebHistory(),
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
},
})
export default navigation(router);
\ No newline at end of file
src/views/evaluatIndicator/index/index.vue
浏览文件 @ 90d1c4d9
<template>
<el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8">
<el-row class="map-warpper">
<el-col class="map-left">
<div class="performance-com card-item"><Performance /></div>
<div class="card-item rank-list"><RankList /></div>
</el-col>
<el-col class="map-middle" :span="8">
<div class="card-item"><Map /></div>
</el-col>
<el-col class="map-right" :span="8">
<div class="map-middle" >
<div class="card-item map-item"><Map /></div>
</div>
<div class="map-right">
<div class="performance-com card-item"><InvestmentProgress /></div>
<div class="card-item incom-graphic"><Income /></div>
</el-col>
</div>
</el-row>
<!-- 卡片信息展示 -->
......@@ -71,11 +71,11 @@ export default defineComponent({
.card-item {
background: #fff;
border-radius: 5px;
padding: 15px 8px;
padding: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
box-shadow: 2px 2px 10px #04223d10;
// &:hover {
// // transform: translateY(-5px);
......@@ -89,6 +89,10 @@ export default defineComponent({
box-sizing: border-box;
flex: 1;
.map-left {
min-width: 586px;
max-width: 586px;
box-sizing: border-box;
margin-right: 16px;
.rank-list {
margin-top: 16px;
height: 312px;
......@@ -99,14 +103,25 @@ export default defineComponent({
height: 640px;
box-sizing: border-box;
display: flex;
padding-left: -8px !important;
width: 100%;
height: 100%;
margin-right: 16px;
// width: 100%;
min-width: 662px;
max-width: 662px;
.card-item {
flex: 1;
// flex: 1;
padding: 0;
}
.map-item {
min-width: 662px;
}
}
.map-right {
min-width: 580px;
width: 580px;
box-sizing: border-box;
.incom-graphic {
margin-top: 16px;
height: 312px;
......
src/views/evaluatIndicator/index/model/CardList/common.css
浏览文件 @ 90d1c4d9
......@@ -22,3 +22,10 @@
background: #f8f9fb;
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 @@
<el-row
v-for="item in infoList"
: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"
align="middle"
>
<el-col :span="18"> {{ item.label }}</el-col>
<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-size12 color-999">{{ item.unit }}</span>
</el-row>
......@@ -49,7 +49,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
padding: 10px 0;
display: flex;
flex-direction: column;
height: 100%;
......@@ -62,5 +62,11 @@ export default defineComponent({
.el-row {
height: 28%;
}
.row-item {
padding: 0 16px;
}
.row-text {
text-align: right;
}
}
</style>
src/views/evaluatIndicator/index/model/CardList/industrial.vue
浏览文件 @ 90d1c4d9
......@@ -85,7 +85,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
......@@ -113,11 +112,22 @@ export default defineComponent({
margin-bottom: 0;
}
.title {
margin-left: 15px;
margin-bottom: 5px;
color: #333;
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 @@
</div>
<!-- foot -->
<el-row class="foot-wrapper" :gutter="10">
<el-col :span="16">
<el-row class="foot-wrapper " :gutter="16">
<el-col :span="15" class="foot-row-text">
<el-row class="item-bg margin-bottom8">
<el-col class="font-size14 color-666">国防科技工业军品收入</el-col>
<el-col>
<el-col class=" padding0-8 font-size14 color-666"
>国防科技工业军品收入</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
<el-row class="item-bg">
<el-col class="font-size14 color-666">民口单位军需品收入</el-col>
<el-col>
<el-col class="padding0-8 font-size14 color-666"
>民口单位军需品收入</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
</el-row>
</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-col class="font-size14 color-666">应届大学生应征入伍</el-col>
<el-col>
<el-col class="padding0-8 font-size14 color-666"
>应届大学生应征入伍</el-col
>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">人</span>
</el-col>
</el-row>
<el-row>
<el-col class="font-size14 color-666">应征入伍率</el-col>
<el-col>
<el-col class="padding0-8 font-size14 color-666">应征入伍率</el-col>
<el-col class="padding0-8">
<span class="font-size20 color-pramiry">30</span>
<span class="font-size12 color-999">亿元</span>
</el-col>
......@@ -101,19 +108,28 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 10px 5px;
padding: 10px 0;
.text-list {
.el-row {
margin-bottom: 6px;
padding: 0 8px;
&:last-of-type {
margin-bottom: 0;
}
}
}
}
.foot-row-text {
margin-left: 0 !important;
}
.foot-wrapper {
margin-top: 10px;
width: 100%;
.padding0-8 {
padding: 0 8px;
}
.margin-bottom8 {
margin-bottom: 8px;
}
......
src/views/evaluatIndicator/index/model/CardList/systemConstruct.vue
浏览文件 @ 90d1c4d9
......@@ -12,42 +12,48 @@
2021年
</el-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
<el-col class="font-size14 color-666" :span="18"
>各地召开融委全体会议次数</el-col
<el-row
class="item-bg margin-bottom12"
align="middle"
justify="space-between"
>
<el-col class="font-size20 color-pramiry" :span="5">
30 <span class="font-size12 color-999">次</span>
<el-col class="item-text font-size14 color-666" :span="16">
各地召开融委全体会议次数
</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-row>
<el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
<el-col class="font-size14 color-666" :span="18"
>与当地军分区（警备区）建立并落实军地协作机制</el-col
<el-row
class="item-bg margin-bottom12 flex-one"
align="middle"
justify="space-between"
>
<el-col class="font-size20 color-pramiry" :span="5">
30 <span class="font-size12 color-999">次</span>
<el-col class="item-text font-size14 color-666" :span="18">
与当地军分区（警备区）建立并落实军地协作机制
</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-row>
<el-row class="info-item font-size14 color-666 item-bg margin-bottom12">
<el-row class="title">
各地军民融合办工作人员
</el-row>
<el-row class="item-text title"> 各地军民融合办工作人员 </el-row>
<el-col :span="24">
<el-row justify="space-between">
<div class="item-row">
<span class="font-size14 color-666">专职</span>
<el-col class="font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span>
<el-col class="jf-end flex-row font-size20 color-pramiry">
30 <span class="margin-left5 font-size12 color-999">人</span>
</el-col>
</div>
<div class="item-row">
<span class="font-size14 color-666">兼职</span>
<el-col class="font-size20 color-pramiry">
30 <span class="font-size12 color-999">人</span>
<el-col class="flex-row font-size20 color-pramiry">
30 <span class="margin-left5 font-size12 color-999">人</span>
</el-col>
</div>
</el-row>
......@@ -77,7 +83,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import url("./common.css");
.info {
padding: 0 5px 10px 5px;
display: flex;
flex-direction: column;
height: 100%;
......@@ -94,25 +99,50 @@ export default defineComponent({
.info-item {
margin-bottom: 10px;
padding: 15px 10px;
padding: 15px;
&:last-of-type {
margin-bottom: 0;
}
.title {
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
.item-row {
padding: 0 20px;
flex-direction: column;
display: flex;
text-align: center;
div {
margin-top: -6px;
}
}
}
.color-pramiry {
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>
src/views/evaluatIndicator/index/model/Income/index.vue
浏览文件 @ 90d1c4d9
......@@ -10,8 +10,8 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Echart_color_Enum {
level_1 = "#fac858",
level_2 = "#4198ff",
level_1 = "#4198ff",
level_2 = "#4f5d81",
}
const seriesData = [
......@@ -20,13 +20,13 @@ const seriesData = [
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [1820, 1032, 2045, 1852],
barValue: [1820, 1332, 2045, 1852],
},
{
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [1232, 1264, 156, 2661, 15616],
barValue: [1232, 1264, 2661, 15616],
growthRate: [50, 60, 70, 80, 80, 60, 85],
},
];
......@@ -55,7 +55,7 @@ export default defineComponent({
itemStyle: {
color: Echart_color_Enum[item.type],
},
barWidth: 20,
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
......@@ -91,8 +91,7 @@ export default defineComponent({
},
className: "tooltip-income",
formatter: (params) => {
let html = "";
console.log("---", params);
let html = `<span class="year">${params[0].axisValue}年</span>`;
params.forEach((item) => {
const { data = {} } = item;
......@@ -108,10 +107,12 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
right: "2%",
},
grid: {
left: "0%",
right: "5%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
......@@ -155,16 +156,24 @@ export default defineComponent({
});
</script>
<style>
.tooltip-income .year {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-income .title {
font-weight: 600;
color: #333;
font-size: 12px;
color: #666;
}
.tooltip-income .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 14px;
font-size: 12px;
color: #999;
justify-content: space-between;
}
.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";
import * as echarts from "echarts";
enum Bar_Enum {
level_1 = "#fac858",
level_2 = "#4198ff",
level_2 = "#1ba6eb",
}
const seriesData = [
......@@ -19,15 +19,15 @@ const seriesData = [
name: "国防要求建设项目",
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85],
barValue: [820, 832, 901, 934, 1290, 1330, 1320],
growthRate: [80, 85, 95, 65, 85, 70, 85, 70, 80, 90, 40],
barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1180, 1292, 1000, 1205],
},
{
name: "省军民融合重大示范项目",
type: "level_2",
echartType: "bar",
barValue: [820, 832, 901, 934, 1290, 1330, 1320],
growthRate: [50, 60, 70, 80, 80, 60, 85],
barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1251, 1120, 1050, 888],
growthRate: [50, 60, 70, 80, 80, 60, 85, 62, 75, 85, 72],
},
];
......@@ -67,6 +67,7 @@ export default defineComponent({
itemStyle: {
color: Bar_Enum[item.type],
},
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => {
return {
......@@ -103,10 +104,9 @@ export default defineComponent({
},
className: "tooltip-progress",
formatter: (params) => {
let html = "";
let html = `<span class="name">${params[0].axisValue}</span>`;
params.forEach((item) => {
const { data = {} } = item;
console.log(data);
html += `<div class="tooltip-progress">
<span class="title">${item.seriesName}</span>
......@@ -120,16 +120,19 @@ export default defineComponent({
return html;
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
legend: {
right: "2%"
},
yAxis: [
{
type: "value",
name: "金额(亿元)",
},
{
type: "value",
......@@ -164,17 +167,29 @@ export default defineComponent({
});
</script>
<style>
.tooltip-progress .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-progress .title {
font-weight: 600;
color: #333;
font-size: 12px;
color: #666;
}
.tooltip-progress .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 14px;
font-size: 12px;
color: #999;
justify-content: space-between;
}
.tooltip-progress .row-item div {
margin-right: 15px;
}
.tooltip-progress .row-item p {
font-size: 12px;
color: #999;
......@@ -193,7 +208,7 @@ export default defineComponent({
<style lang="scss" scoped>
.investment-progress {
flex: 1;
height: 250px;
height: 245px;
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/evaluatIndicator/index/model/Map/index.vue
浏览文件 @ 90d1c4d9
......@@ -6,8 +6,9 @@ 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 MapGeoData from "./mapGeoData";
import MapPointList from "./mapPointList";
export default defineComponent({
......@@ -18,18 +19,16 @@ export default defineComponent({
data() {
return {
pointList: [],
mapEcharts: null
mapEcharts: null,
};
},
computed: {
options() {
return {
tooltip: {
borderColor: '#333',
borderColor: "#333",
formatter: function (params) {
return (
params.name
);
return params.name;
},
},
geo: {
......@@ -52,16 +51,19 @@ export default defineComponent({
},
},
},
grid: {
top: "0",
left: "0%",
right: "0%",
bottom: "3%",
containLabel: true,
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 2,
},
label: {
normal: {
show: true,
......@@ -76,10 +78,11 @@ export default defineComponent({
},
},
itemStyle: {
color: '#f3696a',
color: "#f3696a",
},
symbol: "pin",
symbolSize: 40,
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',
symbolSize: 16,
data: this.pointList,
},
],
......@@ -94,7 +97,6 @@ export default defineComponent({
const { data: getMapData } = MapGeoData;
const { data: pointList } = MapPointList;
echarts.registerMap("ZJ", getMapData);
const mapEcharts = echarts.init(document.getElementById("map"));
......@@ -120,10 +122,17 @@ export default defineComponent({
},
});
</script>
<style >
.map-item canvas:first-of-type{
transform: scaleY(1.1) scaleX(1.3);
}
</style>
<style lang="scss" scoped>
.map-item {
flex: 1;
box-sizing: border-box;
height: 100%;
}
</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.
src/views/evaluatIndicator/index/model/Performance/index.vue
浏览文件 @ 90d1c4d9
<template>
<MapTitle
text="全省军民融合创新示范绩效评价情况(2020年度)"
text="全省军民融合创新示范绩效评价情况(2020上半年度)"
:detailsHandle="detailsHandle"
/>
<div id="performanceBar" class="performance-bar"></div>
......@@ -13,42 +13,42 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Bar_Enum {
level_1 = "#4f5d81",
level_1 = "#4f2d11",
level_2 = "#429a9d",
level_3 = "#007fb2",
level_4 = "#eca933",
level_5 = "#4198ff",
level_5 = "#4191ff",
}
const seriesData = [
{
name: "服务强军兴军",
type: "level_1",
value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [12, 12, 11, 14, 12, 12, 12, 12, 22, 10, 20],
},
{
name: "产业融合发展",
type: "level_2",
value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [12, 12, 22, 21, 12, 22, 11, 22, 22, 12, 20],
},
{
name: "军民协同创新",
type: "level_3",
value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [12, 12, 21, 15, 12, 2, 12, 21, 22, 12, 20],
},
{
name: "资源开放共享",
type: "level_4",
value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [8, 12, 5, 14, 22, 22, 12, 22, 22, 15, 20],
},
{
name: "五大体系建设",
type: "level_5",
type: "level_2",
value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [22, 12, 21, 12, 12, 12, 12, 22, 21, 19, 20],
},
];
......@@ -81,22 +81,29 @@ export default defineComponent({
},
computed: {
optionBar() {
const seriesList = seriesData.map((item) => {
const seriesList = seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
stack: "total",
label: {
show: true,
color: "#fff",
},
barWidth: 26,
itemStyle: {
color: Bar_Enum[item.type],
},
emphasis: {
focus: "series",
show: false,
},
data: item.value,
data: item.value.map((valItem) => {
return {
value: valItem,
class: `color_${index + 1}`,
};
}),
};
});
......@@ -106,19 +113,32 @@ export default defineComponent({
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#4198ff",
className: "per-formance-echart",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`;
params.forEach((item) => {
const { data = {} } = item;
html += `<div class="per-formance-echart">
<span class="${data.class} title">${item.seriesName}</span>
<span class="text">${data.value}</span>
</div>`;
});
return html;
},
},
legend: {},
grid: {
left: "0%",
right: "5%",
right: "0%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
min: 0,
max: 100,
},
xAxis: {
type: "category",
......@@ -148,10 +168,82 @@ export default defineComponent({
},
});
</script>
<style>
.per-formance-echart {
width: 120px;
display: flex;
justify-content: space-between;
}
.per-formance-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.per-formance-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.per-formance-echart .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background: red;
}
.per-formance-echart .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 12px;
color: #999;
justify-content: space-between;
}
.per-formance-echart .row-item div {
margin-right: 15px;
}
.per-formance-echart .row-item p {
font-size: 12px;
color: #999;
}
.per-formance-echart .row-item p span {
font-size: 18px;
margin-right: 5px;
}
.per-formance-echart .text{
color: #4191ff
}
.per-formance-echart .color_1::before {
background: #4f2d11;
}
.per-formance-echart .color_2::before {
background: #429a9d;
}
.per-formance-echart .color_3::before {
background: #007fb2;
}
.per-formance-echart .color_4::before {
background: #eca933;
}
.per-formance-echart .color_5::before {
background: #4191ff;
}
</style>
<style lang="scss" scoped>
.performance-bar {
flex: 1;
height: 250px;
height: 245px;
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/evaluatIndicator/index/model/RankList/index.vue
浏览文件 @ 90d1c4d9
<template>
<MapTitle text="创新示区、县排名" />
<MapTitle text="创新示范区、县排名" />
<el-scrollbar height="260px">
<el-table
:data="tableData"
size="small"
style="width: 100%"
:header-row-style="() => {
return {
background: 'red'
}
}"
empty-text="--"
header-row-class-name="tabs-header"
>
<el-table-column label="序号" width="120" align="center" >
<template #default="scope">
<div >
<div v-if="scope.$index > 2"> {{ scope.$index + 1 }}</div>
<div
v-else
class="tab-index"
:style="{ background: `${colors[scope.$index + 1]}` }"
>
<el-table-column type="index" label="序号" />
<el-table-column prop="name" label="地区" />
<el-table-column prop="score" label="分数" />
{{ scope.$index + 1 }}
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="地区" align="center" />
<el-table-column prop="score" label="分数" width="120" align="center">
<template #default="scope">
<div>
{{ scope.row.score }}
<el-icon :color="scope.row.type === 1 ? '#67C23A' : '#F56C6C'">
<Bottom v-if="scope.row.type === 1" />
<Top v-else />
</el-icon>
</div>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import { Bottom, Top } from "@element-plus/icons";
const TabData = [
{
name: "上城区",
score: 50,
type: 1,
},
{
name: "萧山区",
score: 50,
type: 2,
},
{
name: "海曙区",
score: 50,
type: 2,
},
{
name: "西湖区",
score: 50,
type: 2,
},
{
name: "象山县",
score: 50,
type: 1,
},
];
const Colors = {
1: "#e45c5c",
2: "#ea8234",
3: "#fac858",
};
export default defineComponent({
components: {
MapTitle,
Bottom,
Top,
},
setup() {},
data() {
return {
tableData: TabData,
colors: Colors,
};
},
methods: {
......@@ -60,8 +95,35 @@ export default defineComponent({
},
});
</script>
<style>
.tabs-header {
}
.tabs-header .el-table__cell{
background-color: #e3f0ff !important;
color: #333;
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.el-scrollbar {
margin-top: 10px;
}
.tab-other-index{
text-align: center;
}
.tab-index {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid;
color: #fff;
font-size: 16px;
font-family: tabTypeFace;
margin: 0 auto;
}
</style>
src/views/evaluatIndicator/industrial/index.vue
浏览文件 @ 90d1c4d9
......@@ -3,8 +3,8 @@
<el-col class="map-left" :span="8">
<div class="footer-item card-item"><TargetBar /></div>
</el-col>
<el-col class="map-right card-item" :span="16">
<el-row :gutter="10">
<el-col :span="16">
<el-row class="map-right card-item" >
<el-col :span="12">
<IncomExtendLine
echartsId="incomExtend"
......@@ -13,7 +13,7 @@
:cardItems="extendCardItems"
/>
</el-col>
<el-col :span="12"><IncomDistribution /></el-col>
<el-col :span="10" :offset="1"><IncomDistribution /></el-col>
</el-row>
</el-col>
</el-row>
......@@ -77,7 +77,7 @@ export default defineComponent({
.card-item {
background: #fff;
border-radius: 5px;
padding: 15px 8px;
padding: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
......
src/views/evaluatIndicator/industrial/model/BusinessIncome/index.vue
浏览文件 @ 90d1c4d9
......@@ -73,7 +73,7 @@ export default defineComponent({
return {
pieList: PIE_LIST,
pieColor: PieColor,
mapEcharts: null
mapEcharts: null,
};
},
mounted() {
......@@ -105,10 +105,6 @@ export default defineComponent({
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
......@@ -140,7 +136,7 @@ export default defineComponent({
const dom = document.getElementById("businessIncome");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts
this.mapEcharts = mapEcharts;
},
},
unmounted() {
......@@ -153,6 +149,9 @@ export default defineComponent({
});
</script>
<style>
.business-income canvas:first-of-type {
transform: scale(1.2);
}
.business-pie-tooltip .title {
color: #333;
font-weight: bold;
......
src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue
浏览文件 @ 90d1c4d9
......@@ -10,12 +10,14 @@ import * as echarts from "echarts";
const seriesData = [
{
name: "国防要求建设项目",
name: "主营业务收入",
type: "level_1",
value: [820, 832, 901, 934, 1290, 1330, 1320],
value: [820, 832, 901, 934, 1290, 1330, 1320, 846, 945, 462, 622],
rateData: [30, 40, 60, 80, 70, 75,85,52,33,12,12]
},
];
const xAxisValue = [
"杭州",
"宁波",
......@@ -48,28 +50,40 @@ export default defineComponent({
},
computed: {
optionBar() {
const seriesBarList = seriesData.map((item) => {
const seriesBarList = seriesData.map((item,index) => {
return {
type: "bar",
itemStyle: {
color: "#4198ff",
},
data: item.value,
barWidth: 20,
data: item.value.map((valItem) => {
return {
value: valItem,
label: "主营业务收入"
};
}),
};
});
const seriesLineList = seriesData.map((item) => {
return {
type: "line",
stack: "Total",
itemStyle: {
color: "#fac858",
},
yAxisIndex: 1,
emphasis: {
focus: "series",
},
data: item.value,
data: item.rateData.map(val => {
return {
value: val,
label: "增长率"
}
}),
};
});
......@@ -79,8 +93,25 @@ export default defineComponent({
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#4198ff",
className: "income-echart",
formatter: (params) => {
console.log("----",params)
let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="income-echart ">
<span class="${params[0].class} title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="income-echart">
<span class="${params[1].data.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: {},
......@@ -90,10 +121,18 @@ export default defineComponent({
bottom: "3%",
containLabel: true,
},
yAxis: {
yAxis:[
{
type: "value",
name: "金额(亿元)",
},
{
type: "value",
show: false,
name: "增长率%",
min: 0,
max: 100,
},
],
xAxis: {
type: "category",
data: xAxisValue,
......@@ -119,6 +158,59 @@ export default defineComponent({
},
});
</script>
<style>
.income-echart {
width: 180px;
}
.income-echart .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.income-echart .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.income-echart .title::before {
position: absolute;
top: 8px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.income-echart .text{
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.income-echart .text:last-of-type {
margin: 0;
}
.income-echart .text-color_1{
color: #4198ff
}
.income-echart .text-color_2{
color: #eca933
}
.income-echart .color_1::before {
background: #4198ff;
}
.income-echart .color_2::before {
background: #eca933;
}
</style>
<style lang="scss" scoped>
.title {
color: #4198ff;
......@@ -127,7 +219,7 @@ export default defineComponent({
}
.incom-distribution {
flex: 1;
height: 300px;
height: 315px;
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/evaluatIndicator/industrial/model/IncomExtendLine/index.vue
浏览文件 @ 90d1c4d9
......@@ -161,7 +161,6 @@ export default defineComponent({
box-sizing: border-box;
}
.describes {
padding-left: 10px;
margin: 0 10px;
height: 150px;
box-sizing: border-box;
......@@ -172,6 +171,8 @@ export default defineComponent({
justify-content: space-between;
font-size: 14px;
.item {
flex: 1;
padding: 10px 15px;
margin-right: 15px;
background: #f8f9fb;
......
src/views/evaluatIndicator/industrial/model/TargetBar/index.vue
浏览文件 @ 90d1c4d9
......@@ -16,7 +16,7 @@
>
</div>
<el-select v-model="value" size="small" placeholder="Select">
<el-select v-model="value" size="small" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
......@@ -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() {
......@@ -109,12 +109,13 @@ export default defineComponent({
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
label: {
show: true,
position: "top",
// formatter: "{c}亿元"
},
data: [820, 832, 901, 934, 1290, 1330, 1320],
data: [820, 832, 901, 934, 1290, 1330, 1320, 1518,825,561,899],
},
],
};
......@@ -125,7 +126,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;
......@@ -141,14 +142,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>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论