提交 0482053e authored 作者: Your Name's avatar Your Name

fix(五大建设体系): 图表优化

上级 240078dd
...@@ -106,7 +106,7 @@ export default defineComponent({ ...@@ -106,7 +106,7 @@ export default defineComponent({
activeIndex: 0, activeIndex: 0,
secondIndex: 0, secondIndex: 0,
curRouteHistoy: [], curRouteHistoy: [],
years: [2019, 2020, "2021上半"], years: ["2020年第四季度", "2021年第二季度", "2021上半年"],
curYearIndex: 2, curYearIndex: 2,
}; };
}, },
...@@ -294,7 +294,7 @@ export default defineComponent({ ...@@ -294,7 +294,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
font-size: 12px; font-size: 14px;
height: inherit; height: inherit;
color: #949494; color: #949494;
justify-content: center; justify-content: center;
......
...@@ -30,15 +30,19 @@ ...@@ -30,15 +30,19 @@
<el-col :span="12"> <el-col :span="12">
<div class="card-item"> <div class="card-item">
<MapTitle text="工作运行与政策制度体系" /> <MapTitle text="工作运行与政策制度体系" />
<div class="card-item-xbox" v-for="(citys,idx) in city" :key="idx"> <div class="card-item-xbox" v-for="(citys, idx) in city" :key="idx">
<div class="xbox-tit">{{citys.tit}}</div> <div class="xbox-tit">{{ citys.tit }}</div>
<div class="xbox-content user_line"> <div class="xbox-content user_line">
<div class="Progress"> <div class="Progress">
<p>{{citys.municipal}}</p> <p>{{ citys.municipal }}</p>
<el-progress type="circle" :percentage="citys.municipalnum" :width="iswidth"></el-progress> <el-progress
type="circle"
:percentage="citys.municipalnum"
:width="iswidth"
></el-progress>
</div> </div>
<div class="Progress"> <div class="Progress">
<p>{{citys.county}}</p> <p>{{ citys.county }}</p>
<el-progress <el-progress
type="circle" type="circle"
:percentage="citys.countynum" :percentage="citys.countynum"
...@@ -48,20 +52,6 @@ ...@@ -48,20 +52,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="Coverage">
<div class="Coverage_left user_line" >
<div class="Coverage_text">{{ citys.tit }}</div>
<div class="Progress">
<el-progress type="circle" :percentage="citys.num" :width="iswidth"></el-progress>
</div>
</div>
</div>-->
<!-- <Industrial
echartsId="technologyInfo"
echartsTitle="工作运行与政策制度体系"
:cardItems="industryCardItems"
/>-->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -154,7 +144,7 @@ export default defineComponent({ ...@@ -154,7 +144,7 @@ export default defineComponent({
} }
} }
.xbox-content { .xbox-content {
width: 546px; // width: 546px;
height: 150px; height: 150px;
// padding: 0px 60px; // padding: 0px 60px;
box-sizing: border-box; box-sizing: border-box;
......
...@@ -220,6 +220,7 @@ export default defineComponent({ ...@@ -220,6 +220,7 @@ export default defineComponent({
margin-top: 10px; margin-top: 10px;
} }
.frequency { .frequency {
font-size: 20px;
color: rgba(65, 152, 255, 1); color: rgba(65, 152, 255, 1);
font-weight: 500; font-weight: 500;
} }
......
<template> <template>
<div class="synergy-innovation-platform"> <div class="synergy-innovation-platform">
<MapTitle text="融办主任(市县领导兼)主持召开主任会议情况" /> <MapTitle text="融办主任主持召开主任会议情况" />
<div class="echarts-search"> <div class="echarts-search">
<div class="card-items"> <div class="card-items">
<div class="item"> <div class="item">
<span>今年以来融办主任(市县领导兼)主持召开主任会议次数</span> <span>今年以来融办主任主持召开主任会议次数</span>
<div class="value-des"> <div class="value-des">
<span>112</span> <span>112</span>
</div> </div>
......
...@@ -7,24 +7,14 @@ ...@@ -7,24 +7,14 @@
<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 ? "人" : "%" }} --> >
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="pie" class="target-bar"></div> <div id="pie" class="target-bar"></div>
<!-- <el-col :span="11">
<div class="list-item" v-for="(item, index) in pieList" :key="item.label">
<el-row align="middle">
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
{{ item.label }}
</el-row>
<div class="pie-value">{{ item.value }}%</div>
</div>
</el-col>-->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -76,19 +66,62 @@ export default defineComponent({ ...@@ -76,19 +66,62 @@ export default defineComponent({
const pieData = PIE_LIST.map((item, index) => { const pieData = PIE_LIST.map((item, index) => {
return { return {
value: item.value, value: item.value,
name: item.label,
itemStyle: { itemStyle: {
color: PieColor[`level_${index + 1}`], color: PieColor[`level_${index + 1}`],
}, },
tooltip: { label: {
borderColor: "none", show: true,
className: "business-pie-tooltip", position: "outside",
formatter: `<div class="business-pie-tooltip"> formatter: (params) => {
<span class='title'>${item.label}</span>: const { data } = params;
<br /> return (
<div class='pie-text'> "{percent|" + params.value +
<span>${item.value}</span>人 "}人\n{cir" +
</div> params.dataIndex +
</div>`, "|●}\n{name|" +
params.name +
"}"
);
},
align: "center",
padding: [0, -100, 0, -100],
rich: {
name: {
color: "rgba(36, 36, 36, 1)",
fontSize: 13,
align: "center",
},
percent: {
fontFamily: "DIN",
fontWeight: 500,
fontSize: 22,
color: "#1D91F5",
align: "center",
},
small: {
fontSize: 12,
color: "#999"
},
cir0: {
fontSize: 15,
opacity: 1,
color: PieColor[`level_${index + 1}`],
padding: [-5, 92, 0, 92],
},
cir1: {
fontSize: 15,
opacity: 1,
color: PieColor[`level_${index + 1}`],
padding: [-5, 92, 0, 92],
},
},
},
labelLine: {
length: 27,
length2: 50,
show: true,
color: '#00ffff'
}, },
}; };
}); });
...@@ -96,27 +129,17 @@ export default defineComponent({ ...@@ -96,27 +129,17 @@ export default defineComponent({
return { return {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
show: false,
}, },
series: [ series: [
{ {
name: "Access From", name: "Access From",
type: "pie", type: "pie",
radius: ["48%", "80%"], radius: ["48%", "80%"],
avoidLabelOverlap: false,
label: { // data: pieData,
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
fontSize: "20",
formatter: "营业额(万元)\n \n{c}",
},
},
labelLine: {
show: false,
},
data: pieData, data: pieData,
}, },
], ],
......
...@@ -65,7 +65,7 @@ export default defineComponent({ ...@@ -65,7 +65,7 @@ export default defineComponent({
}, },
legend: {}, legend: {},
grid: { grid: {
left: "-5%", left: "-2%",
right: "5%", right: "5%",
bottom: "5%", bottom: "5%",
containLabel: true, containLabel: true,
...@@ -136,7 +136,7 @@ export default defineComponent({ ...@@ -136,7 +136,7 @@ export default defineComponent({
.target-bar { .target-bar {
flex: 1; flex: 1;
height: calc(100% - 120px); height: calc(100% - 40px);
min-height: 260px; min-height: 260px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 10px;
......
...@@ -119,7 +119,7 @@ export default defineComponent({ ...@@ -119,7 +119,7 @@ export default defineComponent({
legend: {}, legend: {},
grid: { grid: {
top: "10%", top: "10%",
left: "5%", left: "1%",
right: "2%", right: "2%",
bottom: "3%", bottom: "3%",
containLabel: true, containLabel: true,
......
...@@ -130,7 +130,7 @@ export default defineComponent({ ...@@ -130,7 +130,7 @@ export default defineComponent({
.synergy-innovation { .synergy-innovation {
.line { .line {
flex: 1; flex: 1;
height: 250px; height: 375px;
box-sizing: border-box; box-sizing: border-box;
} }
.btn { .btn {
......
...@@ -31,20 +31,12 @@ import MapTitle from "@/components/mapTitle/index.vue"; ...@@ -31,20 +31,12 @@ import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Aim } from "@element-plus/icons"; import { Aim } from "@element-plus/icons";
const xAxisCity = [ const xAxisCity = [
"杭州", "2018年",
"宁波", "2019年",
"温州", "2020年",
"湖州",
"嘉兴",
"绍兴",
"金华",
"衢州",
"舟山",
"台州",
"丽水",
]; ];
const cityData = { const cityData = {
value: [225, 160, 170, 140, 145, 75, 125, 100, 70, 40, 60], value: [225, 160, 170, ],
}; };
/** /**
...@@ -93,7 +85,7 @@ export default defineComponent({ ...@@ -93,7 +85,7 @@ export default defineComponent({
let html = ``; let html = ``;
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>
......
...@@ -14,21 +14,20 @@ ...@@ -14,21 +14,20 @@
</div> </div>
<el-row :gutter="10" type="flex"> <el-row :gutter="10" type="flex">
<el-col :span="13"> <el-col :span="11">
<div id="pie" class="economic-construct"></div> <div id="pie" class="economic-construct"></div>
</el-col> </el-col>
<el-col :span="11"> <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 pieList" :key="item.label">
<el-row align="middle"> <el-row align="middle">
<div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div> <div class="square" :style="{ background: pieColor[`level_${index + 1}`] }"></div>
{{ item.label }} <span> {{ item.label }}</span>
</el-row> </el-row>
<div class="pie-value"> <div class="pie-value">
{{ item.value }} {{ item.value }}
<span>亿元</span> <span>亿元</span>
</div> </div>
<!-- <span></span> -->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
......
export default {
"1": {
},
"2": {
},
"3": {
}
}
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论