左下角表格
This commit is contained in:
MTrunning
@@ -101,7 +101,7 @@
|
||||
|
||||
// 底部数据
|
||||
.bototm-box {
|
||||
margin-top: 1rem;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="bottomLeftChart" style="width:900px;height:400px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const echarts = require("echarts");
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.drawPie();
|
||||
},
|
||||
methods: {
|
||||
drawPie() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
let myChartPieLeft = echarts.init(
|
||||
document.getElementById("bottomLeftChart")
|
||||
);
|
||||
// ----------------------------------------------------------------
|
||||
let category = [
|
||||
"市区",
|
||||
"万州",
|
||||
"江北",
|
||||
"南岸",
|
||||
"北碚",
|
||||
"綦南",
|
||||
"长寿",
|
||||
"永川",
|
||||
"璧山",
|
||||
"江津",
|
||||
"城口",
|
||||
"大足",
|
||||
"垫江",
|
||||
"丰都",
|
||||
"奉节",
|
||||
"合川",
|
||||
"江津区",
|
||||
"开州",
|
||||
"南川",
|
||||
"彭水",
|
||||
"黔江",
|
||||
"石柱",
|
||||
"铜梁",
|
||||
"潼南",
|
||||
"巫山",
|
||||
"巫溪",
|
||||
"武隆",
|
||||
"秀山",
|
||||
"酉阳",
|
||||
"云阳",
|
||||
"忠县",
|
||||
"川东",
|
||||
"检修"
|
||||
];
|
||||
let lineData = [
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
56061,
|
||||
62677,
|
||||
59521,
|
||||
67560,
|
||||
18092,
|
||||
20728,
|
||||
24045,
|
||||
28348,
|
||||
32808,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
36097,
|
||||
39867,
|
||||
44715,
|
||||
48444,
|
||||
50415,
|
||||
50061,
|
||||
32677,
|
||||
49521,
|
||||
32808
|
||||
];
|
||||
let barData = [
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
33300,
|
||||
4600,
|
||||
5000,
|
||||
5500,
|
||||
6500,
|
||||
7500,
|
||||
8500,
|
||||
9900,
|
||||
22500,
|
||||
14000,
|
||||
21500,
|
||||
8500,
|
||||
9900,
|
||||
12500,
|
||||
14000,
|
||||
21500,
|
||||
23200,
|
||||
24450,
|
||||
25250,
|
||||
7500
|
||||
];
|
||||
let rateData = [];
|
||||
for (let i = 0; i < 33; i++) {
|
||||
let rate = barData[i] / lineData[i];
|
||||
rateData[i] = rate.toFixed(2);
|
||||
}
|
||||
|
||||
let option = {
|
||||
title: {
|
||||
text: "增量设备贯通情况-单位",
|
||||
x: "center",
|
||||
y: 0,
|
||||
textStyle: {
|
||||
color: "#B4B4B4",
|
||||
fontSize: 16,
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: "#7B7DDC"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["已贯通", "计划贯通", "贯通率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "7%"
|
||||
},
|
||||
grid: {
|
||||
x: "12%",
|
||||
width: "82%",
|
||||
y: "12%"
|
||||
},
|
||||
xAxis: {
|
||||
data: category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
},
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "贯通率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F02FC2"
|
||||
}
|
||||
},
|
||||
data: rateData
|
||||
},
|
||||
|
||||
{
|
||||
name: "已贯通",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#956FD4" },
|
||||
{ offset: 1, color: "#3EACE5" }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData
|
||||
},
|
||||
|
||||
{
|
||||
name: "计划贯通",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(156,107,211,0.5)" },
|
||||
{ offset: 0.2, color: "rgba(156,107,211,0.3)" },
|
||||
{ offset: 1, color: "rgba(156,107,211,0)" }
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
|
||||
data: lineData
|
||||
}
|
||||
]
|
||||
};
|
||||
myChartPieLeft.setOption(option);
|
||||
// -----------------------------------------------------------------
|
||||
// 响应式变化
|
||||
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div id="bottomLeft">
|
||||
<div class>
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-bar"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">构建统计图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<bottomLeftChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
bottomLeftChart
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#bottomLeft {
|
||||
padding: 1rem;
|
||||
height: 410px;
|
||||
min-width: 300px;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 385px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 1rem;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+13
-3
@@ -83,8 +83,10 @@
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
<div class="bototm-box">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<dv-border-box-1>
|
||||
<bottomLeft />
|
||||
</dv-border-box-1>
|
||||
<div>2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,13 +100,21 @@ import centreLeft2 from "./centreLeft2";
|
||||
import centreRight1 from "./centreRight1";
|
||||
import centreRight2 from "./centreRight2";
|
||||
import center from "./center";
|
||||
import bottomLeft from "./bottomLeft";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
components: { centreLeft1, centreLeft2, centreRight1, centreRight2, center },
|
||||
components: {
|
||||
centreLeft1,
|
||||
centreLeft2,
|
||||
centreRight1,
|
||||
centreRight2,
|
||||
center,
|
||||
bottomLeft
|
||||
},
|
||||
mounted() {
|
||||
this.cancelLoading();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user