Skip to content

C
cxsfjx_project_echarts
提交 f069c275 authored 作者: 胡园辉's avatar 胡园辉
浏览文件
操作

fix(mock数据)：点击顶部按钮切换不同内容效果

上级 af1ac370
隐藏空白字符变更
内嵌 并排
正在显示 包含 866 行增加 和 375 行删除
src/views/dataCenter/army/index.vue
浏览文件 @ f069c275
<template> <template>
<el-row class="map-warpper" :gutter="16"> <el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8"> <el-col class="map-left" :span="8">
<div class="footer-item card-item"><StrongArmy /></div> <div class="footer-item card-item">
<StrongArmy />
</div>
</el-col> </el-col>
<el-col class="map-right" :span="16"> <el-col class="map-right" :span="16">
<el-row :gutter="16"> <el-row :gutter="16">
...@@ -11,7 +13,9 @@ ...@@ -11,7 +13,9 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="card-item"><Science /></div> <div class="card-item">
<Science />
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -59,7 +63,10 @@ export default defineComponent({ ...@@ -59,7 +63,10 @@ export default defineComponent({
}, },
], ],
extendCardItems: [ extendCardItems: [
{ label: "参与军民融合产业互动的规模以上企业主营收入", value: "3545.5" }, {
label: "参与军民融合产业互动的规模以上企业主营收入",
value: "3545.5",
},
{ {
label: "参与军民融合产业互动的规模以上企业主营收入增长率", label: "参与军民融合产业互动的规模以上企业主营收入增长率",
value: "19", value: "19",
......
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ f069c275
...@@ -7,15 +7,13 @@ ...@@ -7,15 +7,13 @@
<div class="info-wrapper"> <div class="info-wrapper">
<div class="info-details"> <div class="info-details">
<div <div class="info-item" v-for="item in countryData.info" :key="item.label">
class="info-item"
v-for="item in countryData.info"
:key="item.label"
>
<span class="title">{{item.label || "--"}}</span> <span class="title">{{item.label || "--"}}</span>
<div><span>{{item.value || "--"}}</span>{{item.unit}}</div> <div>
<span>{{item.value || "--"}}</span>
{{item.unit}}
</div>
</div> </div>
</div> </div>
<!-- 环形进度条 --> <!-- 环形进度条 -->
<div v-show="false" id="circularEchart" class="circular"></div> <div v-show="false" id="circularEchart" class="circular"></div>
...@@ -32,16 +30,14 @@ ...@@ -32,16 +30,14 @@
<span class="card-text">{{ provinceData.name || "--" }}</span> <span class="card-text">{{ provinceData.name || "--" }}</span>
<div class="info-wrapper"> <div class="info-wrapper">
<div class="info-details"> <div class="info-details">
<div <div class="info-item" v-for="item in provinceData.info" :key="item.label">
class="info-item"
v-for="item in provinceData.info"
:key="item.label"
>
<span class="title">{{item.label || "--"}}</span> <span class="title">{{item.label || "--"}}</span>
<div><span>{{item.value || "--"}}</span>{{item.unit}}</div> <div>
<span>{{item.value || "--"}}</span>
{{item.unit}}
</div>
</div> </div>
</div> </div>
<!-- 环形进度条 --> <!-- 环形进度条 -->
<div id="cirRightEchart" class="circular"></div> <div id="cirRightEchart" class="circular"></div>
...@@ -384,7 +380,7 @@ export default defineComponent({ ...@@ -384,7 +380,7 @@ export default defineComponent({
this.cirRightEchart.showLoading(); this.cirRightEchart.showLoading();
this.cirRightEchart.setOption(this.ptionCirRight); this.cirRightEchart.setOption(this.ptionCirRight);
this.cirRightEchart.hideLoading(); this.cirRightEchart.hideLoading();
} },
}, },
methods: { methods: {
initEcharts() { initEcharts() {
...@@ -513,7 +509,7 @@ export default defineComponent({ ...@@ -513,7 +509,7 @@ export default defineComponent({
} }
} }
.circular { .circular {
margin-right: 60px; margin-right: 60px;
margin-left: 40px; margin-left: 40px;
width: 100px; width: 100px;
......
src/views/dataCenter/army/model/Munitions/index.vue
浏览文件 @ f069c275
...@@ -18,17 +18,17 @@ import { defineComponent } from "vue"; ...@@ -18,17 +18,17 @@ 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 seriesCountryData = [ // const seriesCountryData = [
{ // {
value: [107.32, 157.51, 172.11], // value: [107.32, 157.51, 172.11],
rate: ["", 42.17, 21.19,], // rate: ["", 42.17, 21.19],
}, // },
]; // ];
const xAxisCountry = ["2018", "2019", "2020","2021","2022",]; const xAxisCountry = ["2018", "2019", "2020", "2021", "2022"];
// 城市增长率 // 城市增长率
const xAxisCity = [ const xAxisCity = [
...@@ -44,10 +44,6 @@ const xAxisCity = [ ...@@ -44,10 +44,6 @@ const xAxisCity = [
"台州", "台州",
"丽水", "丽水",
]; ];
const cityData = {
value: [32.68, 7.42, 1.36, 3.47, 19.56, 12.5, 1.7,0.86 , 2.61, 2.58, 0.17],
rate: [30.75, 66, 19.8, 38.95, 57.59, 117, 83, 13.2, -32, 46.4, 150.7],
};
/** /**
* 承担军需品情况 * 承担军需品情况
...@@ -67,9 +63,31 @@ export default defineComponent({ ...@@ -67,9 +63,31 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.countryEcharts.showLoading();
this.countryEcharts.setOption(this.optionCountry);
this.countryEcharts.hideLoading();
},
cityData() {
this.cityEcharts.showLoading();
this.cityEcharts.setOption(this.optionCity);
this.cityEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
cityData() {
return Mock[this.curDataType].cityData;
},
optionCountry() { optionCountry() {
const seriesBarList = seriesCountryData.map((item) => { const seriesBarList = this.seriesData.map((item) => {
// console.log("测试", item.value);
return { return {
name: "收入规模", name: "收入规模",
type: "bar", type: "bar",
...@@ -87,7 +105,7 @@ export default defineComponent({ ...@@ -87,7 +105,7 @@ export default defineComponent({
}; };
}); });
const seriesLineList = seriesCountryData.map((item) => { const seriesLineList = this.seriesData.map((item) => {
return { return {
name: "增长率", name: "增长率",
...@@ -167,14 +185,14 @@ export default defineComponent({ ...@@ -167,14 +185,14 @@ export default defineComponent({
optionCity() { optionCity() {
const seriesBar = { const seriesBar = {
type: "bar", type: "bar",
name: "收入规模", name: "收入规模",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
barWidth: 20, barWidth: 20,
data: cityData.value.map((item) => { data: this.cityData.value.map((item) => {
return { return {
value: item, value: item,
label: "收入规模", label: "收入规模",
...@@ -192,10 +210,9 @@ export default defineComponent({ ...@@ -192,10 +210,9 @@ export default defineComponent({
emphasis: { emphasis: {
focus: "series", focus: "series",
}, },
name: "增长率", name: "增长率",
data: cityData.rate.map((item) => { data: this.cityData.rate.map((item) => {
return { return {
value: item, value: item,
label: "增长率", label: "增长率",
......
src/views/dataCenter/army/model/Munitions/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
seriesData: [{
value: [],
rate: [],
}],
cityData: {
value: [],
rate: [],
}
},
"typeTwo": {
seriesData: [{
value: [],
rate: [],
}],
cityData: {
value: [],
rate: [],
}
},
"typeThree": {
seriesData: [{
value: [107.32, 157.51, 172.11],
rate: ["", 42.17, 21.19],
}],
cityData: {
value: [32.68, 7.42, 1.36, 3.47, 19.56, 12.5, 1.7, 0.86, 2.61, 2.58, 0.17],
rate: [30.75, 66, 19.8, 38.95, 57.59, 117, 83, 13.2, -32, 46.4, 150.7],
}
},
}
\ No newline at end of file
src/views/dataCenter/army/model/Person/index.vue
浏览文件 @ f069c275
...@@ -4,12 +4,16 @@ ...@@ -4,12 +4,16 @@
<div class="card-items"> <div class="card-items">
<div class="item"> <div class="item">
<span>入伍总人数</span> <span>入伍总人数</span>
<div class="value-des"><span>1470</span>人</div> <div class="value-des">
<span>1470</span>人
</div>
</div> </div>
<div class="item"> <div class="item">
<span>入伍总比列</span> <span>入伍总比列</span>
<div class="value-des"><span>0.5%</span></div> <div class="value-des">
<span>0.5%</span>
</div>
</div> </div>
</div> </div>
...@@ -22,11 +26,10 @@ ...@@ -22,11 +26,10 @@
import { defineComponent } from "vue"; 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 = this
value: [595, 173, 128, 74, 84, 47, 142, 39, 49, 100, 39],
rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
};
const xAxisCity = [ const xAxisCity = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -58,44 +61,63 @@ export default defineComponent({ ...@@ -58,44 +61,63 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() { optionBar() {
const seriesBar = { const seriesBar = this.seriesData.map((item) => {
name: "入伍人数", return {
name: "入伍人数",
type: "bar", type: "bar",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
barWidth: 20, barWidth: 20,
data: seriesData.value.map((item) => { data: item.value.map((item) => {
return { return {
value: item, value: item,
label: "入伍人数", label: "入伍人数",
}; };
}), }),
}; };
});
const seriesLine = { const seriesLine = this.seriesData.map((item) => {
name: "入伍比率", return {
type: "line", name: "入伍比率",
stack: "Total", type: "line",
itemStyle: { stack: "Total",
color: "#429a9d", itemStyle: {
}, color: "#429a9d",
yAxisIndex: 1, },
emphasis: { yAxisIndex: 1,
focus: "series", emphasis: {
}, focus: "series",
},
data: seriesData.rate.map((item) => { data: item.rate.map((item) => {
return { return {
value: item, value: item,
label: "入伍比率", label: "入伍比率",
}; };
}), }),
}; };
});
// const seriesLine = {};
return { return {
tooltip: { tooltip: {
...@@ -147,7 +169,7 @@ export default defineComponent({ ...@@ -147,7 +169,7 @@ export default defineComponent({
type: "category", type: "category",
data: xAxisCity, data: xAxisCity,
}, },
series: [seriesBar, seriesLine], series: [...seriesBar, ...seriesLine],
}; };
}, },
}, },
......
src/views/dataCenter/army/model/Person/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
seriesData: [{
value: [],
rate: [],
}]
},
"typeTwo": {
seriesData: [{
value: [],
rate: [],
}]
},
"typeThree": {
seriesData: [{
value: [595, 173, 128, 74, 84, 47, 142, 39, 49, 100, 39],
rate: [0.5, 0.4, 0.5, 1, 0.5, 0.2, 0.6, 0.9, 0.8, 1, 0.6],
}]
}
}
\ No newline at end of file
src/views/dataCenter/army/model/Science/index.vue
浏览文件 @ f069c275
...@@ -4,12 +4,18 @@ ...@@ -4,12 +4,18 @@
<el-col :span="11"> <el-col :span="11">
<div class="card-item"> <div class="card-item">
<span>民口单位军品收入</span> <span>民口单位军品收入</span>
<div>53.35<span>亿元</span></div> <div>
53.35
<span>亿元</span>
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<span>人均民口单位军品收入</span> <span>人均民口单位军品收入</span>
<div>90.56<span>元</span></div> <div>
90.56
<span>元</span>
</div>
</div> </div>
</el-col> </el-col>
...@@ -22,11 +28,7 @@ ...@@ -22,11 +28,7 @@
</div> </div>
<el-scrollbar height="92px"> <el-scrollbar height="92px">
<div <div class="rate-list-item" v-for="(item, index) in this.seriesData" :key="index">
class="rate-list-item"
v-for="(item, index) in seriesData.rate"
:key="index"
>
<span>{{ item.city }}</span> <span>{{ item.city }}</span>
<span class="rate-value">{{ item.increace }}%</span> <span class="rate-value">{{ item.increace }}%</span>
</div> </div>
...@@ -42,73 +44,13 @@ ...@@ -42,73 +44,13 @@
import { defineComponent } from "vue"; 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 = {
type: "level_1", // // type: "level_1",
rate: [ // ...this.seriesData,
{ // };
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 = [ const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -133,14 +75,27 @@ export default defineComponent({ ...@@ -133,14 +75,27 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
seriesData: SeriesData, // seriesData: SeriesData,
mapEcharts: null, mapEcharts: null,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
const seriesLine = { const seriesLine = {
type: "line", type: "line",
...@@ -168,7 +123,7 @@ export default defineComponent({ ...@@ -168,7 +123,7 @@ export default defineComponent({
]), ]),
}, },
data: SeriesData.rate, data: this.seriesData,
}; };
return { return {
...@@ -327,7 +282,7 @@ export default defineComponent({ ...@@ -327,7 +282,7 @@ export default defineComponent({
.incom-distribution { .incom-distribution {
flex: 1; flex: 1;
min-height: 150px; min-height: 150px;
height: calc(100% - 200px); height: calc(100% - 200px);
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/dataCenter/army/model/Science/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [{
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,
},
],
}
\ No newline at end of file
src/views/dataCenter/army/model/StrongArmy/index.vue
浏览文件 @ f069c275
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<div class="echarts-search"> <div class="echarts-search">
<div class="title">各市服务强军兴军创新指标情况</div> <div class="title">各市服务强军兴军创新指标情况</div>
</div> </div>
<div id="TargetBar" class="target-bar"></div> <div id="TargetBar" class="target-bar"></div>
...@@ -12,6 +11,8 @@ ...@@ -12,6 +11,8 @@
import { defineComponent } from "vue"; 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 xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
...@@ -51,6 +52,12 @@ export default defineComponent({ ...@@ -51,6 +52,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: {
...@@ -89,12 +96,19 @@ export default defineComponent({ ...@@ -89,12 +96,19 @@ export default defineComponent({
position: "top", position: "top",
}, },
barWidth: 20, barWidth: 20,
data: [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 19], data: this.seriesData,
}, },
], ],
}; };
}, },
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
methods: { methods: {
initEcharts() { initEcharts() {
const dom = document.getElementById("TargetBar"); const dom = document.getElementById("TargetBar");
...@@ -102,7 +116,6 @@ export default defineComponent({ ...@@ -102,7 +116,6 @@ export default defineComponent({
mapEcharts.setOption(this.optionBar); mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts; this.mapEcharts = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (!this.mapEcharts) { if (!this.mapEcharts) {
...@@ -131,7 +144,6 @@ export default defineComponent({ ...@@ -131,7 +144,6 @@ export default defineComponent({
margin: 12px 0; margin: 12px 0;
font-size: 14px; font-size: 14px;
} }
} }
.target-bar { .target-bar {
......
src/views/dataCenter/army/model/StrongArmy/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [25, 27, 18, 22, 28, 24, 19, 20, 21, 22, 30],
}
\ No newline at end of file
src/views/dataCenter/industrial/index.vue
浏览文件 @ f069c275
<template> <template>
<el-row class="map-warpper" :gutter="16"> <el-row class="map-warpper" :gutter="16">
<el-col class="map-left" :span="8"> <el-col class="map-left" :span="8">
<div class="footer-item card-item"><TargetBar /></div> <div class="footer-item card-item">
<TargetBar />
</div>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-row class="map-right card-item" > <el-row class="map-right card-item">
<el-col :span="12"> <el-col :span="12">
<IncomExtendLine <IncomExtendLine
echartsId="incomExtend" echartsId="incomExtend"
...@@ -13,7 +15,9 @@ ...@@ -13,7 +15,9 @@
:cardItems="extendCardItems" :cardItems="extendCardItems"
/> />
</el-col> </el-col>
<el-col :span="10" :offset="1"><IncomDistribution /></el-col> <el-col :span="10" :offset="1">
<IncomDistribution />
</el-col>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
...@@ -46,14 +50,13 @@ import IncomDistribution from "./model/IncomDistribution/index.vue"; ...@@ -46,14 +50,13 @@ import IncomDistribution from "./model/IncomDistribution/index.vue";
import BusinessIncome from "./model/BusinessIncome/index.vue"; import BusinessIncome from "./model/BusinessIncome/index.vue";
import Industrial from "./model/Industrial/index.vue"; import Industrial from "./model/Industrial/index.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
TargetBar, TargetBar,
IncomExtendLine, IncomExtendLine,
IncomDistribution, IncomDistribution,
BusinessIncome, BusinessIncome,
Industrial Industrial,
}, },
setup() {}, setup() {},
data() { data() {
...@@ -66,7 +69,10 @@ export default defineComponent({ ...@@ -66,7 +69,10 @@ export default defineComponent({
}, },
], ],
extendCardItems: [ extendCardItems: [
{ label: "参与军民融合产业互动的规模以上企业主营业务收入", value: "3545.5" }, {
label: "参与军民融合产业互动的规模以上企业主营业务收入",
value: "3545.5",
},
{ {
label: "参与军民融合产业互动的规模以上企业主营业务收入增长率", label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
value: "31.5", value: "31.5",
...@@ -92,7 +98,7 @@ export default defineComponent({ ...@@ -92,7 +98,7 @@ export default defineComponent({
.map-warpper { .map-warpper {
box-sizing: border-box; box-sizing: border-box;
.map-right{ .map-right {
padding-bottom: 0; padding-bottom: 0;
} }
} }
......
src/views/dataCenter/industrial/model/BusinessIncome/index.vue
浏览文件 @ f069c275
...@@ -8,7 +8,10 @@ ...@@ -8,7 +8,10 @@
<div class="money-logo"> <div class="money-logo">
<div> <div>
<!-- <img src="@/assets/img/qiandai.svg" alt="" /> --> <!-- <img src="@/assets/img/qiandai.svg" alt="" /> -->
<div>营业收入 <span>(亿元)</span></div> <div>
营业收入
<span>(亿元)</span>
</div>
</div> </div>
<span class="mony-number">3532.82</span> <span class="mony-number">3532.82</span>
</div> </div>
...@@ -19,20 +22,16 @@ ...@@ -19,20 +22,16 @@
<el-row :gutter="15"> <el-row :gutter="15">
<el-col <el-col
class="pie-item" class="pie-item"
v-for="(item, index) in pieList" v-for="(item, index) in this.seriesData"
:key="item.lable" :key="item.lable"
:span="11" :span="11"
> >
<el-row align="middle"> <el-row align="middle">
<div <div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
{{ item.label }} {{ item.label }}
</el-row> </el-row>
<div class="pie-value"> <div class="pie-value">
<span>{{ item.value }}</span <span>{{ item.value }}</span>亿元
>亿元
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -44,18 +43,20 @@ import { defineComponent } from "vue"; ...@@ -44,18 +43,20 @@ 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 PIE_LIST = [ // const PIE_LIST = [
{ label: "数字军工(网络、人工智能)领域", value: 932.66 }, // { label: "数字军工(网络、人工智能)领域", value: 932.66 },
{ label: "高端装备领域", value: 383.17 }, // { label: "高端装备领域", value: 383.17 },
{ label: "核电(新能源领域)", value: 311.27 }, // { label: "核电(新能源领域)", value: 311.27 },
{ label: "生物安全领域", value: 267.96 }, // { label: "生物安全领域", value: 267.96 },
{ label: "航空航天领域", value: 269.18 }, // { label: "航空航天领域", value: 269.18 },
{ label: "船舶与海洋装备领域", value: 84.22 }, // { label: "船舶与海洋装备领域", value: 84.22 },
{ label: "军队现代后勤保障领域", value: 517.9 }, // { label: "军队现代后勤保障领域", value: 517.9 },
{ label: "军用材料与基础件配套领域", value: 365.24 }, // { label: "军用材料与基础件配套领域", value: 365.24 },
{ label: "其他", value: 401.22 }, // { label: "其他", value: 401.22 },
]; // ];
const PieColor = { const PieColor = {
level_1: "#1781df", level_1: "#1781df",
...@@ -80,7 +81,7 @@ export default defineComponent({ ...@@ -80,7 +81,7 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
pieList: PIE_LIST, // pieList: this.seriesData,
pieColor: PieColor, pieColor: PieColor,
mapEcharts: null, mapEcharts: null,
}; };
...@@ -88,9 +89,22 @@ export default defineComponent({ ...@@ -88,9 +89,22 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
const pieData = PIE_LIST.map((item, index) => { const pieData = this.seriesData.map((item, index) => {
return { return {
value: item.value, value: item.value,
itemStyle: { itemStyle: {
...@@ -187,7 +201,7 @@ export default defineComponent({ ...@@ -187,7 +201,7 @@ export default defineComponent({
left: 37%; left: 37%;
position: absolute; position: absolute;
text-align: center; text-align: center;
transform: scale(1.2); transform: scale(1.2);
div { div {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -201,7 +215,7 @@ export default defineComponent({ ...@@ -201,7 +215,7 @@ export default defineComponent({
width: 35px; width: 35px;
} }
} }
.mony-number{ .mony-number {
font-size: 36px; font-size: 36px;
color: #4198ff; color: #4198ff;
} }
......
src/views/dataCenter/industrial/model/BusinessIncome/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [
{ label: "数字军工(网络、人工智能)领域", value: 932.66 },
{ label: "高端装备领域", value: 383.17 },
{ label: "核电(新能源领域)", value: 311.27 },
{ label: "生物安全领域", value: 267.96 },
{ label: "航空航天领域", value: 269.18 },
{ label: "船舶与海洋装备领域", value: 84.22 },
{ label: "军队现代后勤保障领域", value: 517.9 },
{ label: "军用材料与基础件配套领域", value: 365.24 },
{ label: "其他", value: 401.22 },
]
}
\ No newline at end of file
src/views/dataCenter/industrial/model/IncomDistribution/index.vue
浏览文件 @ f069c275
...@@ -7,16 +7,19 @@ ...@@ -7,16 +7,19 @@
import { defineComponent } from "vue"; 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",
value: [1553.8, 754.1, 61.4, 129.2, 373.1, 381.2, 112.8, 42.8, 6, 91.8, 39.3], // value: [
rateData: [24.2, 42.2, 4.6, 36.7, 38.5, 42.6,55.8,16.2,-1.9,10.2,54.5] // 1553.8, 754.1, 61.4, 129.2, 373.1, 381.2, 112.8, 42.8, 6, 91.8, 39.3,
}, // ],
]; // rateData: [24.2, 42.2, 4.6, 36.7, 38.5, 42.6, 55.8, 16.2, -1.9, 10.2, 54.5],
// },
// ];
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
...@@ -48,9 +51,22 @@ export default defineComponent({ ...@@ -48,9 +51,22 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() { optionBar() {
const seriesBarList = seriesData.map((item,index) => { const seriesBarList = this.seriesData.map((item, index) => {
return { return {
name: "主营业务收入", name: "主营业务收入",
type: "bar", type: "bar",
...@@ -62,29 +78,29 @@ export default defineComponent({ ...@@ -62,29 +78,29 @@ export default defineComponent({
data: item.value.map((valItem) => { data: item.value.map((valItem) => {
return { return {
value: valItem, value: valItem,
label: "主营业务收入" label: "主营业务收入",
}; };
}), }),
}; };
}); });
const seriesLineList = seriesData.map((item) => { const seriesLineList = this.seriesData.map((item) => {
return { return {
name: "增长率", name: "增长率",
type: "line", type: "line",
itemStyle: { itemStyle: {
color: "#fac858", color: "#fac858",
}, },
yAxisIndex: 1, yAxisIndex: 1,
emphasis: { emphasis: {
focus: "series", focus: "series",
}, },
data: item.rateData.map(val => { data: item.rateData.map((val) => {
return { return {
value: val, value: val,
label: "增长率" label: "增长率",
} };
}), }),
}; };
}); });
...@@ -98,8 +114,8 @@ export default defineComponent({ ...@@ -98,8 +114,8 @@ export default defineComponent({
className: "income-echart", className: "income-echart",
formatter: (params) => { formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`; let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="income-echart "> html += `<div class="income-echart ">
<span class="${params[0].class} title color_1">${params[0].data.label}</span> <span class="${params[0].class} title color_1">${params[0].data.label}</span>
<br /> <br />
<span class="text text-color_1">${params[0].data.value}</span>亿元 <span class="text text-color_1">${params[0].data.value}</span>亿元
...@@ -108,7 +124,7 @@ export default defineComponent({ ...@@ -108,7 +124,7 @@ export default defineComponent({
<span class="${params[1].data.class} title color_2">${params[1].data.label}</span> <span class="${params[1].data.class} title color_2">${params[1].data.label}</span>
<br /> <br />
<span class="text text-color_2">${params[1].data.value}%</span> <span class="text text-color_2">${params[1].data.value}%</span>
</div>` </div>`;
return html; return html;
}, },
...@@ -122,11 +138,11 @@ export default defineComponent({ ...@@ -122,11 +138,11 @@ export default defineComponent({
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
}, },
yAxis:[ yAxis: [
{ {
type: "value", type: "value",
name: "金额(亿元)", name: "金额(亿元)",
min: -10, min: -10,
max: 1600, max: 1600,
}, },
{ {
...@@ -189,7 +205,7 @@ export default defineComponent({ ...@@ -189,7 +205,7 @@ export default defineComponent({
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
} }
.income-echart .text{ .income-echart .text {
padding-left: 20px; padding-left: 20px;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 20px; font-size: 20px;
...@@ -198,11 +214,11 @@ export default defineComponent({ ...@@ -198,11 +214,11 @@ export default defineComponent({
margin: 0; margin: 0;
} }
.income-echart .text-color_1{ .income-echart .text-color_1 {
color: #4198ff color: #4198ff;
} }
.income-echart .text-color_2{ .income-echart .text-color_2 {
color: #eca933 color: #eca933;
} }
.income-echart .color_1::before { .income-echart .color_1::before {
background: #4198ff; background: #4198ff;
...@@ -210,7 +226,6 @@ export default defineComponent({ ...@@ -210,7 +226,6 @@ export default defineComponent({
.income-echart .color_2::before { .income-echart .color_2::before {
background: #eca933; background: #eca933;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -222,7 +237,7 @@ export default defineComponent({ ...@@ -222,7 +237,7 @@ export default defineComponent({
.incom-distribution { .incom-distribution {
flex: 1; flex: 1;
min-height: 315px; min-height: 315px;
height: calc( 100% - 70px); height: calc(100% - 70px);
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/dataCenter/industrial/model/IncomDistribution/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
seriesData: [{
value: [],
rateData: [],
}],
},
"typeTwo": {
seriesData: [{
value: [],
rateData: [],
}],
},
"typeThree": {
seriesData: [{
name: "主营业务收入",
type: "level_1",
value: [
1553.8, 754.1, 61.4, 129.2, 373.1, 381.2, 112.8, 42.8, 6, 91.8, 39.3,
],
rateData: [24.2, 42.2, 4.6, 36.7, 38.5, 42.6, 55.8, 16.2, -1.9, 10.2, 54.5],
}],
},
}
\ No newline at end of file
src/views/dataCenter/industrial/model/IncomExtendLine/index.vue
浏览文件 @ f069c275
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<div class="item" v-for="(item,index) in cardItems" :key="item.text"> <div class="item" v-for="(item,index) in cardItems" :key="item.text">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<div class="value-des"> <div class="value-des">
<span>{{ item.value || "--" }}</span <span>{{ item.value || "--" }}</span>
>{{index === 0?"亿元":"%"}} {{index === 0?"亿元":"%"}}
</div> </div>
</div> </div>
</div> </div>
...@@ -20,14 +20,16 @@ ...@@ -20,14 +20,16 @@
import { defineComponent } from "vue"; 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",
value: [5204.49, 6029.77, 7633.65, 3545.5], // value: [5204.49, 6029.77, 7633.65, 3545.5],
}, // },
]; // ];
const xAxisValue = ["2018年", "2019年", "2020年", "2021上半年"]; const xAxisValue = ["2018年", "2019年", "2020年", "2021上半年"];
...@@ -76,9 +78,22 @@ export default defineComponent({ ...@@ -76,9 +78,22 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() { optionBar() {
const seriesLine = seriesData.map((item) => { const seriesLine = this.seriesData.map((item) => {
return { return {
type: "line", type: "line",
itemStyle: { itemStyle: {
...@@ -90,7 +105,6 @@ export default defineComponent({ ...@@ -90,7 +105,6 @@ export default defineComponent({
label: { label: {
show: true, show: true,
position: "top", position: "top",
}, },
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
...@@ -114,7 +128,8 @@ export default defineComponent({ ...@@ -114,7 +128,8 @@ export default defineComponent({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
className: "extend-tooltip", className: "extend-tooltip",
formatter: "<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 亿元", formatter:
"<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 亿元",
}, },
legend: {}, legend: {},
grid: { grid: {
...@@ -180,7 +195,7 @@ export default defineComponent({ ...@@ -180,7 +195,7 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
.item { .item {
flex: 1; flex: 1;
padding: 10px 15px; padding: 10px 15px;
margin-right: 15px; margin-right: 15px;
......
src/views/dataCenter/industrial/model/IncomExtendLine/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
seriesData: [{
value: [],
}],
},
"typeTwo": {
seriesData: [{
value: [],
}],
},
"typeThree": {
seriesData: [{
value: [5204.49, 6029.77, 7633.65, 3545.5]
}],
},
}
\ No newline at end of file
src/views/dataCenter/industrial/model/Industrial/index.vue
浏览文件 @ f069c275
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<div class="item" v-for="(item,index) in cardItems" :key="item.text"> <div class="item" v-for="(item,index) in cardItems" :key="item.text">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<div class="value-des"> <div class="value-des">
<span>{{ item.value || "--" }}</span <span>{{ item.value || "--" }}</span>
>{{index === 0?"亿元":"%"}} {{index === 0?"亿元":"%"}}
</div> </div>
</div> </div>
</div> </div>
...@@ -20,16 +20,18 @@ ...@@ -20,16 +20,18 @@
import { defineComponent } from "vue"; 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_2", // type: "level_2",
echartType: "bar", // echartType: "bar",
barValue: [587.5, 137.6, 15.3, 71.1, 120.8, 65, 72,14, 8.2, 20.3, 1.6], // barValue: [587.5, 137.6, 15.3, 71.1, 120.8, 65, 72, 14, 8.2, 20.3, 1.6],
growthRate: [19, 12.8, -0.1, 31.7, 28.5, 33.3, 80, 17,0.4, 14.5, 33], // growthRate: [19, 12.8, -0.1, 31.7, 28.5, 33.3, 80, 17, 0.4, 14.5, 33],
}, // },
]; // ];
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
...@@ -90,9 +92,22 @@ export default defineComponent({ ...@@ -90,9 +92,22 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() { optionBar() {
const seriesBarList = seriesData.map((item, index) => { const seriesBarList = this.seriesData.map((item, index) => {
return { return {
name: item.name, name: item.name,
type: "bar", type: "bar",
...@@ -109,7 +124,7 @@ export default defineComponent({ ...@@ -109,7 +124,7 @@ export default defineComponent({
}; };
}); });
const seriesLineList = seriesData.map((item) => { const seriesLineList = this.seriesData.map((item) => {
return { return {
name: "增长率", name: "增长率",
type: "line", type: "line",
...@@ -276,7 +291,7 @@ export default defineComponent({ ...@@ -276,7 +291,7 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
.item { .item {
flex: 1; flex: 1;
padding: 10px 15px; padding: 10px 15px;
margin-right: 15px; margin-right: 15px;
......
src/views/dataCenter/industrial/model/Industrial/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
seriesData: [{
name: "",
type: "",
echartType: "",
barValue: [],
growthRate: [],
}],
},
"typeTwo": {
seriesData: [{
name: "",
type: "",
echartType: "",
barValue: [],
growthRate: [],
}],
},
"typeThree": {
seriesData: [{
name: "产值规模",
type: "level_2",
echartType: "bar",
barValue: [587.5, 137.6, 15.3, 71.1, 120.8, 65, 72, 14, 8.2, 20.3, 1.6],
growthRate: [19, 12.8, -0.1, 31.7, 28.5, 33.3, 80, 17, 0.4, 14.5, 33],
}],
},
}
\ No newline at end of file
src/views/dataCenter/industrial/model/TargetBar/index.vue
浏览文件 @ f069c275
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<div class="echarts-search"> <div class="echarts-search">
<div class="title">各市产业融合创新指标情况</div> <div class="title">各市产业融合创新指标情况</div>
</div> </div>
<div id="TargetBar" class="target-bar"></div> <div id="TargetBar" class="target-bar"></div>
...@@ -12,6 +11,8 @@ ...@@ -12,6 +11,8 @@
import { defineComponent } from "vue"; 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 xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
...@@ -44,14 +45,27 @@ export default defineComponent({ ...@@ -44,14 +45,27 @@ export default defineComponent({
{ label: "规模以上企业收入及增长率", value: 3 }, { label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 }, { label: "国防科工产值", value: 4 },
], ],
mapEcharts: null, mapEcharts: null,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
return { return {
tooltip: { tooltip: {
...@@ -75,7 +89,7 @@ export default defineComponent({ ...@@ -75,7 +89,7 @@ export default defineComponent({
yAxis: { yAxis: {
type: "value", type: "value",
show: false, show: false,
max:20 max: 20,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -93,7 +107,7 @@ export default defineComponent({ ...@@ -93,7 +107,7 @@ export default defineComponent({
position: "top", position: "top",
// formatter: "{c}亿元" // formatter: "{c}亿元"
}, },
data: [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15], data: this.seriesData,
}, },
], ],
}; };
...@@ -106,7 +120,6 @@ export default defineComponent({ ...@@ -106,7 +120,6 @@ export default defineComponent({
mapEcharts.setOption(this.optionBar); mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts; this.mapEcharts = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (!this.mapEcharts) { if (!this.mapEcharts) {
...@@ -135,7 +148,6 @@ export default defineComponent({ ...@@ -135,7 +148,6 @@ export default defineComponent({
margin: 10px 0; margin: 10px 0;
font-size: 14px; font-size: 14px;
} }
} }
.target-bar { .target-bar {
......
src/views/dataCenter/industrial/model/TargetBar/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [14.5, 9, 6, 10, 13, 14, 13.5, 8, 6, 12.5, 15],
}
\ No newline at end of file
src/views/dataCenter/innovation/index.vue
浏览文件 @ f069c275
...@@ -74,6 +74,8 @@ import Industrial from "./model/Industrial/index.vue"; ...@@ -74,6 +74,8 @@ import Industrial from "./model/Industrial/index.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 = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -87,9 +89,9 @@ const xAxisCity = [ ...@@ -87,9 +89,9 @@ const xAxisCity = [
"台州", "台州",
"丽水", "丽水",
]; ];
const cityData = { // const cityData = {
value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2], // value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
}; // };
/** /**
* 军民协同创新 * 军民协同创新
*/ */
...@@ -116,23 +118,38 @@ export default defineComponent({ ...@@ -116,23 +118,38 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.TargetBars.showLoading();
this.TargetBars.setOption(this.optionCity);
this.TargetBars.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].cityData;
},
optionCity() { optionCity() {
const seriesBar = { const seriesBar = this.seriesData.map((item) => {
type: "bar", return {
type: "bar",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
barWidth: 20, barWidth: 20,
data: cityData.value.map((item) => { data: item.value.map((item) => {
return { return {
value: item, value: item,
label: "收入规模", label: "收入规模",
}; };
}), }),
}; };
});
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -170,7 +187,7 @@ export default defineComponent({ ...@@ -170,7 +187,7 @@ export default defineComponent({
type: "category", type: "category",
data: xAxisCity, data: xAxisCity,
}, },
series: [seriesBar], series: [...seriesBar],
}; };
}, },
}, },
......
src/views/dataCenter/innovation/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
cityData: [{
value: [],
}]
},
"typeTwo": {
cityData: [{
value: [],
}]
},
"typeThree": {
cityData: [{
value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
}]
}
}
\ No newline at end of file
src/views/dataCenter/innovation/model/Munitions/index.vue
浏览文件 @ f069c275
...@@ -29,6 +29,8 @@ import { defineComponent } from "vue"; ...@@ -29,6 +29,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 +46,9 @@ const xAxisCity = [ ...@@ -44,9 +46,9 @@ const xAxisCity = [
"台州", "台州",
"丽水", "丽水",
]; ];
const cityData = { // const cityData = {
value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82], // value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82],
}; // };
/** /**
* 承担军需品情况 * 承担军需品情况
...@@ -79,23 +81,42 @@ export default defineComponent({ ...@@ -79,23 +81,42 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.enterprises.showLoading();
this.enterprises.setOption(this.optionCity);
this.enterprises.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].cityData;
},
optionCity() { optionCity() {
const seriesBar = { const seriesBar = this.seriesData.map((item) => {
type: "bar", return {
type: "bar",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
barWidth: 20, barWidth: 20,
data: cityData.value.map((item) => { data: item.value.map((item) => {
return { return {
value: item, value: item,
label: "收入规模", label: "收入规模",
}; };
}), }),
}; };
});
// const seriesBar = {
// };
return { return {
tooltip: { tooltip: {
...@@ -134,7 +155,7 @@ export default defineComponent({ ...@@ -134,7 +155,7 @@ export default defineComponent({
type: "category", type: "category",
data: xAxisCity, data: xAxisCity,
}, },
series: [seriesBar], series: [...seriesBar],
}; };
}, },
}, },
......
src/views/dataCenter/innovation/model/Munitions/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
cityData: [{
value: [],
}]
},
"typeTwo": {
cityData: [{
value: [],
}]
},
"typeThree": {
cityData: [{
value: [79.83, 9.08, 3.4, 11.8, 5.17, 13.95, 4.52, 1.58, 0.18, 3.69, 1.82],
}]
}
}
\ No newline at end of file
src/views/dataCenter/innovation/model/Outline/index.vue
浏览文件 @ f069c275
...@@ -17,8 +17,10 @@ ...@@ -17,8 +17,10 @@
import { defineComponent } from "vue"; 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 = [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6]; // const SeriesData = [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6];
const xAxisValue = [ const xAxisValue = [
"杭州", "杭州",
"宁波", "宁波",
...@@ -50,7 +52,20 @@ export default defineComponent({ ...@@ -50,7 +52,20 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
return { return {
tooltip: { tooltip: {
...@@ -89,7 +104,7 @@ export default defineComponent({ ...@@ -89,7 +104,7 @@ export default defineComponent({
position: "top", position: "top",
}, },
barWidth: 20, barWidth: 20,
data: SeriesData, data: this.seriesData,
}, },
], ],
}; };
......
src/views/dataCenter/innovation/model/Outline/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [19, 13.5, 6.5, 12.5, 15.5, 14, 6.5, 10.5, 8, 4, 6],
}
\ No newline at end of file
src/views/dataCenter/innovation/model/Platform/index.vue
浏览文件 @ f069c275
...@@ -30,14 +30,12 @@ import { defineComponent } from "vue"; ...@@ -30,14 +30,12 @@ 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";
const xAxisCity = [ import Mock from "./mock";
"2018年", import { mapState } from "vuex";
"2019年", const xAxisCity = ["2018年", "2019年", "2020年"];
"2020年", // const cityData = {
]; // value: [225, 160, 170],
const cityData = { // };
value: [225, 160, 170, ],
};
/** /**
* 全省军民协同创新平台情况——折线图 * 全省军民协同创新平台情况——折线图
...@@ -58,23 +56,54 @@ export default defineComponent({ ...@@ -58,23 +56,54 @@ export default defineComponent({
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.TargetBar.showLoading();
this.TargetBar.setOption(this.optionCity);
this.TargetBar.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].cityData;
},
optionCity() { optionCity() {
const seriesBar = { const seriesBar = this.seriesData.map((item) => {
type: "bar", return {
type: "bar",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
barWidth: 20, barWidth: 20,
data: cityData.value.map((item) => { data: item.value.map((item) => {
return { return {
value: item, value: item,
label: "收入规模", label: "收入规模",
}; };
}), }),
}; };
});
// const seriesBar = {
// type: "bar",
// itemStyle: {
// color: "#4198ff",
// },
// barWidth: 20,
// data: cityData.value.map((item) => {
// return {
// value: item,
// label: "收入规模",
// };
// }),
// };
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -112,7 +141,7 @@ export default defineComponent({ ...@@ -112,7 +141,7 @@ export default defineComponent({
type: "category", type: "category",
data: xAxisCity, data: xAxisCity,
}, },
series: [seriesBar], series: [...seriesBar],
}; };
}, },
}, },
......
src/views/dataCenter/innovation/model/Platform/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": {
cityData: [{
value: [],
}]
},
"typeTwo": {
cityData: [{
value: [],
}]
},
"typeThree": {
cityData: [{
value: [225, 160, 170],
}]
}
}
\ No newline at end of file
src/views/dataCenter/innovation/model/ScientificInvestment/index.vue
浏览文件 @ f069c275
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
</el-col> </el-col>
<el-col :span="13"> <el-col :span="13">
<div class="list-item" v-for="(item, index) in pieList" :key="item.label"> <div class="list-item" v-for="(item, index) in this.seriesData" :key="item.label">
<el-row align="middle"> <el-row align="middle">
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div> <div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
<span> {{ item.label }}</span> <span>{{ item.label }}</span>
</el-row> </el-row>
<div class="pie-value"> <div class="pie-value">
{{ item.value }} {{ item.value }}
...@@ -37,70 +37,72 @@ ...@@ -37,70 +37,72 @@
import { defineComponent } from "vue"; 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",
value: [ // value: [
37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76, // 37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76,
], // ],
rate: [ // rate: [
{ // {
city: "杭州", // city: "杭州",
value: 49.28, // value: 49.28,
}, // },
{ // {
city: "宁波", // city: "宁波",
value: 45.7, // value: 45.7,
}, // },
{ // {
city: "温州", // city: "温州",
value: 25.68, // value: 25.68,
}, // },
{ // {
city: "湖州", // city: "湖州",
value: 36.89, // value: 36.89,
}, // },
{ // {
city: "嘉兴", // city: "嘉兴",
value: 84.07, // value: 84.07,
}, // },
{ // {
city: "绍兴", // city: "绍兴",
value: 53.85, // value: 53.85,
}, // },
{ // {
city: "金华", // city: "金华",
value: 36.05, // value: 36.05,
}, // },
{ // {
city: "衢州", // city: "衢州",
value: 57.74, // value: 57.74,
}, // },
{ // {
city: "舟山", // city: "舟山",
value: 56.43, // value: 56.43,
}, // },
{ // {
city: "台州", // city: "台州",
value: 55.68, // value: 55.68,
}, // },
{ // {
city: "丽水", // city: "丽水",
value: 32.85, // value: 32.85,
}, // },
], // ],
}; // };
const PIE_LIST = [ // const PIE_LIST = [
{ label: "数字军工(网络、人工智能)", value: 25.17 }, // { label: "数字军工(网络、人工智能)", value: 25.17 },
{ label: "海洋", value: 20.18 }, // { label: "海洋", value: 20.18 },
{ label: "太空", value: 30.96 }, // { label: "太空", value: 30.96 },
{ label: "生物", value: 10.22 }, // { label: "生物", value: 10.22 },
{ label: "核电", value: 5.9 }, // { label: "核电", value: 5.9 },
// { label: "人工智能领域", value: 12.24 }, // // { label: "人工智能领域", value: 12.24 },
]; // ];
const PieColor = { const PieColor = {
level_1: "#47d6ad", level_1: "#47d6ad",
level_2: "#6fdef7", level_2: "#6fdef7",
...@@ -120,7 +122,7 @@ export default defineComponent({ ...@@ -120,7 +122,7 @@ export default defineComponent({
setup() {}, setup() {},
data() { data() {
return { return {
seriesData: SeriesData, // seriesData: SeriesData,
mapEcharts: null, mapEcharts: null,
cirLeftCharts: null, cirLeftCharts: null,
cirRightEchart: null, cirRightEchart: null,
...@@ -131,16 +133,29 @@ export default defineComponent({ ...@@ -131,16 +133,29 @@ export default defineComponent({
value: "19%", value: "19%",
}, },
], ],
pieList: PIE_LIST, // pieList: PIE_LIST,
pieColor: PieColor, pieColor: PieColor,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: { computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() { optionBar() {
const pieData = PIE_LIST.map((item, index) => { const pieData = this.seriesData.map((item, index) => {
return { return {
value: item.value, value: item.value,
itemStyle: { itemStyle: {
......
src/views/dataCenter/innovation/model/ScientificInvestment/mock.js 0 → 100644
浏览文件 @ f069c275
export default {
"typeOne": [],
"typeTwo": [],
"typeThree": [
{ label: "数字军工(网络、人工智能)", value: 25.17 },
{ label: "海洋", value: 20.18 },
{ label: "太空", value: 30.96 },
{ label: "生物", value: 10.22 },
{ label: "核电", value: 5.9 },
// { label: "人工智能领域", value: 12.24 },
]
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论