Skip to content

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

fix(产业融合): 优化样式0.0.1

上级 90d1c4d9
隐藏空白字符变更
内嵌 并排
正在显示 包含 85 行增加 和 70 行删除
src/views/evaluatIndicator/index/index.vue
浏览文件 @ fa8f73d0
......@@ -89,8 +89,8 @@ export default defineComponent({
box-sizing: border-box;
flex: 1;
.map-left {
min-width: 586px;
max-width: 586px;
min-width: 600px;
max-width: 600px;
box-sizing: border-box;
margin-right: 16px;
.rank-list {
......@@ -118,8 +118,8 @@ export default defineComponent({
}
}
.map-right {
min-width: 580px;
width: 580px;
min-width: 560px;
width: 560px;
box-sizing: border-box;
.incom-graphic {
......
src/views/evaluatIndicator/index/model/Income/index.vue
浏览文件 @ fa8f73d0
......@@ -26,7 +26,7 @@ const seriesData = [
name: "民口单位军品收入",
type: "level_2",
echartType: "bar",
barValue: [1232, 1264, 2661, 15616],
barValue: [1232, 1264, 2661, 1616],
growthRate: [50, 60, 70, 80, 80, 60, 85],
},
];
......
src/views/evaluatIndicator/index/model/InvestmentProgress/index.vue
浏览文件 @ fa8f73d0
<template>
<MapTitle text="各市项目投资和建设进度情况" />
<MapTitle text='各市"千百十"项目投资金额及进度情况' />
<div id="InvestmentProgress" class="investment-progress"></div>
</template>
<script lang="ts">
......@@ -9,19 +9,8 @@
import { defineComponent } from "vue";
import MapTitle from "@/components/mapTitle/index.vue";
import * as echarts from "echarts";
enum Bar_Enum {
level_1 = "#fac858",
level_2 = "#1ba6eb",
}
const seriesData = [
{
name: "国防要求建设项目",
type: "level_1",
echartType: "bar",
growthRate: [80, 85, 95, 65, 85, 70, 85, 70, 80, 90, 40],
barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1180, 1292, 1000, 1205],
},
{
name: "省军民融合重大示范项目",
type: "level_2",
......@@ -65,15 +54,13 @@ export default defineComponent({
name: item.name,
type: "bar",
itemStyle: {
color: Bar_Enum[item.type],
color: "#4198FF",
},
barWidth: 12,
data: item.barValue.map((barItem, barIndex) => {
return {
value: barItem,
class: `color_${index + 1}`,
rate: item.growthRate[barIndex],
label: "投资金额",
};
}),
};
......@@ -81,18 +68,20 @@ export default defineComponent({
const seriesLineList = seriesData.map((item) => {
return {
tooltip: {
show: false,
},
type: "line",
itemStyle: {
color: Bar_Enum[item.type],
color: "#75ce95",
},
yAxisIndex: 1,
emphasis: {
focus: "series",
lineStyle: {
type: "dashed",
},
data: item.growthRate,
yAxisIndex: 1,
data: item.growthRate.map((value) => {
return {
value,
label: "项目进度",
};
}),
};
});
......@@ -104,18 +93,18 @@ export default defineComponent({
},
className: "tooltip-progress",
formatter: (params) => {
let html = `<span class="name">${params[0].axisValue}</span>`;
params.forEach((item) => {
const { data = {} } = item;
let html = `<span class="name">${params[0].axisValue}市</span>`;
html += `<div class="tooltip-progress">
<span class="title">${item.seriesName}</span>
<div class="row-item">
<div>金额 <p><span class="${data.class}">${data.value}</span>亿元</p></div>
<div>完成率 <p><span class="${data.class}">${data.rate}%</span></p></div>
</div>
html += `<div class="tooltip-progress ">
<span class=" title color_1">${params[0].data.label}</span>
<br />
<span class="text text-color_1">${params[0].data.value}</span>亿元
</div>
<div class="tooltip-progress">
<span class=" title color_2">${params[1].data.label}</span>
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`;
});
return html;
},
......@@ -126,8 +115,8 @@ export default defineComponent({
bottom: "3%",
containLabel: true,
},
legend: {
right: "2%"
legend: {
right: "2%",
},
yAxis: [
{
......@@ -145,7 +134,7 @@ export default defineComponent({
type: "category",
data: xAxisValue,
},
series: [...seriesLineList, ...seriesBarList],
series: [...seriesBarList, ...seriesLineList],
};
},
},
......@@ -167,6 +156,19 @@ export default defineComponent({
});
</script>
<style>
.tooltip-progress:first-of-type {
margin-bottom: 5px;
}
.tooltip-progress .name {
margin-bottom: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
}
.tooltip-progress {
width: 100px;
}
.tooltip-progress .name {
margin-bottom: 15px;
font-size: 14px;
......@@ -174,35 +176,42 @@ export default defineComponent({
font-weight: bold;
}
.tooltip-progress .title {
padding-left: 10px;
font-weight: 600;
font-size: 12px;
color: #666;
position: relative;
}
.tooltip-progress .row-item {
padding: 0 15px 10px 15px;
display: flex;
align-items: center;
font-size: 12px;
color: #999;
justify-content: space-between;
.tooltip-progress .title::before {
position: absolute;
top: 5px;
left: 0;
content: " ";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
}
.tooltip-progress .row-item div {
margin-right: 15px;
.tooltip-progress .text {
padding-left: 20px;
margin-bottom: 20px;
font-size: 20px;
}
.tooltip-progress .row-item p {
font-size: 12px;
color: #999;
.tooltip-progress .text:last-of-type {
margin: 0;
}
.tooltip-progress .text-color_1 {
color: #4198ff;
}
.tooltip-progress .row-item p span {
font-size: 18px;
margin-right: 5px;
.tooltip-progress .text-color_2 {
color: #75ce95;
}
.tooltip-progress .color_1 {
color: #fac858;
.tooltip-progress .color_1::before {
background: #4198ff;
}
.tooltip-progress .color_2 {
color: #4198ff;
.tooltip-progress .color_2::before {
background: #75ce95;
}
</style>
<style lang="scss" scoped>
......
src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue
浏览文件 @ fa8f73d0
......@@ -95,10 +95,8 @@ export default defineComponent({
},
className: "income-echart",
formatter: (params) => {
console.log("----",params)
let html = `<span class="name">${params[0].axisValue}</span>`;
html += `<div class="income-echart ">
<span class="${params[0].class} title color_1">${params[0].data.label}</span>
<br />
......@@ -109,7 +107,6 @@ export default defineComponent({
<br />
<span class="text text-color_2">${params[1].data.value}%</span>
</div>`
return html;
},
......@@ -161,7 +158,7 @@ export default defineComponent({
<style>
.income-echart {
width: 180px;
width: 110px;
}
.income-echart .name {
......
src/views/evaluatIndicator/industrial/model/IncomExtendLine/index.vue
浏览文件 @ fa8f73d0
......@@ -90,7 +90,7 @@ export default defineComponent({
label: {
show: true,
position: "top",
formatter: "{c}万元",
},
areaStyle: {
opacity: 0.8,
......@@ -113,9 +113,8 @@ export default defineComponent({
return {
tooltip: {
trigger: "axis",
textStyle: {
color: "#4198ff",
},
className: "extend-tooltip",
formatter: "<span class='title'>{b0}年</span>: <br /> <span class='bar-text'>{c0}</span> 亿元",
},
legend: {},
grid: {
......@@ -154,6 +153,16 @@ export default defineComponent({
},
});
</script>
<style>
.extend-tooltip .title {
color: #333;
font-weight: bold;
}
.extend-tooltip .bar-text {
padding-left: 10px;
color: #4198ff;
}
</style>
<style lang="scss" scoped>
.incom-echarts-line {
flex: 1;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论