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