Skip to content

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

fix(创新示范): 图表切换刷新

上级 6cc6e692
隐藏空白字符变更
内嵌 并排
正在显示 包含 232 行增加 和 264 行删除
src/views/dataCenter/ConctructSystem/model/Munitions/index.vue
浏览文件 @ 3107c89c
......@@ -4,12 +4,11 @@
<div class="meeting">
<div>今年以来召开融委全体会议次数</div>
<div class="frequency">
{{meetingCount || "--"}}
{{ meetingCount || "--" }}
<span class="second">次</span>
</div>
</div>
<el-row class="investment">
<el-col class="city-echarts">
<div class="title2X">各市融委全体会议召开次数</div>
<div id="mapEcharts" class="echart-item"></div>
......@@ -39,6 +38,7 @@ const xAxisCity = [
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 承担军需品情况
......@@ -58,15 +58,14 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
...mapState({
curDataType: (state) => state.curDataType,
}),
meetingCount(){
return Mock[this.curDataType].meetingCount;
meetingCount() {
return Mock[this.curDataType].meetingCount;
},
cityData() {
return Mock[this.curDataType].cityData;
return Mock[this.curDataType].cityData;
},
optionCity() {
const seriesBar = {
......@@ -124,11 +123,11 @@ export default defineComponent({
};
},
},
watch: {
watch: {
cityData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionCity);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionCity, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
......@@ -138,9 +137,9 @@ export default defineComponent({
initCityEcharts() {
const dom = document.getElementById("mapEcharts");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionCity);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/ConctructSystem/model/Outline/index.vue
浏览文件 @ 3107c89c
......@@ -3,7 +3,6 @@
<MapTitle text="五大体系建设总览" />
<div class="describes">
<div class="text">各市五大体系建设指标情况</div>
</div>
<div id="synergyInnovation" class="line"></div>
......@@ -17,7 +16,7 @@ import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
const xAxisValue = [
"杭州",
"宁波",
......@@ -50,7 +49,7 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
......@@ -63,7 +62,7 @@ export default defineComponent({
axisPointer: {
type: "shadow",
},
textStyle: {} ,
textStyle: {},
className: "target-bar-tooltip",
formatter:
"<span class='title'>{b0}市</span>: <br /> <span class='bar-text'>{c0}</span> 分",
......@@ -92,7 +91,7 @@ export default defineComponent({
label: {
show: true,
position: "top",
formatter:"{c} 分"
formatter: "{c} 分",
},
barWidth: 20,
data: this.seriesData,
......@@ -103,18 +102,17 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
initEcharts() {
const dom = document.getElementById("synergyInnovation");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......@@ -135,7 +133,6 @@ export default defineComponent({
padding-left: 10px;
color: #4198ff;
}
</style>
<style lang="scss" scoped>
......@@ -148,7 +145,7 @@ export default defineComponent({
.describes {
margin: 0 10px 5px 0;
box-sizing: border-box;
.text {
color: #4198ff;
margin: 10px 0;
......
src/views/dataCenter/ConctructSystem/model/Platform/index.vue
浏览文件 @ 3107c89c
......@@ -7,12 +7,11 @@
<div class="item">
<span>今年以来融办主任主持召开主任会议次数</span>
<div class="value-des">
<span>{{meetingCount || "--"}}</span>次
<span>{{ meetingCount || "--" }}</span
>次
</div>
</div>
</div>
</div>
<div id="targetBar" class="target-bar"></div>
......@@ -39,7 +38,7 @@ const xAxisCity = [
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 全省军民协同创新平台情况——折线图
......@@ -61,15 +60,14 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
...mapState({
curDataType: (state) => state.curDataType,
}),
meetingCount(){
return Mock[this.curDataType].meetingCount;
meetingCount() {
return Mock[this.curDataType].meetingCount;
},
cityData() {
return Mock[this.curDataType].cityData;
return Mock[this.curDataType].cityData;
},
optionCity() {
const seriesBar = {
......@@ -126,11 +124,11 @@ export default defineComponent({
};
},
},
watch: {
watch: {
cityData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionCity);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionCity, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
......@@ -139,9 +137,9 @@ export default defineComponent({
},
initCityEcharts() {
const dom = document.getElementById("targetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionCity);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/index.vue
浏览文件 @ 3107c89c
......@@ -29,7 +29,6 @@ const SeriesData = {
name: "国防要求建设项目",
type: "level_1",
};
;
const PieColor = {
level_1: "#4198ff",
level_2: "#6fdef7",
......@@ -38,6 +37,7 @@ const PieColor = {
level_5: "#9daff9",
level_6: "#47d6ad",
};
let MAP_ECHARTS = null;
/**
* 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
......@@ -51,14 +51,13 @@ export default defineComponent({
return {
seriesData: SeriesData,
mapEcharts: null,
};
},
mounted() {
this.initEcharts();
},
computed: {
...mapState({
...mapState({
curDataType: (state) => state.curDataType,
}),
cardItems() {
......@@ -158,19 +157,19 @@ export default defineComponent({
};
},
},
watch: {
watch: {
pieList() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
initEcharts() {
const dom = document.getElementById("pie");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ 3107c89c
......@@ -7,11 +7,15 @@
<div class="info-wrapper">
<div class="info-details">
<div class="info-item" v-for="item in countryData.info" :key="item.label">
<span class="title">{{item.label || "--"}}</span>
<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}}
<span>{{ item.value || "--" }}</span>
{{ item.unit }}
</div>
</div>
</div>
......@@ -31,11 +35,15 @@
<div class="info-wrapper">
<div class="info-details">
<div class="info-item" v-for="item in provinceData.info" :key="item.label">
<span class="title">{{item.label || "--"}}</span>
<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}}
<span>{{ item.value || "--" }}</span>
{{ item.unit }}
</div>
</div>
</div>
......@@ -57,6 +65,8 @@ import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
let CRI_RIGHT_ECHART = null;
const xAxisValue = [
"杭州",
"宁波",
......@@ -372,34 +382,30 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
},
provinceData() {
this.cirRightEchart.showLoading();
this.cirRightEchart.setOption(this.ptionCirRight);
this.cirRightEchart.hideLoading();
CRI_RIGHT_ECHART.setOption(this.ptionCirRight, true);
},
},
methods: {
initEcharts() {
const dom = document.getElementById("economicConstruct");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
initCircularEcharts() {
const dom = document.getElementById("circularEchart");
const domCirRightEchart = document.getElementById("cirRightEchart");
const cirLeftCharts = echarts.init(dom);
const cirRightEchart = echarts.init(domCirRightEchart);
CRI_RIGHT_ECHART = echarts.init(domCirRightEchart);
cirLeftCharts.setOption(this.ptionCirLeft);
cirRightEchart.setOption(this.ptionCirRight);
CRI_RIGHT_ECHART.setOption(this.ptionCirRight);
this.cirLeftCharts = cirLeftCharts;
this.cirRightEchart = cirRightEchart;
this.cirRightEchart = CRI_RIGHT_ECHART;
},
},
unmounted() {
......@@ -510,7 +516,7 @@ export default defineComponent({
}
.circular {
margin-right: 60px;
margin-right: 40px;
margin-left: 40px;
width: 100px;
height: 100px;
......
src/views/dataCenter/army/model/Munitions/index.vue
浏览文件 @ 3107c89c
......@@ -21,13 +21,8 @@ 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],
// },
// ];
let MAP_ECHARTS = null;
let CITY_ECHARTS = null
const xAxisCountry = ["2018", "2019", "2020", "2021", "2022"];
// 城市增长率
......@@ -65,14 +60,14 @@ export default defineComponent({
},
watch: {
seriesData() {
this.countryEcharts.showLoading();
this.countryEcharts.setOption(this.optionCountry);
this.countryEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionCountry, true);
MAP_ECHARTS.hideLoading();
},
cityData() {
this.cityEcharts.showLoading();
this.cityEcharts.setOption(this.optionCity);
this.cityEcharts.hideLoading();
CITY_ECHARTS.showLoading();
CITY_ECHARTS.setOption(this.optionCity,true);
CITY_ECHARTS.hideLoading();
},
},
computed: {
......@@ -280,15 +275,15 @@ export default defineComponent({
},
initCountryEcharts() {
const dom = document.getElementById("countryEcharts");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCountry);
this.countryEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionCountry);
this.countryEcharts = MAP_ECHARTS;
},
initCityEcharts() {
const dom = document.getElementById("cityEcharts");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.cityEcharts = mapEcharts;
CITY_ECHARTS = echarts.init(dom);
CITY_ECHARTS.setOption(this.optionCity);
this.cityEcharts = CITY_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/army/model/Person/index.vue
浏览文件 @ 3107c89c
......@@ -3,12 +3,12 @@
<div class="describes">
<div class="card-items">
<div class="item" v-for="item in info" :key="item.label">
<span>{{item.label}}</span>
<span>{{ item.label }}</span>
<div class="value-des">
<span>{{item.value || "--"}}</span>{{item.unit}}
<span>{{ item.value || "--" }}</span
>{{ item.unit }}
</div>
</div>
</div>
<div class="text">各市输送人才情况</div>
......@@ -23,7 +23,6 @@ import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
// const seriesData = this
const xAxisCity = [
"杭州",
"宁波",
......@@ -37,6 +36,7 @@ const xAxisCity = [
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 地方为国防和军队建设培养输送人才情况
......@@ -57,15 +57,10 @@ export default defineComponent({
},
watch: {
seriesData() {
console.log("---sssss-", )
// this.mapEcharts.clear();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption({ ...this.optionBar }, true);
setTimeout(() => {
this.mapEcharts.showLoading();
this.mapEcharts.setOption({...this.optionBar}, true);
this.mapEcharts.hideLoading();
}, 500)
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -130,7 +125,7 @@ export default defineComponent({
},
className: "person-echart",
formatter: (params) => {
console.log("-----sssssssss")
console.log("-----sssssssss");
let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="person-echart ">
......@@ -180,9 +175,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById("locPerson");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/army/model/Science/index.vue
浏览文件 @ 3107c89c
......@@ -39,10 +39,7 @@ import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
// const SeriesData = {
// // type: "level_1",
// ...this.seriesData,
// };
let MAP_ECHARTS = null;
const xAxisValue = [
"杭州",
"宁波",
......@@ -76,9 +73,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -160,9 +157,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById("incomDistribution");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/army/model/StrongArmy/index.vue
浏览文件 @ 3107c89c
......@@ -14,6 +14,7 @@ import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
const xAxisValue = [
"杭州",
"宁波",
......@@ -104,17 +105,17 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
initEcharts() {
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/industrial/model/BusinessIncome/index.vue
浏览文件 @ 3107c89c
......@@ -12,7 +12,7 @@
<span>(亿元)</span>
</div>
</div>
<span class="mony-number">{{incomCount ||"--"}}</span>
<span class="mony-number">{{ incomCount || "--" }}</span>
</div>
</div>
</el-col>
......@@ -26,11 +26,15 @@
: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>
......@@ -45,7 +49,6 @@ import { Aim } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";
const PieColor = {
level_1: "#1781df",
level_2: "#67bbf9",
......@@ -58,6 +61,7 @@ const PieColor = {
level_9: "#47d6ad",
};
let MAP_ECHARTS = null;
/**
* 军民融合产业主营业务收入
*/
......@@ -78,9 +82,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -147,9 +151,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById("businessIncome");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/industrial/model/IncomDistribution/index.vue
浏览文件 @ 3107c89c
......@@ -10,17 +10,6 @@ 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 xAxisValue = [
"杭州",
"宁波",
......@@ -34,6 +23,7 @@ const xAxisValue = [
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 主营业务收入分布——柱状图
......@@ -53,10 +43,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.clear();
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -164,9 +153,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById("incomDistribution");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/industrial/model/IncomExtendLine/index.vue
浏览文件 @ 3107c89c
......@@ -2,11 +2,11 @@
<MapTitle :text="echartsTitle" />
<div class="describes">
<div class="card-items">
<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>
<div class="value-des">
<span>{{ item.value || "--" }}</span>
{{index === 0?"亿元":"%"}}
{{ index === 0 ? "亿元" : "%" }}
</div>
</div>
</div>
......@@ -23,13 +23,7 @@ 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],
// },
// ];
let MAP_ECHARTS = null;
const xAxisValue = ["2018年", "2019年", "2020年", "2021上半年"];
......@@ -80,9 +74,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -154,9 +148,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/industrial/model/Industrial/index.vue
浏览文件 @ 3107c89c
......@@ -2,11 +2,11 @@
<MapTitle :text="echartsTitle" />
<div class="describes">
<div class="card-items">
<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>
<div class="value-des">
<span>{{ item.value || "--" }}</span>
{{index === 0?"亿元":"%"}}
{{ index === 0 ? "亿元" : "%" }}
</div>
</div>
</div>
......@@ -23,15 +23,7 @@ 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],
// },
// ];
let MAP_ECHARTS = null;
const xAxisValue = [
"杭州",
......@@ -94,9 +86,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -200,9 +192,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById(this.echartsId);
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/industrial/model/TargetBar/index.vue
浏览文件 @ 3107c89c
......@@ -27,7 +27,7 @@ const xAxisValue = [
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 产业融合发展总览——柱状图
*/
......@@ -54,9 +54,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -116,9 +116,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/innovation/index.vue
浏览文件 @ 3107c89c
......@@ -36,14 +36,14 @@
<div class="item">
<span>省直部门新认定的领跑技术（产品）</span>
<div class="value-des">
<span>{{count|| "--"}}</span>个
<span>{{ count || "--" }}</span
>个
</div>
</div>
</div>
</div>
<div id="TargetBars" class="target-bar"></div>
</div>
</el-col>
</el-row>
......@@ -76,9 +76,7 @@ const xAxisCity = [
"台州",
"丽水",
];
// const cityData = {
// value: [75, 37, 4, 17, 8, 10, 1, 1, 0, 0, 2],
// };
let MAP_ECHARTS = null;
/**
* 军民协同创新
*/
......@@ -107,9 +105,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.TargetBars.showLoading();
this.TargetBars.setOption(this.optionCity);
this.TargetBars.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionCity, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -185,9 +183,9 @@ export default defineComponent({
},
initCityEcharts() {
const dom = document.getElementById("TargetBars");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.TargetBars = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionCity);
this.TargetBars = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/innovation/model/Industrial/index.vue
浏览文件 @ 3107c89c
......@@ -54,6 +54,7 @@ const xAxisValue = [
"丽水",
];
/**
* 全省军民协同创新平台情况/国防科技工业产值规模分布 -- 柱状图
*/
......
src/views/dataCenter/innovation/model/Munitions/index.vue
浏览文件 @ 3107c89c
......@@ -4,12 +4,11 @@
<div class="meeting">
<div>全省“民参军”企事业单位军品科研经费支出总额</div>
<div class="frequency">
{{money || "--"}}
{{ money || "--" }}
<span class="second">亿元</span>
</div>
</div>
<el-row class="investment">
<el-col class="city-echarts">
<div class="title2X">“民参军”企事业单位军品科研经费分布情况</div>
<div id="enterprises" class="echart-item"></div>
......@@ -39,9 +38,8 @@ 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],
// };
let MAP_ECHARTS = null;
/**
* 承担军需品情况
......@@ -55,7 +53,7 @@ export default defineComponent({
data() {
return {
countryEcharts: null,
enterprises: null,
};
},
......@@ -64,9 +62,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.enterprises.showLoading();
this.enterprises.setOption(this.optionCity, true);
this.enterprises.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionCity, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -128,7 +126,6 @@ export default defineComponent({
yAxis: {
type: "value",
name: "金额(亿元)",
},
xAxis: {
type: "category",
......@@ -145,9 +142,10 @@ export default defineComponent({
initCityEcharts() {
const dom = document.getElementById("enterprises");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.enterprises = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionCity);
this.enterprises = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/innovation/model/Outline/index.vue
浏览文件 @ 3107c89c
......@@ -34,6 +34,7 @@ const xAxisValue = [
"台州",
"丽水",
];
let MAP_ECHARTS = null;
/**
* 军民协同创新总览
......@@ -54,9 +55,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
computed: {
......@@ -116,9 +117,9 @@ export default defineComponent({
},
initEcharts() {
const dom = document.getElementById("synergyInnovation");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/innovation/model/Platform/index.vue
浏览文件 @ 3107c89c
......@@ -36,7 +36,7 @@ const xAxisCity = ["2018年", "2019年", "2020年"];
// const cityData = {
// value: [225, 160, 170],
// };
let MAP_ECHARTS = null;
/**
* 全省军民协同创新平台情况——折线图
*/
......@@ -58,9 +58,7 @@ export default defineComponent({
},
watch: {
seriesData() {
this.TargetBar.showLoading();
this.TargetBar.setOption(this.optionCity);
this.TargetBar.hideLoading();
MAP_ECHARTS.setOption(this.optionCity, true);
},
},
computed: {
......@@ -154,9 +152,9 @@ export default defineComponent({
},
initCityEcharts() {
const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.TargetBar = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionCity);
this.TargetBar = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/innovation/model/ScientificInvestment/index.vue
浏览文件 @ 3107c89c
......@@ -19,9 +19,16 @@
</el-col>
<el-col :span="13">
<div class="list-item" v-for="(item, index) in this.seriesData" :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>
<div
class="square"
:style="{ background: pieColor[`level_${index + 1}`] }"
></div>
<span>{{ item.label }}</span>
</el-row>
<div class="pie-value">
......@@ -48,6 +55,7 @@ const PieColor = {
level_5: "#9daff9",
level_6: "#fac858",
};
let MAP_ECHARTS = null;
/**
* 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
......@@ -63,7 +71,7 @@ export default defineComponent({
mapEcharts: null,
cirLeftCharts: null,
cirRightEchart: null,
// pieList: PIE_LIST,
pieColor: PieColor,
};
......@@ -73,9 +81,7 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
},
},
computed: {
......@@ -142,9 +148,9 @@ export default defineComponent({
methods: {
initEcharts() {
const dom = document.getElementById("pie");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/map/model/Income/index.vue
浏览文件 @ 3107c89c
......@@ -16,7 +16,7 @@ enum Echart_color_Enum {
level_1 = "#fac858",
level_2 = "#4198ff",
}
let MAP_ECHARTS = null;
const xAxisValue = ["2018", "2019", "2020", "2021"];
......@@ -34,7 +34,7 @@ export default defineComponent({
this.initEcharts();
},
computed: {
...mapState({
...mapState({
curDataType: (state) => state.curDataType,
}),
seriesData() {
......@@ -134,19 +134,19 @@ export default defineComponent({
};
},
},
watch: {
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.option);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.option, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
initEcharts() {
const dom = document.getElementById("incomEcharts");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.option);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.option);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/map/model/InvestmentProgress/index.vue
浏览文件 @ 3107c89c
......@@ -27,6 +27,8 @@ const xAxisValue = [
"丽水",
];
let MAP_ECHARTS = null;
export default defineComponent({
components: {
MapTitle,
......@@ -138,20 +140,20 @@ export default defineComponent({
};
},
},
watch: {
watch: {
seriesData() {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
initEcharts() {
const dom = document.getElementById("InvestmentProgress");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
src/views/dataCenter/map/model/Performance/index.vue
浏览文件 @ 3107c89c
......@@ -16,6 +16,7 @@ import * as echarts from "echarts";
import Mock from "./mock";
import { mapState } from "vuex";
let MAP_ECHARTS = null;
enum Bar_Enum {
level_1 = "#4f5d81",
level_2 = "#429a9d",
......@@ -128,12 +129,9 @@ export default defineComponent({
},
watch: {
seriesData() {
this.mapEcharts.clear();
setTimeout(() => {
this.mapEcharts.showLoading();
this.mapEcharts.setOption(this.optionBar);
this.mapEcharts.hideLoading();
}, 200);
MAP_ECHARTS.showLoading();
MAP_ECHARTS.setOption(this.optionBar, true);
MAP_ECHARTS.hideLoading();
},
},
methods: {
......@@ -142,9 +140,9 @@ export default defineComponent({
},
initEcharts() {
const dom = document.getElementById("performanceBar");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar);
this.mapEcharts = mapEcharts;
MAP_ECHARTS = echarts.init(dom);
MAP_ECHARTS.setOption(this.optionBar);
this.mapEcharts = MAP_ECHARTS;
},
},
unmounted() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论