✨ feat: 首页代码完成 封装echart组件
This commit is contained in:
ycy
parent
72beb9cff4
commit
abac43466f
83
src/components/echarts/bar.vue
Normal file
83
src/components/echarts/bar.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%">
|
||||||
|
<div ref="barChartRef" :style="{ width: width, height: height }"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
|
||||||
|
// 定义图表容器引用
|
||||||
|
const barChartRef = ref(null);
|
||||||
|
|
||||||
|
const { categories, seriesData, title, legendList } = defineProps({
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
seriesData: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
legendList: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 配置图表数据和选项
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: "center",
|
||||||
|
top: "10",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: legendList, // 根据实际需求替换为对应系列名称
|
||||||
|
bottom: "10",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: categories,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
series: seriesData,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||||||
|
onMounted(() => {
|
||||||
|
const barChartContainer = barChartRef.value;
|
||||||
|
if (barChartContainer) {
|
||||||
|
const myChart = echarts.init(barChartContainer);
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 添加窗口resize事件监听，自动调整图表大小
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
114
src/components/echarts/line.vue
Normal file
114
src/components/echarts/line.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%">
|
||||||
|
<div ref="lineChartRef" :style="{ width: width, height: height }">
|
||||||
|
111111
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
|
||||||
|
// 定义图表容器引用
|
||||||
|
const lineChartRef = ref(null);
|
||||||
|
|
||||||
|
const { categories, seriesData, titleP, legendList } = defineProps({
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
seriesData: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
titleP: {
|
||||||
|
type: String,
|
||||||
|
default: "示例折线图",
|
||||||
|
},
|
||||||
|
legendList: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 配置图表数据和选项
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: titleP,
|
||||||
|
left: "center",
|
||||||
|
top: "2",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: legendList,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "3%",
|
||||||
|
bottom: "9%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: categories,
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: seriesData.map((serie, index) => ({
|
||||||
|
...serie,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${
|
||||||
|
Math.random() * 255
|
||||||
|
}, 0.8)`,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||||||
|
onMounted(() => {
|
||||||
|
const lineChartContainer = lineChartRef.value;
|
||||||
|
if (lineChartContainer) {
|
||||||
|
const myChart = echarts.init(lineChartContainer);
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 添加窗口resize事件监听，自动调整图表大小
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
81
src/components/echarts/pie.vue
Normal file
81
src/components/echarts/pie.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div ref="pieChartRef" :style="{ width: width, height: height }"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
|
||||||
|
// 定义图表容器引用
|
||||||
|
const pieChartRef = ref(null);
|
||||||
|
|
||||||
|
const { titleP, dataP } = defineProps({
|
||||||
|
dataP: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
titleP: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 配置图表数据和选项
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: titleP,
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: "vertical",
|
||||||
|
left: "0",
|
||||||
|
top: "50",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "访问来源",
|
||||||
|
type: "pie",
|
||||||
|
radius: "50%",
|
||||||
|
left: "50",
|
||||||
|
data: dataP,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||||||
|
onMounted(() => {
|
||||||
|
const pieChartContainer = pieChartRef.value;
|
||||||
|
if (pieChartContainer) {
|
||||||
|
const myChart = echarts.init(pieChartContainer);
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 添加窗口resize事件监听，自动调整图表大小
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
91
src/pages/home/components/homeCenter.vue
Normal file
91
src/pages/home/components/homeCenter.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
<template>
|
||||||
|
<div class="centerC">
|
||||||
|
<div class="center-pie">
|
||||||
|
<pie :titleP="title" :dataP="data" :height="'15rem'" :width="'40rem'" />
|
||||||
|
</div>
|
||||||
|
<div class="center-bar">
|
||||||
|
<bar
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:title="titlebar"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'100%'"
|
||||||
|
:width="'52rem'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import pie from "@/components/echarts/pie.vue";
|
||||||
|
import bar from "@/components/echarts/bar.vue";
|
||||||
|
|
||||||
|
const title = ref("一天的开心程度");
|
||||||
|
const titlebar = ref("销售额");
|
||||||
|
const data = ref([
|
||||||
|
{ value: 50, name: "上午" },
|
||||||
|
{ value: 50, name: "下午" },
|
||||||
|
{ value: 100, name: "晚上" },
|
||||||
|
{ value: 200, name: "睡觉" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const categories = ref([
|
||||||
|
"一月",
|
||||||
|
"二月",
|
||||||
|
"三月",
|
||||||
|
"四月",
|
||||||
|
"五月",
|
||||||
|
"六月",
|
||||||
|
"七月",
|
||||||
|
"八月",
|
||||||
|
"九月",
|
||||||
|
"十月",
|
||||||
|
"十一月",
|
||||||
|
"十二月",
|
||||||
|
]);
|
||||||
|
const legendList = ["类别A", "类别B", "类别C"];
|
||||||
|
const seriesData = ref([
|
||||||
|
{
|
||||||
|
name: "类别A",
|
||||||
|
type: "bar",
|
||||||
|
data: [
|
||||||
|
1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "类别B",
|
||||||
|
type: "bar",
|
||||||
|
data: [200, 400, 1000, 500, 700, 800, 1000, 1100, 1150, 1200, 1300, 1400],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "类别C",
|
||||||
|
type: "bar",
|
||||||
|
data: [
|
||||||
|
800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.centerC {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.center-pie {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center-bar {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
40
src/pages/home/components/homeFooter.vue
Normal file
40
src/pages/home/components/homeFooter.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="linebox">
|
||||||
|
<line-chart
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'100%'"
|
||||||
|
:width="'100rem'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import lineChart from "@/components/echarts/line.vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const title = ref("折线图");
|
||||||
|
const categories = ref(["Jan", "Feb", "Mar", "Apr", "May", "Jun"]);
|
||||||
|
const legendList = ref(["series1", "series2"]);
|
||||||
|
const seriesData = ref([
|
||||||
|
{
|
||||||
|
name: "series1",
|
||||||
|
data: [10, 20, 15, 20, 25, 30],
|
||||||
|
type: "line",
|
||||||
|
}, // 第一个系列的数据
|
||||||
|
{
|
||||||
|
name: "series2",
|
||||||
|
data: [15, 22, 18, 28, 25, 32],
|
||||||
|
type: "line",
|
||||||
|
}, // 第二个系列的数据
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.linebox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
90
src/pages/home/components/homeHeader.vue
Normal file
90
src/pages/home/components/homeHeader.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<template>
|
||||||
|
<div class="headerC">
|
||||||
|
<div class="header_box" v-for="(item, index) in homeTitle" :key="index">
|
||||||
|
<div class="header_box">
|
||||||
|
<div class="header_icon">
|
||||||
|
<t-icon :name="item.icon" class="icon" />
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="num">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
const homeTitle = ref([
|
||||||
|
{
|
||||||
|
title: "今日发票数",
|
||||||
|
num: "23张",
|
||||||
|
icon: "face-retouching",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今日学生投诉数",
|
||||||
|
num: "555555",
|
||||||
|
icon: "crooked-smile",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今日教的学费",
|
||||||
|
num: "0",
|
||||||
|
icon: "despise",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今日赔偿费",
|
||||||
|
num: "5000,0000,0000",
|
||||||
|
icon: "flip-smiling-face",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今日彩票中奖数",
|
||||||
|
num: "0",
|
||||||
|
icon: "cat",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.headerC {
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.header_box {
|
||||||
|
height: 100%;
|
||||||
|
width: 20rem;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.header_icon {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
color: #366ef4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
color: #85d3ff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,41 @@
|
||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div class="back-color">
|
||||||
|
<t-layout style="height: 100%; background-color: #f5f7fb">
|
||||||
|
<t-header class="header">
|
||||||
|
<home-header />
|
||||||
|
</t-header>
|
||||||
|
<t-content class="content">
|
||||||
|
<home-center />
|
||||||
|
</t-content>
|
||||||
|
<t-content class="footer">
|
||||||
|
<home-footer />
|
||||||
|
</t-content>
|
||||||
|
</t-layout>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
import homeHeader from "./components/homeHeader.vue";
|
||||||
|
import homeCenter from "./components/homeCenter.vue";
|
||||||
|
import homeFooter from "./components/homeFooter.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
.header {
|
||||||
|
height: 15%;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
height: 15%;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
height: 15%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user