Skip to content

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

fix(创新示范): 图表修改

上级 ea4235ca
隐藏空白字符变更
内嵌 并排
正在显示 包含 426 行增加 和 270 行删除
src/views/dataCenter/ConctructSystem/model/Munitions/index.vue
浏览文件 @ f488a17f
<template> <template>
<div class="enterprises-institutions"> <div class="enterprises-institutions">
<MapTitle text=融委全体会议召开情况 /> <MapTitle text="召开融委全体会议情况" />
<div class="meeting"> <div class="meeting">
<div> <div>今年以来召开融委全体会议次数</div>
今年以来召开融委全体会议次数
</div>
<div class="frequency"> <div class="frequency">
{{shu}} {{shu}}
<span class="second">次</span> <span class="second">次</span>
...@@ -18,7 +16,7 @@ ...@@ -18,7 +16,7 @@
{{ item.value }}<span class="unit">{{ item.unit }}</span> {{ item.value }}<span class="unit">{{ item.unit }}</span>
</div> </div>
</div> </div>
</el-col> --> </el-col>-->
<el-col class="city-echarts"> <el-col class="city-echarts">
<div class="title2X">各市融委全体会议召开次数</div> <div class="title2X">各市融委全体会议召开次数</div>
<div id="enterprises" class="echart-item"></div> <div id="enterprises" class="echart-item"></div>
...@@ -47,7 +45,7 @@ const xAxisCity = [ ...@@ -47,7 +45,7 @@ const xAxisCity = [
"丽水", "丽水",
]; ];
const cityData = { const cityData = {
value: [40.40, 40.40, 40, 40, 40, 40, 40, 40, 40, 40, 40], value: [40.4, 40.4, 40, 40, 40, 40, 40, 40, 40, 40, 40],
}; };
/** /**
...@@ -62,7 +60,7 @@ export default defineComponent({ ...@@ -62,7 +60,7 @@ export default defineComponent({
data() { data() {
return { return {
countryEcharts: null, countryEcharts: null,
shu:43, shu: 43,
enterprises: null, enterprises: null,
cards: [ cards: [
{ {
...@@ -75,7 +73,6 @@ export default defineComponent({ ...@@ -75,7 +73,6 @@ export default defineComponent({
value: "5%", value: "5%",
unit: "", unit: "",
}, },
], ],
}; };
}, },
...@@ -210,7 +207,7 @@ export default defineComponent({ ...@@ -210,7 +207,7 @@ export default defineComponent({
background: #eca933; background: #eca933;
} }
/* 次数 */ /* 次数 */
.meeting{ .meeting {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
border-radius: 4px; border-radius: 4px;
...@@ -222,16 +219,15 @@ export default defineComponent({ ...@@ -222,16 +219,15 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
.frequency{ .frequency {
color: rgba(65, 152, 255, 1); color: rgba(65, 152, 255, 1);
font-weight: 500; font-weight: 500;
} }
.second{ .second {
color: #666666;; color: #666666;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
} }
</style> </style>
......
src/views/dataCenter/ConctructSystem/model/ScientificInvestment/index.vue
浏览文件 @ f488a17f
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<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 ? "人" : "%" }} -->
</div> </div>
</div> </div>
</div> </div>
...@@ -34,73 +35,19 @@ import * as echarts from "echarts"; ...@@ -34,73 +35,19 @@ import * as echarts from "echarts";
const SeriesData = { const SeriesData = {
name: "国防要求建设项目", name: "国防要求建设项目",
type: "level_1", 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 = [ const PIE_LIST = [
// { label: "海洋领域", value: 25.17 }, { label: "专职", value: 142 },
// { label: "太空领域", value: 30.96 }, { label: "兼职", value: 125 },
// { label: "网络领域", value: 20.18 }, ];
// { label: "生物领域", value: 10.22 }, const PieColor = {
// { label: "新能源领域", value: 5.9 }, level_1: "#4198ff",
// { label: "人工智能领域", value: 12.24 }, level_2: "#6fdef7",
// ]; level_3: "#4198ff",
// const PieColor = { level_4: "#f4a746",
// level_1: "#fac858", level_5: "#9daff9",
// level_2: "#6fdef7", level_6: "#47d6ad",
// level_3: "#4198ff", };
// level_4: "#f4a746",
// level_5: "#9daff9",
// level_6: "#47d6ad",
// };
/** /**
* 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图 * 经济建设与国防密切相关的建设项目贯彻国防要求落实情况——柱状图
...@@ -116,78 +63,79 @@ export default defineComponent({ ...@@ -116,78 +63,79 @@ export default defineComponent({
mapEcharts: null, mapEcharts: null,
cirLeftCharts: null, cirLeftCharts: null,
cirRightEchart: null, cirRightEchart: null,
cardItems: [{ label: "联合科研攻关投入金额", value: "267" }], cardItems: [{ label: "人员总数", value: "267" }],
// pieList: PIE_LIST, pieList: PIE_LIST,
// pieColor: PieColor, pieColor: PieColor,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
// optionBar() { optionBar() {
// const pieData = PIE_LIST.map((item, index) => { const pieData = PIE_LIST.map((item, index) => {
// return { return {
// value: item.value, value: item.value,
// itemStyle: { itemStyle: {
// color: PieColor[`level_${index + 1}`], color: PieColor[`level_${index + 1}`],
// }, },
// tooltip: { tooltip: {
// borderColor: "none", borderColor: "none",
// className: "business-pie-tooltip", className: "business-pie-tooltip",
// formatter: `<div class="business-pie-tooltip"> formatter: `<div class="business-pie-tooltip">
// <span class='title'>${item.label}</span>： <span class='title'>${item.label}</span>：
// <br /> <br />
// <div class='pie-text'> <div class='pie-text'>
// <span>${item.value}</span>亿元 <span>${item.value}</span>人
// </div> </div>
// </div>`, </div>`,
// }, },
// }; };
// }); });
// return {
// tooltip: { return {
// trigger: "item", tooltip: {
// }, trigger: "item",
// series: [ },
// { series: [
// name: "Access From", {
// type: "pie", name: "Access From",
// radius: ["48%", "80%"], type: "pie",
// avoidLabelOverlap: false, radius: ["48%", "80%"],
// label: { avoidLabelOverlap: false,
// show: false, label: {
// position: "center", show: false,
// }, position: "center",
// emphasis: { },
// label: { emphasis: {
// show: false, label: {
// fontSize: "20", show: false,
// formatter: "营业额(万元)\n \n{c}", fontSize: "20",
// }, formatter: "营业额(万元)\n \n{c}",
// }, },
// labelLine: { },
// show: false, labelLine: {
// }, show: false,
// data: pieData, },
// }, data: pieData,
// ], },
// }; ],
// }, };
},
}, },
methods: { methods: {
initEcharts() { initEcharts() {
const dom = document.getElementById("pie"); const dom = document.getElementById("pie");
// const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
// mapEcharts.setOption(this.optionBar); mapEcharts.setOption(this.optionBar);
// this.mapEcharts = mapEcharts; this.mapEcharts = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
// if (this.mapEcharts) { if (this.mapEcharts) {
// this.mapEcharts.dispose(); this.mapEcharts.dispose();
// this.mapEcharts = null; this.mapEcharts = null;
// } }
}, },
}); });
</script> </script>
......
src/views/dataCenter/innovation/index.vue
浏览文件 @ f488a17f
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
<!-- foot --> <!-- foot -->
<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"><Platform /></div> <div class="footer-item card-item">
<Platform />
</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">
...@@ -27,11 +29,34 @@ ...@@ -27,11 +29,34 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="card-item"> <div class="card-item">
<Industrial <MapTitle text="领跑技术（产品）参军情况" />
<!-- <div class="meeting">
<div>省直部门新认定的领跑技术（产品）</div>
<div class="frequency">
{{shu}}
<span class="second">
<i class="el-icon-top"></i>
</span>
</div>
</div>-->
<div class="echarts-search">
<div class="card-items">
<div class="item">
<span>省直部门新认定的领跑技术（产品）</span>
<div class="value-des">
<span>{{shu}}</span>个
</div>
</div>
</div>
</div>
<div id="TargetBars" class="target-bar"></div>
<!-- <Industrial
echartsId="technologyInfo" echartsId="technologyInfo"
echartsTitle="领跑技术(产品)参军情况" echartsTitle="领跑技术(产品)参军情况1"
:cardItems="industryCardItems" :cardItems="industryCardItems"
/> />-->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -46,6 +71,25 @@ import Science from "./model/Science/index.vue"; ...@@ -46,6 +71,25 @@ import Science from "./model/Science/index.vue";
import Munitions from "./model/Munitions/index.vue"; import Munitions from "./model/Munitions/index.vue";
import ScientificInvestment from "./model/ScientificInvestment/index.vue"; import ScientificInvestment from "./model/ScientificInvestment/index.vue";
import Industrial from "./model/Industrial/index.vue"; 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";
const xAxisCity = [
"杭州",
"宁波",
"温州",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/** /**
* 军民协同创新 * 军民协同创新
*/ */
...@@ -57,24 +101,127 @@ export default defineComponent({ ...@@ -57,24 +101,127 @@ export default defineComponent({
Science, Science,
Munitions, Munitions,
ScientificInvestment, ScientificInvestment,
Industrial Industrial,
MapTitle,
Aim,
}, },
setup() {}, setup() {},
data() { data() {
return { return {
industryCardItems: [ countryEcharts: null,
{ label: "国家部委、军委机关批复立项项目", value: "1113",unit:"个" }, shu: "206",
{ TargetBars: null,
label: "省直部门新认定的领跑技术(产品)",
value: "19",
unit: "个"
},
],
}; };
}, },
mounted() {
this.initEcharts();
},
computed: {
optionCity() {
const seriesBar = {
type: "bar",
itemStyle: {
color: "#4198ff",
},
barWidth: 20,
data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
};
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: (params) => {
let html = ``;
html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>个
</div>
`;
return html;
},
},
legend: {},
grid: {
top: "10%",
left: "5%",
right: "2%",
bottom: "3%",
containLabel: true,
},
yAxis: {
type: "value",
name: "数量(个)",
min: 0,
max: 250,
},
xAxis: {
type: "category",
data: xAxisCity,
},
series: [seriesBar],
};
},
},
methods: {
initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("TargetBars");
const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionCity);
this.TargetBars = mapEcharts;
},
},
unmounted() {
if (this.TargetBars) {
this.TargetBars.dispose();
this.TargetBars = null;
}
},
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .meeting {
// height: 50px;
// line-height: 50px;
// border-radius: 4px;
// color: #666666;
// background: rgba(248, 249, 251, 1);
// display: flex;
// justify-content: space-between;
// padding: 0 10px 0 10px;
// box-sizing: border-box;
// margin-top: 10px;
// }
.target-bar {
flex: 1;
height: calc(100% - 100px);
box-sizing: border-box;
margin-top: 10px;
}
// .frequency {
// color: rgba(65, 152, 255, 1);
// font-weight: 500;
// }
// .second {
// color: #666666;
// font-size: 12px;
// font-weight: normal;
// }
.card-item { .card-item {
background: #fff; background: #fff;
border-radius: 5px; border-radius: 5px;
...@@ -86,6 +233,47 @@ export default defineComponent({ ...@@ -86,6 +233,47 @@ export default defineComponent({
flex: 1; flex: 1;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
.echarts-search {
padding-left: 10px;
.title {
color: #4198ff;
margin: 12px 0;
font-size: 16px;
}
.card-items {
margin: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
.item {
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
border-radius: 5px;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
&:last-of-type {
margin-right: 0;
}
.value-des {
font-size: 12px;
color: #999;
display: flex;
align-items: center;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
}
}
}
}
}
} }
.map-warpper { .map-warpper {
......
src/views/dataCenter/innovation/model/Munitions/index.vue
浏览文件 @ f488a17f
<template> <template>
<div class="enterprises-institutions"> <div class="enterprises-institutions">
<MapTitle text="“民参军”企事业单位研发投入情况" /> <MapTitle text="“民参军”企事业单位研发投入情况" />
<div class="meeting">
<div>全省“民参军”企事业单位军品科研经费支出总额</div>
<div class="frequency">
{{shu}}
<span class="second">亿元</span>
</div>
</div>
<el-row class="investment"> <el-row class="investment">
<el-col class="card-list" :span="6"> <!-- <el-col class="card-list" :span="6">
<div class="card-item" v-for="item in cards" :key="item.label"> <div class="card-item" v-for="item in cards" :key="item.label">
<p>{{ item.label }}</p> <p>{{ item.label }}</p>
<div> <div>
{{ item.value }}<span class="unit">{{ item.unit }}</span> {{ item.value }}<span class="unit">{{ item.unit }}</span>
</div> </div>
</div> </div>
</el-col> </el-col>-->
<el-col class="city-echarts">
<el-col class="city-echarts" :span="18">
<div class="title2X">“民参军”企事业单位军品科研经费分布情况</div> <div class="title2X">“民参军”企事业单位军品科研经费分布情况</div>
<div id="enterprises" class="echart-item"></div> <div id="enterprises" class="echart-item"></div>
</el-col> </el-col>
...@@ -40,7 +45,7 @@ const xAxisCity = [ ...@@ -40,7 +45,7 @@ const xAxisCity = [
"丽水", "丽水",
]; ];
const cityData = { 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], value: [404, 404, 400, 400, 400, 400, 400, 400, 400, 400, 400],
}; };
/** /**
...@@ -55,13 +60,13 @@ export default defineComponent({ ...@@ -55,13 +60,13 @@ export default defineComponent({
data() { data() {
return { return {
countryEcharts: null, countryEcharts: null,
shu: 434,
enterprises: null, enterprises: null,
cards: [ cards: [
{ {
label: "全省“民参军”企事业单位军品科研经费支出总额", label: "全省“民参军”企事业单位军品科研经费支出总额",
value: "284", value: "284",
unit: "亿元", unit: "40次",
}, },
{ {
label: "全省“民参军”企事业单位R & D", label: "全省“民参军”企事业单位R & D",
...@@ -104,7 +109,7 @@ export default defineComponent({ ...@@ -104,7 +109,7 @@ export default defineComponent({
html += `<div class="munition-echart "> html += `<div class="munition-echart ">
<span class=" title color_1">${params[0].axisValue}市</span> <span class=" title color_1">${params[0].axisValue}市</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>个
</div> </div>
`; `;
...@@ -121,9 +126,9 @@ export default defineComponent({ ...@@ -121,9 +126,9 @@ export default defineComponent({
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "金额(亿元)", name: "数量(次)",
min: 0, min: 0,
max: 50, max: 500,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -201,13 +206,34 @@ export default defineComponent({ ...@@ -201,13 +206,34 @@ export default defineComponent({
.munition-echart .color_2::before { .munition-echart .color_2::before {
background: #eca933; background: #eca933;
} }
/* 次数 */
.meeting {
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
}
.frequency {
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second {
color: #666666;
font-size: 12px;
font-weight: normal;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.enterprises-institutions { .enterprises-institutions {
height: 100%; height: 100%;
.investment { .investment {
.echart-item { .echart-item {
flex: 1; flex: 1;
...@@ -216,9 +242,9 @@ export default defineComponent({ ...@@ -216,9 +242,9 @@ export default defineComponent({
margin-top: 10px; margin-top: 10px;
} }
.card-list { .card-list {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
padding: 20px 20px 20px 0; // padding: 20px 20px 20px 0;
.card-item { .card-item {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
......
src/views/dataCenter/innovation/model/Outline/index.vue
浏览文件 @ f488a17f
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
<div class="describes"> <div class="describes">
<div class="text">各市军民协同创新指标情况</div> <div class="text">各市军民协同创新指标情况</div>
</div> </div>
<el-row>
<el-button>2019年</el-button>
<el-button>2020年</el-button>
<el-button type="primary">2021年上半年</el-button>
</el-row>
<div id="synergyInnovation" class="line"></div> <div id="synergyInnovation" class="line"></div>
</div> </div>
...@@ -128,10 +133,15 @@ export default defineComponent({ ...@@ -128,10 +133,15 @@ export default defineComponent({
height: 250px; height: 250px;
box-sizing: border-box; box-sizing: border-box;
} }
.btn {
width: 300px;
height: 153px;
border: 1px solid;
}
.describes { .describes {
margin: 0 10px 5px 0; margin: 0 10px 5px 0;
box-sizing: border-box; box-sizing: border-box;
.text { .text {
color: #4198ff; color: #4198ff;
margin: 10px 0; margin: 10px 0;
......
src/views/dataCenter/innovation/model/Platform/index.vue
浏览文件 @ f488a17f
...@@ -6,16 +6,20 @@ ...@@ -6,16 +6,20 @@
<div class="card-items"> <div class="card-items">
<div class="item"> <div class="item">
<span>协同创新平台</span> <span>协同创新平台</span>
<div class="value-des"><span>80</span>个</div> <div class="value-des">
<span>139</span>个
</div>
</div> </div>
<div class="item"> <!-- <div class="item">
<span>协同创新示范平台</span> <span>协同创新示范平台</span>
<div class="value-des"><span>66</span>个</div> <div class="value-des">
</div> <span>66</span>个
</div>
</div>-->
</div> </div>
<div class="title">协同创新平台投入研发经费</div> <!-- <div class="title">协同创新平台投入研发经费</div> -->
</div> </div>
<div id="TargetBar" class="target-bar"></div> <div id="TargetBar" class="target-bar"></div>
...@@ -25,29 +29,23 @@ ...@@ -25,29 +29,23 @@
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";
const SeriesData = { import { Aim } from "@element-plus/icons";
type: "level_1", const xAxisCity = [
rate: [ "杭州",
{ "宁波",
value: 15.63, "温州",
}, "湖州",
{ "嘉兴",
value: 7.42, "绍兴",
}, "金华",
{ "衢州",
value: 1.23, "舟山",
}, "台州",
{ "丽水",
value: 2.65,
},
],
};
const xAxisValue = [
"2018年",
"2019年",
"2020年",
"2021年",
]; ];
const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60],
};
/** /**
* 全省军民协同创新平台情况——折线图 * 全省军民协同创新平台情况——折线图
...@@ -55,105 +53,93 @@ const xAxisValue = [ ...@@ -55,105 +53,93 @@ const xAxisValue = [
export default defineComponent({ export default defineComponent({
components: { components: {
MapTitle, MapTitle,
Aim,
}, },
setup() {}, setup() {},
data() { data() {
return { return {
value: 1, countryEcharts: null,
options: [
{ label: "得分情况", value: 1 }, TargetBar: null,
{ label: "军转民收入及增长率", value: 2 },
{ label: "规模以上企业收入及增长率", value: 3 },
{ label: "国防科工产值", value: 4 },
],
mapEcharts: null,
}; };
}, },
mounted() { mounted() {
this.initEcharts(); this.initEcharts();
}, },
computed: { computed: {
optionBar() { optionCity() {
const seriesLine = { const seriesBar = {
type: "line", type: "bar",
itemStyle: { itemStyle: {
color: "#4198ff", color: "#4198ff",
}, },
emphasis: { barWidth: 20,
focus: "series",
},
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4198ff",
},
{
offset: 1,
color: "#fff",
},
]),
},
data: SeriesData.rate, data: cityData.value.map((item) => {
return {
value: item,
label: "收入规模",
};
}),
}; };
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
className: "science-echart", axisPointer: {
type: "shadow",
},
formatter: (params) => { formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`; let html = ``;
html += `<div class="science-echart "> html += `<div class="munition-echart ">
<span class=" title color_1">项目投资额</span> <span class=" title color_1">${params[0].axisValue}市</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>个
</div>`; </div>
`;
return html; return html;
}, },
}, },
legend: {}, legend: {},
grid: { grid: {
top: "5%", top: "10%",
left: "0%", left: "5%",
right: "5%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "万元", name: "数量(个)",
min: 0,
max: 250,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xAxisValue, data: xAxisCity,
}, },
series: [seriesLine], series: [seriesBar],
}; };
}, },
}, },
methods: { methods: {
initEcharts() { initEcharts() {
this.initCityEcharts();
},
initCityEcharts() {
const dom = document.getElementById("TargetBar"); const dom = document.getElementById("TargetBar");
const mapEcharts = echarts.init(dom); const mapEcharts = echarts.init(dom);
mapEcharts.setOption(this.optionBar); mapEcharts.setOption(this.optionCity);
this.mapEcharts = mapEcharts; this.TargetBar = mapEcharts;
}, },
}, },
unmounted() { unmounted() {
if (!this.mapEcharts) { if (this.TargetBar) {
return; this.TargetBar.dispose();
this.TargetBar = null;
} }
this.mapEcharts.dispose();
this.mapEcharts = null;
}, },
}); });
</script> </script>
...@@ -205,7 +191,7 @@ export default defineComponent({ ...@@ -205,7 +191,7 @@ export default defineComponent({
.target-bar { .target-bar {
flex: 1; flex: 1;
height: calc(100% - 130px); height: calc(100% - 94px);
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
} }
......
src/views/dataCenter/innovation/model/ScientificInvestment/index.vue
浏览文件 @ f488a17f
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,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>
...@@ -19,19 +19,16 @@ ...@@ -19,19 +19,16 @@
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div <div class="list-item" v-for="(item, index) in pieList" :key="item.label">
class="list-item"
v-for="(item, index) in pieList"
:key="item.label"
>
<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">{{ item.value }}%</div> <div class="pie-value">
{{ item.value }}
<span>亿元</span>
</div>
<!-- <span></span> -->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -97,20 +94,21 @@ const SeriesData = { ...@@ -97,20 +94,21 @@ const SeriesData = {
], ],
}; };
const PIE_LIST = [ const PIE_LIST = [
{ label: "海洋领域", value: 25.17 }, { label: "数字军工(网络、人工智能)", value: 25.17 },
{ label: "太空领域", value: 30.96 }, { label: "海洋", value: 20.18 },
{ label: "网络领域", value: 20.18 }, { label: "太空", value: 30.96 },
{ label: "生物领域", value: 10.22 },
{ label: "新能源领域", value: 5.9 }, { label: "生物", value: 10.22 },
{ label: "人工智能领域", value: 12.24 }, { label: "核电", value: 5.9 },
// { label: "人工智能领域", value: 12.24 },
]; ];
const PieColor = { const PieColor = {
level_1: "#fac858", level_1: "#47d6ad",
level_2: "#6fdef7", level_2: "#6fdef7",
level_3: "#4198ff", level_3: "#4198ff",
level_4: "#f4a746", level_4: "#f4a746",
level_5: "#9daff9", level_5: "#9daff9",
level_6: "#47d6ad", level_6: "#fac858",
}; };
/** /**
...@@ -128,10 +126,10 @@ export default defineComponent({ ...@@ -128,10 +126,10 @@ export default defineComponent({
cirLeftCharts: null, cirLeftCharts: null,
cirRightEchart: null, cirRightEchart: null,
cardItems: [ cardItems: [
{ label: "联合科研攻关投入金额", value: "1113.4" }, { label: "联合科研攻关投入金额", value: "38.13" },
{ {
label: "联合科研攻关投入金额增长率", label: "联合科研攻关投入金额增长率",
value: "19", value: "19%",
}, },
], ],
pieList: PIE_LIST, pieList: PIE_LIST,
...@@ -276,7 +274,7 @@ export default defineComponent({ ...@@ -276,7 +274,7 @@ export default defineComponent({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 15px 10px 0; margin: 0 15px 10px 0;
padding: 0px 15px; // padding: 0px 15px;
border-radius: 5px; border-radius: 5px;
.el-row { .el-row {
font-size: 14px; font-size: 14px;
...@@ -291,6 +289,10 @@ export default defineComponent({ ...@@ -291,6 +289,10 @@ export default defineComponent({
align-items: center; align-items: center;
color: #4198ff; color: #4198ff;
font-size: 20px; font-size: 20px;
span {
font-size: 12px;
color: rgba(153, 153, 153, 1);
}
} }
.square { .square {
width: 8px; width: 8px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论