Skip to content

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

合并分支 'hyh' 到 'master'

fix(mock数据)：点击顶部按钮切换不同内容效果 查看合并请求 !4
上级 af1ac370 f069c275
显示空白字符变更
内嵌 并排
正在显示 包含 792 行增加 和 301 行删除
src/views/dataCenter/army/index.vue
浏览文件 @ 772cc29a
<template>
<el-row class="map-warpper" :gutter="16">
<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 class="map-right" :span="16">
<el-row :gutter="16">
......@@ -11,7 +13,9 @@
</div>
</el-col>
<el-col :span="12">
<div class="card-item"><Science /></div>
<div class="card-item">
<Science />
</div>
</el-col>
</el-row>
</el-col>
......@@ -59,7 +63,10 @@ export default defineComponent({
},
],
extendCardItems: [
{ label: "参与军民融合产业互动的规模以上企业主营收入", value: "3545.5" },
{
label: "参与军民融合产业互动的规模以上企业主营收入",
value: "3545.5",
},
{
label: "参与军民融合产业互动的规模以上企业主营收入增长率",
value: "19",
......
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ 772cc29a
......@@ -7,15 +7,13 @@
<div class="info-wrapper">
<div class="info-details">
<div
class="info-item"
v-for="item in countryData.info"
:key="item.label"
>
<div class="info-item" v-for="item in countryData.info" :key="item.label">
<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 v-show="false" id="circularEchart" class="circular"></div>
......@@ -33,15 +31,13 @@
<div class="info-wrapper">
<div class="info-details">
<div
class="info-item"
v-for="item in provinceData.info"
:key="item.label"
>
<div class="info-item" v-for="item in provinceData.info" :key="item.label">
<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 id="cirRightEchart" class="circular"></div>
......@@ -384,7 +380,7 @@ export default defineComponent({
this.cirRightEchart.showLoading();
this.cirRightEchart.setOption(this.ptionCirRight);
this.cirRightEchart.hideLoading();
}
},
},
methods: {
initEcharts() {
......
src/views/dataCenter/army/model/Munitions/index.vue
浏览文件 @ 772cc29a
......@@ -18,17 +18,17 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
// 国家增长率
const seriesCountryData = [
{
value: [107.32, 157.51, 172.11],
rate: ["", 42.17, 21.19,],
},
];
const xAxisCountry = ["2018", "2019", "2020","2021","2022",];
// const seriesCountryData = [
// {
// value: [107.32, 157.51, 172.11],
// rate: ["", 42.17, 21.19],
// },
// ];
const xAxisCountry = ["2018", "2019", "2020", "2021", "2022"];
// 城市增长率
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({
mounted() {
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: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
cityData() {
return Mock[this.curDataType].cityData;
},
optionCountry() {
const seriesBarList = seriesCountryData.map((item) => {
const seriesBarList = this.seriesData.map((item) => {
// console.log("测试", item.value);
return {
name: "收入规模",
type: "bar",
......@@ -87,7 +105,7 @@ export default defineComponent({
};
});
const seriesLineList = seriesCountryData.map((item) => {
const seriesLineList = this.seriesData.map((item) => {
return {
name: "增长率",
......@@ -174,7 +192,7 @@ export default defineComponent({
},
barWidth: 20,
data: cityData.value.map((item) => {
data: this.cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
......@@ -194,8 +212,7 @@ export default defineComponent({
},
name: "增长率",
data: cityData.rate.map((item) => {
data: this.cityData.rate.map((item) => {
return {
value: item,
label: "增长率",
......
src/views/dataCenter/army/model/Munitions/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -4,12 +4,16 @@
<div class="card-items">
<div class="item">
<span>入伍总人数</span>
<div class="value-des"><span>1470</span>人</div>
<div class="value-des">
<span>1470</span>人
</div>
</div>
<div class="item">
<span>入伍总比列</span>
<div class="value-des"><span>0.5%</span></div>
<div class="value-des">
<span>0.5%</span>
</div>
</div>
</div>
......@@ -22,11 +26,10 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const 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],
};
// const seriesData = this
const xAxisCity = [
"杭州",
"宁波",
......@@ -58,9 +61,23 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBar = {
const seriesBar = this.seriesData.map((item) => {
return {
name: "入伍人数",
type: "bar",
......@@ -69,15 +86,17 @@ export default defineComponent({
},
barWidth: 20,
data: seriesData.value.map((item) => {
data: item.value.map((item) => {
return {
value: item,
label: "入伍人数",
};
}),
};
});
const seriesLine = {
const seriesLine = this.seriesData.map((item) => {
return {
name: "入伍比率",
type: "line",
stack: "Total",
......@@ -89,13 +108,16 @@ export default defineComponent({
focus: "series",
},
data: seriesData.rate.map((item) => {
data: item.rate.map((item) => {
return {
value: item,
label: "入伍比率",
};
}),
};
});
// const seriesLine = {};
return {
tooltip: {
......@@ -147,7 +169,7 @@ export default defineComponent({
type: "category",
data: xAxisCity,
},
series: [seriesBar, seriesLine],
series: [...seriesBar, ...seriesLine],
};
},
},
......
src/views/dataCenter/army/model/Person/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -4,12 +4,18 @@
<el-col :span="11">
<div class="card-item">
<span>民口单位军品收入</span>
<div>53.35<span>亿元</span></div>
<div>
53.35
<span>亿元</span>
</div>
</div>
<div class="card-item">
<span>人均民口单位军品收入</span>
<div>90.56<span>元</span></div>
<div>
90.56
<span>元</span>
</div>
</div>
</el-col>
......@@ -22,11 +28,7 @@
</div>
<el-scrollbar height="92px">
<div
class="rate-list-item"
v-for="(item, index) in seriesData.rate"
:key="index"
>
<div class="rate-list-item" v-for="(item, index) in this.seriesData" :key="index">
<span>{{ item.city }}</span>
<span class="rate-value">{{ item.increace }}%</span>
</div>
......@@ -42,73 +44,13 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
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 SeriesData = {
// // type: "level_1",
// ...this.seriesData,
// };
const xAxisValue = [
"杭州",
"宁波",
......@@ -133,14 +75,27 @@ export default defineComponent({
setup() {},
data() {
return {
seriesData: SeriesData,
// seriesData: SeriesData,
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
const seriesLine = {
type: "line",
......@@ -168,7 +123,7 @@ export default defineComponent({
]),
},
data: SeriesData.rate,
data: this.seriesData,
};
return {
......@@ -327,7 +282,7 @@ export default defineComponent({
.incom-distribution {
flex: 1;
min-height: 150px;
height: calc(100% - 200px);
height: calc(100% - 200px);
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/dataCenter/army/model/Science/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -3,7 +3,6 @@
<div class="echarts-search">
<div class="title">各市服务强军兴军创新指标情况</div>
</div>
<div id="TargetBar" class="target-bar"></div>
......@@ -12,6 +11,8 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisValue = [
"杭州",
......@@ -51,6 +52,12 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
return {
tooltip: {
......@@ -89,12 +96,19 @@ export default defineComponent({
position: "top",
},
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: {
initEcharts() {
const dom = document.getElementById("TargetBar");
......@@ -102,7 +116,6 @@ export default defineComponent({
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
......@@ -131,7 +144,6 @@ export default defineComponent({
margin: 12px 0;
font-size: 14px;
}
}
.target-bar {
......
src/views/dataCenter/army/model/StrongArmy/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
<template>
<el-row class="map-warpper" :gutter="16">
<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 :span="16">
<el-row class="map-right card-item" >
<el-row class="map-right card-item">
<el-col :span="12">
<IncomExtendLine
echartsId="incomExtend"
......@@ -13,7 +15,9 @@
:cardItems="extendCardItems"
/>
</el-col>
<el-col :span="10" :offset="1"><IncomDistribution /></el-col>
<el-col :span="10" :offset="1">
<IncomDistribution />
</el-col>
</el-row>
</el-col>
</el-row>
......@@ -46,14 +50,13 @@ import IncomDistribution from "./model/IncomDistribution/index.vue";
import BusinessIncome from "./model/BusinessIncome/index.vue";
import Industrial from "./model/Industrial/index.vue";
export default defineComponent({
components: {
TargetBar,
IncomExtendLine,
IncomDistribution,
BusinessIncome,
Industrial
Industrial,
},
setup() {},
data() {
......@@ -66,7 +69,10 @@ export default defineComponent({
},
],
extendCardItems: [
{ label: "参与军民融合产业互动的规模以上企业主营业务收入", value: "3545.5" },
{
label: "参与军民融合产业互动的规模以上企业主营业务收入",
value: "3545.5",
},
{
label: "参与军民融合产业互动的规模以上企业主营业务收入增长率",
value: "31.5",
......@@ -92,7 +98,7 @@ export default defineComponent({
.map-warpper {
box-sizing: border-box;
.map-right{
.map-right {
padding-bottom: 0;
}
}
......
src/views/dataCenter/industrial/model/BusinessIncome/index.vue
浏览文件 @ 772cc29a
......@@ -8,7 +8,10 @@
<div class="money-logo">
<div>
<!-- <img src="@/assets/img/qiandai.svg" alt="" /> -->
<div>营业收入 <span>(亿元)</span></div>
<div>
营业收入
<span>(亿元)</span>
</div>
</div>
<span class="mony-number">3532.82</span>
</div>
......@@ -19,20 +22,16 @@
<el-row :gutter="15">
<el-col
class="pie-item"
v-for="(item, index) in pieList"
v-for="(item, index) in this.seriesData"
:key="item.lable"
:span="11"
>
<el-row align="middle">
<div
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
{{ item.label }}
</el-row>
<div class="pie-value">
<span>{{ item.value }}</span
>亿元
<span>{{ item.value }}</span>亿元
</div>
</el-col>
</el-row>
......@@ -44,18 +43,20 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
const PIE_LIST = [
{ 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 },
];
// const PIE_LIST = [
// { 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 },
// ];
const PieColor = {
level_1: "#1781df",
......@@ -80,7 +81,7 @@ export default defineComponent({
setup() {},
data() {
return {
pieList: PIE_LIST,
// pieList: this.seriesData,
pieColor: PieColor,
mapEcharts: null,
};
......@@ -88,9 +89,22 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
const pieData = PIE_LIST.map((item, index) => {
const pieData = this.seriesData.map((item, index) => {
return {
value: item.value,
itemStyle: {
......@@ -201,7 +215,7 @@ export default defineComponent({
width: 35px;
}
}
.mony-number{
.mony-number {
font-size: 36px;
color: #4198ff;
}
......
src/views/dataCenter/industrial/model/BusinessIncome/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -7,16 +7,19 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const 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]
},
];
// const 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],
// },
// ];
const xAxisValue = [
"杭州",
......@@ -48,9 +51,22 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBarList = seriesData.map((item,index) => {
const seriesBarList = this.seriesData.map((item, index) => {
return {
name: "主营业务收入",
type: "bar",
......@@ -62,13 +78,13 @@ export default defineComponent({
data: item.value.map((valItem) => {
return {
value: valItem,
label: "主营业务收入"
label: "主营业务收入",
};
}),
};
});
const seriesLineList = seriesData.map((item) => {
const seriesLineList = this.seriesData.map((item) => {
return {
name: "增长率",
type: "line",
......@@ -80,11 +96,11 @@ export default defineComponent({
focus: "series",
},
data: item.rateData.map(val => {
data: item.rateData.map((val) => {
return {
value: val,
label: "增长率"
}
label: "增长率",
};
}),
};
});
......@@ -108,7 +124,7 @@ export default defineComponent({
<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>`
</div>`;
return html;
},
......@@ -122,7 +138,7 @@ export default defineComponent({
bottom: "3%",
containLabel: true,
},
yAxis:[
yAxis: [
{
type: "value",
name: "金额(亿元)",
......@@ -189,7 +205,7 @@ export default defineComponent({
display: inline-block;
border-radius: 50%;
}
.income-echart .text{
.income-echart .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
......@@ -198,11 +214,11 @@ export default defineComponent({
margin: 0;
}
.income-echart .text-color_1{
color: #4198ff
.income-echart .text-color_1 {
color: #4198ff;
}
.income-echart .text-color_2{
color: #eca933
.income-echart .text-color_2 {
color: #eca933;
}
.income-echart .color_1::before {
background: #4198ff;
......@@ -210,7 +226,6 @@ export default defineComponent({
.income-echart .color_2::before {
background: #eca933;
}
</style>
<style lang="scss" scoped>
......@@ -222,7 +237,7 @@ export default defineComponent({
.incom-distribution {
flex: 1;
min-height: 315px;
height: calc( 100% - 70px);
height: calc(100% - 70px);
box-sizing: border-box;
margin-top: 10px;
}
......
src/views/dataCenter/industrial/model/IncomDistribution/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -5,8 +5,8 @@
<div class="item" v-for="(item,index) in cardItems" :key="item.text">
<span>{{ item.label }}</span>
<div class="value-des">
<span>{{ item.value || "--" }}</span
>{{index === 0?"亿元":"%"}}
<span>{{ item.value || "--" }}</span>
{{index === 0?"亿元":"%"}}
</div>
</div>
</div>
......@@ -20,14 +20,16 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const seriesData = [
{
// name: "国防要求建设项目",
type: "level_1",
value: [5204.49, 6029.77, 7633.65, 3545.5],
},
];
// const seriesData = [
// {
// // name: "国防要求建设项目",
// type: "level_1",
// value: [5204.49, 6029.77, 7633.65, 3545.5],
// },
// ];
const xAxisValue = ["2018年", "2019年", "2020年", "2021上半年"];
......@@ -76,9 +78,22 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesLine = seriesData.map((item) => {
const seriesLine = this.seriesData.map((item) => {
return {
type: "line",
itemStyle: {
......@@ -90,7 +105,6 @@ export default defineComponent({
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
......@@ -114,7 +128,8 @@ export default defineComponent({
tooltip: {
trigger: "axis",
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: {},
grid: {
......
src/views/dataCenter/industrial/model/IncomExtendLine/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -5,8 +5,8 @@
<div class="item" v-for="(item,index) in cardItems" :key="item.text">
<span>{{ item.label }}</span>
<div class="value-des">
<span>{{ item.value || "--" }}</span
>{{index === 0?"亿元":"%"}}
<span>{{ item.value || "--" }}</span>
{{index === 0?"亿元":"%"}}
</div>
</div>
</div>
......@@ -20,16 +20,18 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const 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],
},
];
// const 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],
// },
// ];
const xAxisValue = [
"杭州",
......@@ -90,9 +92,22 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].seriesData;
},
optionBar() {
const seriesBarList = seriesData.map((item, index) => {
const seriesBarList = this.seriesData.map((item, index) => {
return {
name: item.name,
type: "bar",
......@@ -109,7 +124,7 @@ export default defineComponent({
};
});
const seriesLineList = seriesData.map((item) => {
const seriesLineList = this.seriesData.map((item) => {
return {
name: "增长率",
type: "line",
......
src/views/dataCenter/industrial/model/Industrial/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -3,7 +3,6 @@
<div class="echarts-search">
<div class="title">各市产业融合创新指标情况</div>
</div>
<div id="TargetBar" class="target-bar"></div>
......@@ -12,6 +11,8 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisValue = [
"杭州",
......@@ -51,7 +52,20 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
return {
tooltip: {
......@@ -75,7 +89,7 @@ export default defineComponent({
yAxis: {
type: "value",
show: false,
max:20
max: 20,
},
xAxis: {
type: "category",
......@@ -93,7 +107,7 @@ export default defineComponent({
position: "top",
// 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({
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
},
},
unmounted() {
if (!this.mapEcharts) {
......@@ -135,7 +148,6 @@ export default defineComponent({
margin: 10px 0;
font-size: 14px;
}
}
.target-bar {
......
src/views/dataCenter/industrial/model/TargetBar/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -74,6 +74,8 @@ import Industrial from "./model/Industrial/index.vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisCity = [
"杭州",
"宁波",
......@@ -87,9 +89,9 @@ const xAxisCity = [
"台州",
"丽水",
];
const cityData = {
value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
};
// const cityData = {
// value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
// };
/**
* 军民协同创新
*/
......@@ -116,9 +118,23 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.TargetBars.showLoading();
this.TargetBars.setOption(this.optionCity);
this.TargetBars.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].cityData;
},
optionCity() {
const seriesBar = {
const seriesBar = this.seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
......@@ -126,13 +142,14 @@ export default defineComponent({
},
barWidth: 20,
data: cityData.value.map((item) => {
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
});
return {
tooltip: {
trigger: "axis",
......@@ -170,7 +187,7 @@ export default defineComponent({
type: "category",
data: xAxisCity,
},
series: [seriesBar],
series: [...seriesBar],
};
},
},
......
src/views/dataCenter/innovation/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -29,6 +29,8 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
// 城市增长率
const xAxisCity = [
......@@ -44,9 +46,9 @@ const xAxisCity = [
"台州",
"丽水",
];
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],
};
// 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],
// };
/**
* 承担军需品情况
......@@ -79,9 +81,23 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.enterprises.showLoading();
this.enterprises.setOption(this.optionCity);
this.enterprises.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].cityData;
},
optionCity() {
const seriesBar = {
const seriesBar = this.seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
......@@ -89,13 +105,18 @@ export default defineComponent({
},
barWidth: 20,
data: cityData.value.map((item) => {
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
});
// const seriesBar = {
// };
return {
tooltip: {
......@@ -134,7 +155,7 @@ export default defineComponent({
type: "category",
data: xAxisCity,
},
series: [seriesBar],
series: [...seriesBar],
};
},
},
......
src/views/dataCenter/innovation/model/Munitions/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -17,8 +17,10 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
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 = [
"杭州",
"宁波",
......@@ -50,7 +52,20 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
return {
tooltip: {
......@@ -89,7 +104,7 @@ export default defineComponent({
position: "top",
},
barWidth: 20,
data: SeriesData,
data: this.seriesData,
},
],
};
......
src/views/dataCenter/innovation/model/Outline/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -30,14 +30,12 @@ import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import { Aim } from "@element-plus/icons";
const xAxisCity = [
"2018年",
"2019年",
"2020年",
];
const cityData = {
value: [225, 160, 170, ],
};
import Mock from "./mock";
import { mapState } from "vuex";
const xAxisCity = ["2018年", "2019年", "2020年"];
// const cityData = {
// value: [225, 160, 170],
// };
/**
* 全省军民协同创新平台情况——折线图
......@@ -58,9 +56,23 @@ export default defineComponent({
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.TargetBar.showLoading();
this.TargetBar.setOption(this.optionCity);
this.TargetBar.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType].cityData;
},
optionCity() {
const seriesBar = {
const seriesBar = this.seriesData.map((item) => {
return {
type: "bar",
itemStyle: {
......@@ -68,13 +80,30 @@ export default defineComponent({
},
barWidth: 20,
data: cityData.value.map((item) => {
data: item.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
});
// const seriesBar = {
// type: "bar",
// itemStyle: {
// color: "#4198ff",
// },
// barWidth: 20,
// data: cityData.value.map((item) => {
// return {
// value: item,
// label: "收入规模",
// };
// }),
// };
return {
tooltip: {
trigger: "axis",
......@@ -112,7 +141,7 @@ export default defineComponent({
type: "category",
data: xAxisCity,
},
series: [seriesBar],
series: [...seriesBar],
};
},
},
......
src/views/dataCenter/innovation/model/Platform/mock.js 0 → 100644
浏览文件 @ 772cc29a
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
浏览文件 @ 772cc29a
......@@ -19,10 +19,10 @@
</el-col>
<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">
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
<span> {{ item.label }}</span>
<span>{{ item.label }}</span>
</el-row>
<div class="pie-value">
{{ item.value }}
......@@ -37,70 +37,72 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
const SeriesData = {
name: "国防要求建设项目",
type: "level_1",
value: [
37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76,
],
rate: [
{
city: "杭州",
value: 49.28,
},
{
city: "宁波",
value: 45.7,
},
{
city: "温州",
value: 25.68,
},
{
city: "湖州",
value: 36.89,
},
{
city: "嘉兴",
value: 84.07,
},
{
city: "绍兴",
value: 53.85,
},
{
city: "金华",
value: 36.05,
},
{
city: "衢州",
value: 57.74,
},
{
city: "舟山",
value: 56.43,
},
// const SeriesData = {
// name: "国防要求建设项目",
// type: "level_1",
// value: [
// 37.28, 61.75, 34.54, 8.2, 34.63, 74.4, 32.74, 75.35, 28.13, 27.25, 12.76,
// ],
// rate: [
// {
// city: "杭州",
// value: 49.28,
// },
// {
// city: "宁波",
// value: 45.7,
// },
// {
// city: "温州",
// value: 25.68,
// },
// {
// city: "湖州",
// value: 36.89,
// },
// {
// city: "嘉兴",
// value: 84.07,
// },
// {
// city: "绍兴",
// value: 53.85,
// },
// {
// city: "金华",
// value: 36.05,
// },
// {
// city: "衢州",
// value: 57.74,
// },
// {
// city: "舟山",
// value: 56.43,
// },
{
city: "台州",
value: 55.68,
},
{
city: "丽水",
value: 32.85,
},
],
};
const PIE_LIST = [
{ label: "数字军工(网络、人工智能)", value: 25.17 },
{ label: "海洋", value: 20.18 },
{ label: "太空", value: 30.96 },
// {
// city: "台州",
// value: 55.68,
// },
// {
// city: "丽水",
// value: 32.85,
// },
// ],
// };
// const PIE_LIST = [
// { label: "数字军工(网络、人工智能)", value: 25.17 },
// { label: "海洋", value: 20.18 },
// { label: "太空", value: 30.96 },
{ label: "生物", value: 10.22 },
{ label: "核电", value: 5.9 },
// { label: "人工智能领域", value: 12.24 },
];
// { label: "生物", value: 10.22 },
// { label: "核电", value: 5.9 },
// // { label: "人工智能领域", value: 12.24 },
// ];
const PieColor = {
level_1: "#47d6ad",
level_2: "#6fdef7",
......@@ -120,7 +122,7 @@ export default defineComponent({
setup() {},
data() {
return {
seriesData: SeriesData,
// seriesData: SeriesData,
mapEcharts: null,
cirLeftCharts: null,
cirRightEchart: null,
......@@ -131,16 +133,29 @@ export default defineComponent({
value: "19%",
},
],
pieList: PIE_LIST,
// pieList: PIE_LIST,
pieColor: PieColor,
};
},
mounted() {
this.initEcharts();
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
},
},
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
return Mock[this.curDataType];
},
optionBar() {
const pieData = PIE_LIST.map((item, index) => {
const pieData = this.seriesData.map((item, index) => {
return {
value: item.value,
itemStyle: {
......
src/views/dataCenter/innovation/model/ScientificInvestment/mock.js 0 → 100644
浏览文件 @ 772cc29a
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论