Skip to content

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

fix(五大建设体系): mock数据对接，数据待完善

上级 76313091
隐藏空白字符变更
内嵌 并排
正在显示 包含 277 行增加 和 763 行删除
src/views/dataCenter/ConctructSystem/index.vue
浏览文件 @ 117be4ee
...@@ -62,11 +62,11 @@ ...@@ -62,11 +62,11 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import Platform from "./model/Platform/index.vue"; import Platform from "./model/Platform/index.vue";
import Outline from "./model/Outline/index.vue"; import Outline from "./model/Outline/index.vue";
import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue"; import Munitions from "./model/Munitions/index.vue";
import ScientificInvestment from "./model/ScientificInvestment/index.vue"; import ScientificInvestment from "./model/ScientificInvestment/index.vue";
import MapTitle from "@/components/mapTitle/index.vue"; import MapTitle from "@/components/mapTitle/index.vue";
// import Industrial from "./model/Industrial/index.vue"; import Mock from "./mock";
import { mapState } from "vuex";
/** /**
* 五大体系建设 * 五大体系建设
*/ */
...@@ -75,40 +75,26 @@ export default defineComponent({ ...@@ -75,40 +75,26 @@ export default defineComponent({
components: { components: {
Platform, Platform,
Outline, Outline,
Science,
Munitions, Munitions,
ScientificInvestment, ScientificInvestment,
// Industrial,
MapTitle, MapTitle,
}, },
setup() {}, setup() {},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
industryCardItems() {
return Mock[this.curDataType].industryCardItems;
},
city() {
return Mock[this.curDataType].city;
},
},
data() { data() {
return { return {
iswidth: 72, iswidth: 72,
industryCardItems: [
{ label: "国家部委、军委机关批复立项项目", value: "1113", unit: "个" },
{
label: "省直部门新认定的领跑技术(产品)",
value: "19",
unit: "个",
},
],
city: [
{
tit: "编制JMRH发展“十四五”规划进展",
municipal: "市级",
county: "区县",
municipalnum: 78,
countynum: 76,
},
{
tit: "今年以来制定涉及JMRH发展政策情况",
municipal: "市级",
county: "区县",
municipalnum: 77,
countynum: 75,
},
],
}; };
}, },
}); });
......
src/views/dataCenter/ConctructSystem/mock.js 0 → 100644
浏览文件 @ 117be4ee
export default {
"typeOne": {
industryCardItems: [{
label: "国家部委、军委机关批复立项项目",
value: 0,
unit: "个"
},
{
label: "省直部门新认定的领跑技术(产品)",
value: 0,
unit: "个",
},
],
city: [{
tit: "编制JMRH发展“十四五”规划进展",
municipal: "市级",
county: "区县",
municipalnum: 0,
countynum: 0,
},
{
tit: "今年以来制定涉及JMRH发展政策情况",
municipal: "市级",
county: "区县",
municipalnum: 0,
countynum: 0,
},
]
},
"typeTwo": {
industryCardItems: [{
label: "国家部委、军委机关批复立项项目",
value: 0,
unit: "个"
},
{
label: "省直部门新认定的领跑技术(产品)",
value: 0,
unit: "个",
},
],
city: [{
tit: "编制JMRH发展“十四五”规划进展",
municipal: "市级",
county: "区县",
municipalnum: 0,
countynum: 0,
},
{
tit: "今年以来制定涉及JMRH发展政策情况",
municipal: "市级",
county: "区县",
municipalnum: 0,
countynum: 0,
},
]
},
"typeThree": {
industryCardItems: [{
label: "国家部委、军委机关批复立项项目",
value: "1113",
unit: "个"
},
{
label: "省直部门新认定的领跑技术(产品)",
value: "19",
unit: "个",
},
],
city: [{
tit: "编制JMRH发展“十四五”规划进展",
municipal: "市级",
county: "区县",
municipalnum: 78,
countynum: 76,
},
{
tit: "今年以来制定涉及JMRH发展政策情况",
municipal: "市级",
county: "区县",
municipalnum: 77,
countynum: 75,
},
]
},
}
\ No newline at end of file
src/views/dataCenter/ConctructSystem/model/Industrial/index.vue deleted 100644 → 0
浏览文件 @ 76313091
<template>
<div class="industrial">
<MapTitle :text="echartsTitle" />
<div class="describes">
<div class="card-items">
<div class="item" v-for="(item, index) in cardItems" :key="item.text">
<span>{{ item.label }}</span>
<div class="value-des">
<span>{{ item.value || "--" }}</span
>{{item.unit }}
</div>
</div>
</div>
<div class="text">{{ echartsDesText }}</div>
</div>
<div :id="echartsId" class="incom-echarts-line"></div>
</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_2",
echartType: "bar",
color: "#4198ff",
barValue: [87, 137, 15, 71, 120, 65, 72, 14, 80, 20, 80],
},
{
name: "省直部门新认定的领跑技术(产品)",
type: "level_2",
echartType: "bar",
color: "#fac858",
barValue: [187, 37, 115, 91, 180, 65, 32, 80, 89, 50, 80],
},
];
const xAxisValue = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 柱状图
*/
export default defineComponent({
props: {
echartsTitle: {
type: String,
required: true,
},
echartsDesText: {
type: String,
required: true,
},
cardItems: {
type: Array,
required: true,
dafault: () => [],
},
echartsData: {
type: Array,
// required: true,
dafault: () => [],
},
echartsAxisValue: {
type: Array,
// required: true,
dafault: () => [],
},
echartsId: {
type: String,
required: true,
},
},
components: {
MapTitle,
},
setup() {},
data() {
return {
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesBarList = seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
itemStyle: {
color: item.color,
},
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
label: item.name,
};
}),
};
});
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "industry-tooltip-des",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}市</span>`;
html += `<div class="industry-tooltip-des ">
<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="industry-tooltip-des">
<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;
},
},
grid: {
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
legend: {
right: "2%",
},
yAxis: {
type: "value",
name: "数量(个)",
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [...seriesBarList],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</script>
<style>
.industry-tooltip-des:first-of-type {
margin-bottom: 5px;
}
.industry-tooltip-des .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.industry-tooltip-des {
width: 200px;
}
.industry-tooltip-des .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.industry-tooltip-des .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.industry-tooltip-des .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.industry-tooltip-des .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.industry-tooltip-des .text:last-of-type {
margin: 0;
}
.industry-tooltip-des .text-color_1 {
color: #4198ff;
}
.industry-tooltip-des .text-color_2 {
color: #fac858;
}
.industry-tooltip-des .color_1::before {
background: #4198ff;
}
.industry-tooltip-des .color_2::before {
background: #fac858;
}
</style>
<style lang="scss" scoped>
.industrial {
height: 100%;
.incom-echarts-line {
flex: 1;
height: calc(100% - 160px);
box-sizing: border-box;
}
.describes {
margin: 0 10px;
height: 120px;
box-sizing: border-box;
.card-items {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.item {
flex: 1;
padding: 10px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
&:last-of-type {
margin-right: 0;
}
.value-des {
margin-top: 10px;
font-size: 12px;
color: #999;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
.text {
color: #4198ff;
margin-top: 10px;
font-size: 14px;
}
}
}
</style>
src/views/dataCenter/ConctructSystem/model/Munitions/index.vue
浏览文件 @ 117be4ee
<template> <template>
<div class="enterprises-institutions"> <div class="mapEcharts-institutions">
<MapTitle text="召开融委全体会议情况" /> <MapTitle text="召开融委全体会议情况" />
<div class="meeting"> <div class="meeting">
<div>今年以来召开融委全体会议次数</div> <div>今年以来召开融委全体会议次数</div>
<div class="frequency"> <div class="frequency">
{{shu}} {{meetingCount || "--"}}
<span class="second">次</span> <span class="second">次</span>
</div> </div>
</div> </div>
<el-row class="investment"> <el-row class="investment">
<!-- <el-col class="card-list" :span="6">
<div class="card-item" v-for="item in cards" :key="item.label">
<p>{{ item.label }}</p>
<div>
{{ item.value }}<span class="unit">{{ item.unit }}</span>
</div>
</div>
</el-col>-->
<el-col class="city-echarts"> <el-col class="city-echarts">
<div class="title2X">各市融委全体会议召开次数</div> <div class="title2X">各市融委全体会议召开次数</div>
<div id="enterprises" class="echart-item"></div> <div id="mapEcharts" class="echart-item"></div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -29,6 +22,8 @@ import { defineComponent } from "vue"; ...@@ -29,6 +22,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";
import { Aim } from "@element-plus/icons"; import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
// 城市增长率 // 城市增长率
const xAxisCity = [ const xAxisCity = [
...@@ -44,9 +39,6 @@ const xAxisCity = [ ...@@ -44,9 +39,6 @@ const xAxisCity = [
"台州", "台州",
"丽水", "丽水",
]; ];
const cityData = {
value: [40, 40.40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
};
/** /**
* 承担军需品情况 * 承担军需品情况
...@@ -59,27 +51,23 @@ export default defineComponent({ ...@@ -59,27 +51,23 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
countryEcharts: null, mapEcharts: null,
shu: 43,
enterprises: null,
cards: [
{
label: "全省“民参军”企事业单位军品科研经费支出总额",
value: "284",
unit: "40次",
},
{
label: "全省“民参军”企事业单位R & D",
value: "5%",
unit: "",
},
],
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
meetingCount(){
return Mock[this.curDataType].meetingCount;
},
cityData() {
return Mock[this.curDataType].cityData;
},
optionCity() { optionCity() {
const seriesBar = { const seriesBar = {
type: "bar", type: "bar",
...@@ -89,7 +77,7 @@ export default defineComponent({ ...@@ -89,7 +77,7 @@ export default defineComponent({
}, },
barWidth: 20, barWidth: 20,
data: cityData.value.map((item) => { data: this.cityData.map((item) => {
return { return {
value: item, value: item,
label: "收入规模", label: "收入规模",
...@@ -137,6 +125,13 @@ export default defineComponent({ ...@@ -137,6 +125,13 @@ export default defineComponent({
series: [seriesBar], series: [seriesBar],
}; };
}, },
},
watch: {
cityData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionCity);
this.mapEcharts.hideLoading();
},
}, },
methods: { methods: {
initEcharts() { initEcharts() {
...@@ -144,16 +139,16 @@ export default defineComponent({ ...@@ -144,16 +139,16 @@ export default defineComponent({
}, },
initCityEcharts() { initCityEcharts() {
const dom = document.getElementById("enterprises"); const dom = document.getElementById("mapEcharts");
const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity); mapEcharts.setOption(this.optionCity);
this.enterprises = mapEcharts; this.mapEcharts = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (this.enterprises) { if (this.mapEcharts) {
this.enterprises.dispose(); this.mapEcharts.dispose();
this.enterprises = null; this.mapEcharts = null;
} }
}, },
}); });
...@@ -233,7 +228,7 @@ export default defineComponent({ ...@@ -233,7 +228,7 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.enterprises-institutions { .mapEcharts-institutions {
height: 100%; height: 100%;
.investment { .investment {
.echart-item { .echart-item {
......
src/views/dataCenter/ConctructSystem/model/Munitions/mock.js 0 → 100644
浏览文件 @ 117be4ee
export default {
"typeOne": {
meetingCount:0,
cityData: []
},
"typeTwo": {
meetingCount:0,
cityData: []
},
"typeThree":{
meetingCount:43,
cityData: [40, 40.40, 40, 40, 40, 40, 40, 40, 40, 40, 40]
},
}
\ No newline at end of file
src/views/dataCenter/ConctructSystem/model/Outline/index.vue
浏览文件 @ 117be4ee
...@@ -3,19 +3,7 @@ ...@@ -3,19 +3,7 @@
<MapTitle text="五大体系建设总览" /> <MapTitle text="五大体系建设总览" />
<div class="describes"> <div class="describes">
<div class="text">各市五大体系建设指标情况</div> <div class="text">各市五大体系建设指标情况</div>
<!-- <el-row class="" justify="space-between">
<div class="years" align="middle">
<span
v-for="(item, index) in years"
:key="item"
:class="{
active: index === curYearIndex,
}"
@click="yearHandle(index)"
>{{ item }}年</span
>
</div>
</el-row> -->
</div> </div>
<div id="synergyInnovation" class="line"></div> <div id="synergyInnovation" class="line"></div>
...@@ -26,7 +14,10 @@ import { defineComponent } from "vue"; ...@@ -26,7 +14,10 @@ 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 = [250, 170, 190, 145, 128, 194, 160, 210, 150, 300, 160]; import Mock from "./mock";
import { mapState } from "vuex";
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -52,8 +43,6 @@ export default defineComponent({ ...@@ -52,8 +43,6 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
years: [2019, 2020, "2021上半"],
curYearIndex: 2,
mapEcharts: null, mapEcharts: null,
}; };
}, },
...@@ -61,6 +50,12 @@ export default defineComponent({ ...@@ -61,6 +50,12 @@ export default defineComponent({
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
return { return {
tooltip: { tooltip: {
...@@ -101,16 +96,21 @@ export default defineComponent({ ...@@ -101,16 +96,21 @@ export default defineComponent({
formatter:"{c} 分" formatter:"{c} 分"
}, },
barWidth: 20, barWidth: 20,
data: SeriesData, data: this.seriesData,
}, },
], ],
}; };
}, },
}, },
methods: { watch: {
yearHandle(index: number) { seriesData() {
this.curYearIndex = index; this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
}, },
},
methods: {
initEcharts() { initEcharts() {
const dom = document.getElementById("synergyInnovation"); const dom = document.getElementById("synergyInnovation");
const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
...@@ -149,26 +149,7 @@ export default defineComponent({ ...@@ -149,26 +149,7 @@ export default defineComponent({
.describes { .describes {
margin: 0 10px 5px 0; margin: 0 10px 5px 0;
box-sizing: border-box; box-sizing: border-box;
.years {
margin-bottom: 15px;
display: flex;
align-items: center;
overflow: hidden;
span {
margin-right: 10px;
padding: 0 12px;
height: 32px;
line-height: 32px;
font-size: 12px;
color: #333;
background: #f4f6f9;
border-radius: 5px;
}
.active {
background-color: #4198ff;
color: #fff;
}
}
.text { .text {
color: #4198ff; color: #4198ff;
margin: 10px 0; margin: 10px 0;
......
src/views/dataCenter/ConctructSystem/model/Outline/mock.js 0 → 100644
浏览文件 @ 117be4ee
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [250, 170, 190, 145, 128, 194, 160, 210, 150, 300, 160],
}
\ No newline at end of file
src/views/dataCenter/ConctructSystem/model/Platform/index.vue
浏览文件 @ 117be4ee
...@@ -7,22 +7,15 @@ ...@@ -7,22 +7,15 @@
<div class="item"> <div class="item">
<span>今年以来融办主任主持召开主任会议次数</span> <span>今年以来融办主任主持召开主任会议次数</span>
<div class="value-des"> <div class="value-des">
<span>112</span>次 <span>{{meetingCount || "--"}}</span>次
</div> </div>
</div> </div>
<!-- <div class="item">
<span>协同创新示范平台</span>
<div class="value-des">
<span>66</span>个
</div>
</div>-->
</div> </div>
<!-- <div class="title">协同创新平台投入研发经费</div> -->
</div> </div>
<div id="TargetBar" class="target-bar"></div> <div id="targetBar" class="target-bar"></div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -30,6 +23,9 @@ import { defineComponent } from "vue"; ...@@ -30,6 +23,9 @@ 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";
import { Aim } from "@element-plus/icons"; import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisCity = [ const xAxisCity = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -43,9 +39,7 @@ const xAxisCity = [ ...@@ -43,9 +39,7 @@ const xAxisCity = [
"台州", "台州",
"丽水", "丽水",
]; ];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/** /**
* 全省军民协同创新平台情况——折线图 * 全省军民协同创新平台情况——折线图
...@@ -60,13 +54,23 @@ export default defineComponent({ ...@@ -60,13 +54,23 @@ export default defineComponent({
return { return {
countryEcharts: null, countryEcharts: null,
TargetBar: null, mapEcharts: null,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
meetingCount(){
return Mock[this.curDataType].meetingCount;
},
cityData() {
return Mock[this.curDataType].cityData;
},
optionCity() { optionCity() {
const seriesBar = { const seriesBar = {
type: "bar", type: "bar",
...@@ -76,7 +80,7 @@ export default defineComponent({ ...@@ -76,7 +80,7 @@ export default defineComponent({
}, },
barWidth: 20, barWidth: 20,
data: cityData.value.map((item) => { data: this.cityData.map((item) => {
return { return {
value: item, value: item,
label: "收入规模", label: "收入规模",
...@@ -123,22 +127,29 @@ export default defineComponent({ ...@@ -123,22 +127,29 @@ export default defineComponent({
series: [seriesBar], series: [seriesBar],
}; };
}, },
},
watch: {
cityData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionCity);
this.mapEcharts.hideLoading();
},
}, },
methods: { methods: {
initEcharts() { initEcharts() {
this.initCityEcharts(); this.initCityEcharts();
}, },
initCityEcharts() { initCityEcharts() {
const dom = document.getElementById("TargetBar"); const dom = document.getElementById("targetBar");
const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity); mapEcharts.setOption(this.optionCity);
this.TargetBar = mapEcharts; this.mapEcharts = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (this.TargetBar) { if (this.mapEcharts) {
this.TargetBar.dispose(); this.mapEcharts.dispose();
this.TargetBar = null; this.mapEcharts = null;
} }
}, },
}); });
......
src/views/dataCenter/ConctructSystem/model/Platform/mock.js 0 → 100644
浏览文件 @ 117be4ee
export default {
"typeOne": {
meetingCount:0,
cityData: []
},
"typeTwo": {
meetingCount:0,
cityData: []
},
"typeThree":{
meetingCount:43,
cityData: [40, 40.40, 40, 40, 40, 40, 40, 40, 40, 40, 40]
},
}
\ No newline at end of file
src/views/dataCenter/ConctructSystem/model/Science/index.vue deleted 100644 → 0
浏览文件 @ 76313091
<template>
<MapTitle text="民口单位服务武器装备科研生产情况" />
<el-row class="science-info" justify="space-between">
<el-col :span="11">
<div class="card-item">
<span>民口单位军品收入</span>
<div>53.35<span>亿元</span></div>
</div>
<div class="card-item">
<span>人均民口单位军品收入</span>
<div>90.56<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.increace }}%</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">
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
const SeriesData = {
type: "level_1",
rate: [
{
city: "杭州",
value: 15.63,
increace: 69.53,
},
{
city: "宁波",
value: 7.42,
increace: 66,
},
{
city: "温州",
value: 1.23,
increace: 18.6,
},
{
city: "湖州",
value: 2.65,
increace: 79.1,
},
{
city: "嘉兴",
value: 6,
increace: 28.06,
},
{
city: "绍兴",
value: 12.5,
increace: 117,
},
{
city: "金华",
increace: 83,
value: 1.7,
},
{
city: "衢州",
increace: 13.2,
value: 0.86,
},
{
city: "舟山",
increace: -32,
value: 2.61,
},
{
city: "台州",
increace: 46.4,
value: 2.58,
},
{
city: "丽水",
increace: 150.7,
value: 0.17,
},
],
};
const xAxisValue = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
/**
* 民口单位服务武器装备科研生产情况——柱状图
*/
export default defineComponent({
components: {
MapTitle,
},
setup() {},
data() {
return {
seriesData: SeriesData,
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
optionBar() {
const seriesLine = {
type: "line",
itemStyle: {
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: SeriesData.rate,
};
return {
tooltip: {
trigger: "axis",
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%",
containLabel: true,
},
yAxis: {
type: "value",
show: false,
},
xAxis: {
type: "category",
data: xAxisValue,
},
series: [seriesLine],
};
},
},
methods: {
initEcharts() {
const dom = document.getElementById("incomDistribution");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
return;
}
this.mapEcharts.dispose();
this.mapEcharts = null;
},
});
</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>
.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: 20px;
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;
min-height: 150px;
height: calc(100% - 200px);
box-sizing: border-box;
margin-top: 10px;
}
</style>
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/index.vue
浏览文件 @ 117be4ee
...@@ -22,14 +22,14 @@ import { defineComponent } from "vue"; ...@@ -22,14 +22,14 @@ 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";
import Mock from "./mock";
import { mapState } from "vuex";
const SeriesData = { const SeriesData = {
name: "国防要求建设项目", name: "国防要求建设项目",
type: "level_1", type: "level_1",
}; };
const PIE_LIST = [ ;
{ label: "专职", value: 142 },
{ label: "兼职", value: 125 },
];
const PieColor = { const PieColor = {
level_1: "#4198ff", level_1: "#4198ff",
level_2: "#6fdef7", level_2: "#6fdef7",
...@@ -51,19 +51,24 @@ export default defineComponent({ ...@@ -51,19 +51,24 @@ export default defineComponent({
return { return {
seriesData: SeriesData, seriesData: SeriesData,
mapEcharts: null, mapEcharts: null,
cirLeftCharts: null,
cirRightEchart: null,
cardItems: [{ label: "人员总数", value: "267" }],
pieList: PIE_LIST,
pieColor: PieColor,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
cardItems() {
return Mock[this.curDataType].cardItems;
},
pieList() {
return Mock[this.curDataType].pieList;
},
optionBar() { optionBar() {
const pieData = PIE_LIST.map((item, index) => { const pieData = this.pieList.map((item, index) => {
return { return {
value: item.value, value: item.value,
name: item.label, name: item.label,
...@@ -147,13 +152,18 @@ export default defineComponent({ ...@@ -147,13 +152,18 @@ export default defineComponent({
type: "pie", type: "pie",
radius: ["48%", "80%"], radius: ["48%", "80%"],
// data: pieData,
data: pieData, data: pieData,
}, },
], ],
}; };
}, },
},
watch: {
pieList() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
}, },
methods: { methods: {
initEcharts() { initEcharts() {
......
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/mock.js 0 → 100644
浏览文件 @ 117be4ee
export default {
"typeOne": {
cardItems: [{ label: "人员总数", value: 0 }],
pieList: [
{ label: "专职", value: 0 },
{ label: "兼职", value: 0 },
]
},
"typeTwo": {
cardItems: [{ label: "人员总数", value: 0 }],
pieList: [
{ label: "专职", value: 0 },
{ label: "兼职", value: 0 },
]
},
"typeThree":{
cardItems: [{ label: "人员总数", value: "267" }],
pieList: [
{ label: "专职", value: 142 },
{ label: "兼职", value: 125 },
]
},
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论