feat: 首页代码完成 封装echart组件

This commit is contained in:
ycy 2024-04-09 16:40:21 +08:00
parent 72beb9cff4
commit abac43466f
7 changed files with 536 additions and 3 deletions

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -1,7 +1,41 @@
<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>
<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>