布局划分
<template>
<div>
<header>
<h1>赣州房价分析平台</h1>
</header>
<!-- 大容器 -->
<section class="container">
<!-- 左容器 -->
<section class="itemLeft">
<TopTenPage>
<ItemOne/>
</TopTenPage>
<LunboPage>
<ItemTwo/>
</LunboPage>
</section>
<!-- 中容器 -->
<section class="itemCenter">
<TimePage/>
<MapPage/>
</section>
<!-- 右容器 -->
<section class="itemRight">
<ItemPage>
<ItemThree/>
</ItemPage>
<ItemPage>
<ItemFour/>
</ItemPage>
</section>
</section>
</div>
</template>
<script>
import ItemPage from "@/components/itemPage.vue"
import LunboPage from "@/components/lunboPage.vue"
import TopTenPage from "@/components/topTenPage.vue"
import TimePage from "@/components/timePage.vue"
import MapPage from "@/components/mapPage.vue"
import ItemOne from "@/components/itemOne.vue"
import ItemTwo from "@/components/ItemTwo.vue"
import ItemThree from "@/components/ItemThree.vue"
import ItemFour from "@/components/ItemFour.vue"
export default {
name: 'homePage',
data() {
return {
};
},
components:{
ItemPage,
LunboPage,
TopTenPage,
TimePage,
MapPage,
ItemOne,
ItemTwo,
ItemThree,
ItemFour
},
computed:{
},
methods: {
},
};
</script>
<style lang="less" scoped>
header{
height: 1rem;
width: 100%;
background: url("~@/assets/headerbg.png");
h1{
font-size: .625rem;
color: #fff;
text-align: center;
line-height: 1rem;
}
}
.container{
min-width: 1200px;
max-width: 2048px;
margin: 0 auto;
padding: .125rem .125rem 0;
display: flex;
.itemLeft,.itemRight{
flex: 3.5;
}
.itemCenter{
flex: 4;
height: 10.5rpx;
border: 1px solid rgb(65, 152, 207);
padding: 0.125rem;
margin: .25rem;
}
}
</style>
插槽组件
<template>
<div class="item">
<!-- 设置插槽 -->
<slot></slot>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
};
},
computed:{
},
methods: {
},
};
</script>
<style lang="less" scoped>
.item{
height: 5.125rem;
border: 1px solid #009dff;
margin: .25rem;
}
</style>
排序横向柱状图
<template>
<div>
<!-- <dv-border-box-8 style="height:100% width:100%">dv-border-box-8</dv-border-box-8> -->
<h2>赣州各区县房屋均价Top10(元/㎡)</h2>
<div class="chart" id="topten">
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
components: {},
computed: {},
methods: {
myEcharts() {
var myChart = this.$echarts.init(document.getElementById("topten"));
var option;
let ydata = ["崇义", "龙南", "瑞金", "赣县", "南康", "信丰", "上犹","章贡","定南","全南"];
let xdata = [11522, 13, 14, 15, 16, 17, 18,5304,7569,9947];
option = {
tooltip: {
trigger: "axis"
},
grid: {
left: "70",
right: "20",
bottom: "20",
top: "20",
containLabel: false
},
xAxis: {
type: "value",
show: false,
max: 'dataMax'
},
yAxis: {
type: "category",
data: ydata,
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 55,
width: 60,
align: "left",
overflow: "truncate",
formatter: function(value, index) {
let ind = index + 1;
if (ind + 9 == ydata.length) {
return "{one|" + (index + 1) + "} {a|" + value + "}";
} else if (ind + 8 == ydata.length) {
return "{two|" + (index + 1) + "} {b|" + value + "}";
} else if (ind + 7 == ydata.length) {
return (
"{three|" + (index + 1) + "} {c|" + value + "}"
);
}
if (ydata.length - index <8) {
return (
"{five|" +" "+ (index + 1) + "} {d|" + value + "}"
);
}
return "{four|"+" " + (index + 1) + "} {d|" + value + "}";
},
rich: {
a: {
color: "#59c9f9"
},
b: {
color: "#59c9f9"
},
c: {
color: "#59c9f9"
},
d: {
color: "#59c9f9"
},
one: {
backgroundColor: "#E86452",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11
},
two: {
backgroundColor: "#FF9845",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11
},
three: {
backgroundColor: "#F6BD16",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11
},
four: {
backgroundColor: "#009dff",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11
},
five: {
backgroundColor: "#009dff",
color: "white",
width: 16,
height: 16,
padding: [1, 0, 0, 1],
borderRadius: 10,
fontSize: 13
}
}
}
},
series: [
{
type: "bar",
showBackground: true,
realtimeSort:true,
label: {
show: true,
position: "center",
color: "#fff",
fontSize:18
},
barWidth: 25,
itemStyle: {
color: "#5B8FF9"
},
data: xdata
}
]
};
myChart.setOption(option);
}
},
mounted() {
this.myEcharts();
}
};
</script>
<style lang='less' scoped>
h2 {
height: 0.5rem;
color: #fff;
line-height: 0.5rem;
font-size: 0.4rem;
text-align: center;
}
.chart {
height: 6.5rem;
}
</style>
折线图
<template>
<div class="chart" id="zhexian">
<!-- <h2>hhhhh</h2> -->
</div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
components: {},
computed: {},
mounted() {
this.myEcharts();
},
methods: {
myEcharts() {
var chartDom = document.getElementById("zhexian");
var myChart = this.$echarts.init(chartDom);
var option;
option = {
title: {
text: "房价走势图",
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["2022/2", "2022/3", "2022/4", "2022/5", "2022/6"]
},
yAxis: {
type: "value"
},
series: [
{
name: "赣州",
type: "line",
stack: "Total",
data: [9358, 9421, 9394, 9348, 9610]
},
{
name: "章贡",
type: "line",
stack: "Total",
data: [10273, 10160, 9744, 9774, 10144]
},
{
name: "南康",
type: "line",
stack: "Total",
data: [6986,7185,7206,7090,7116]
},
{
name: "赣县",
type: "line",
stack: "Total",
data: [8046,8006,8046,8144,8056]
},
{
name: "瑞金",
type: "line",
stack: "Total",
data: [7390,7180,7264,7349,7455]
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style lang='less' scoped>
.chart {
width: 6.5rem;
height: 5rem;
}
</style>
轮播表格
<template>
<div class="box">
<dv-scroll-board :config="config" style="width:100%;height:100%" />
</div>
</template>
<script>
export default {
name: '',
data() {
return {
"config":{
"header": ['小区名称', '房屋单价(元/㎡)', '地址'],
"headerBGC" :"rgb(65, 152, 207)",
"data": [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
],
"index": true,
"columnWidth": [50],
"align": ['center']
}
}
},
components:{
},
computed:{
},
methods: {
},
};
</script>
<style lang='less' scoped>
.box{
width: 100%;
height: 100%;
}
</style>