文章目录
使用前提:
提前配置好ElementPlus和echarts的环境
系统访问量小组件
描述:
- 页面布局:
- 顶部标题显示为“用户访问量统计”。
- 一个
charBox
容器,其中使用echarts
实现折线图展示,并附带包含一个访问量单元的简要说明(“访问量(个)”)。 - 图表初始化:
- 使用
echarts
库渲染线图。 - 组件在
onMounted
生命周期钩子中调用initChart
方法来初始化图表。 - 通过
ref
引用 DOM 元素,chartDom
确保图表的容器正确加载。 - 折线图配置:
- 配置了
tooltip
提示框,当鼠标悬停时显示访问量信息。 - 通过
grid
设置图表边距,使图表内容在容器中更好地布局。 - x 轴:设置为类别目类型,用作
props.accessData.dataList
横轴数据,显示时间或其他类别数据。 - y 轴:数值类型,简单设为0,表示访问量范围。
- 折线图数据:将
props.accessData.accessList
作为折线图的纵轴数据,并通过itemStyle
自定义样式,主要包括线条颜色、折点样式等。 - 数据监听:
- 使用
watch
监听accessData
的变化,每当确定数据更新时,重新调用initChart
更新图表。 watch``deep: true
,确保在核心属性accessData
变更时仍然设置触发。- 调试输出:
- 在
initChart
方法和onMounted
中,加入console.log
输出chartDom
和chartInstance
,用于检查元素和实例的正确加载,然后开发调试。
代码
<template>
<div class="container">
<h2 class="homeTitle">用户访问量统计</h2>
<div class="charBox">
<div ref="chartDom" id="main" style="width: 100%; height: 320px"></div>
<ul class="orderListLine turnover">
<li>访问量(个)</li>
</ul>
</div>
</div>
</template>
<script>
import { defineComponent, onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
name: 'AccessStatistics',
props: {
accessData: {
type: Object,
required: true,
},
},
setup(props) {
const chartDom = ref(null);
let chartInstance = null;
const initChart = () => {
// 检查 chartDom 是否存在
if (!chartDom.value) {
console.error('Chart DOM not found');
return;
}
// 输出 chartDom 的值进行调试
console.log('chartDom:', chartDom.value);
// 如果 chartInstance 不存在,则初始化
if (!chartInstance) {
chartInstance = echarts.init(chartDom.value);
}
// 输出 chartInstance 的值进行调试
console.log('chartInstance:', chartInstance);
const option = {
tooltip: {
trigger: 'axis',
},
grid: {
top: '5%',
left: '10',
right: '50',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#666',
fontSize: '12px',
},
},
axisLine: {
lineStyle: {
color: '#E5E4E4',
width: 1,
},
},
data: props.accessData.dataList,
},
yAxis: [
{
type: 'value',
min: 0,
axisLabel: {
textStyle: {
color: '#666',
fontSize: '12px',
},
},
},
],
series: [
{
name: '访问量',
type: 'line',
smooth: false,
showSymbol: false,
symbolSize: 10,
itemStyle: {
normal: {
color: '#F29C1B',
lineStyle: {
color: '#FFD000',
},
},
emphasis: {
color: '#fff',
borderWidth: 5,
borderColor: '#FFC100',
},
},
data: props.accessData.accessList,
},
],
};
if (chartInstance && option) {
chartInstance.setOption(option);
}
};
watch(
() => props.accessData,
() => {
initChart();
},
{ deep: true }
);
onMounted(() => {
// 输出 chartDom 的值进行调试
console.log('chartDom:', chartDom.value);
initChart();
});
return {
chartDom,
};
},
});
</script>
<style scoped>
/* 你的样式 */
</style>
使用:
在需要的地方引入
<!-- 用户访问量统计 -->
<AccessStatistics :accessData="accessData" />
<!-- end -->
import AccessStatistics from "./components/accessStatistics.vue";
传入的数据格式
accessData.value = {
dateList: [
"2022-01-01",
"2022-01-02",
"2022-01-03",
"2022-01-04",
"2022-01-05",
],
accessList: [100, 200, 150, 22, 22],
};
用户数据统计小组件
描述:
1.组件结构
该组件主要由一个容器、图表区域和数据说明组成。
- 标题:
homeTitle
显示为“用户统计”,明确标明组件的用途。 - 图表容器:
chartDom
是一个引用,用于初始化和渲染echarts
实例。 - 说明区域:标识图表中的数据线,分别显示“用户总体(个)”和“新增用户(个)”。
2.图表逻辑与数据绑定
- 数据传递**:**
**userdata**
是一个对象,包含三个属性: **dataList**
:x轴的时间或类别标签。**totalUserList**
:用户概览的数值吞吐量。**newUserList**
:新增用户数的吞吐量。- 图表容器引用:
**chartDom**
引用**<div>**
元素,用于初始化**echarts**
实例。
3.初始图表
- 提示框**:
**tooltip**
触发类型为**axis**
,即在鼠标悬停时显示整条数据轴的信息。背景、文本样式和相似的圆角都可以自定义。** - 坐标系合理布局**:采用**
**grid**
设置图表的边距,布置在集装箱内布局。 - x轴**:使用**
**userdata.dataList**
,即确定的时间数据或类别标签,展示x轴内容。自定义了轴标签颜色和大小,确保数据易读。 - y轴**:数值类型,简单设为0,表示从零开始的用户量和新的增量。**
- 数据系列**:**
- 用户轮廓**:折线图,指定颜色为黄色。通过**
**itemStyle**
设置平滑曲线和显示样式。 - 新增用户:折线图,指定颜色为红色,样式为用户基础,基础数据对比。
4.数据监听与生命周期管理
- 监听
**userdata**
的变化**:当****userdata**
更新时重新初始化图表,确保显示最新的数据。 - 生命周期钩子:在
**onMounted**
中调用**initChart**
,确保加载组件时初始化图表。
代码
<template>
<div class="container">
<h2 class="homeTitle">用户统计</h2>
<div class="charBox">
<div id="usermain" ref="chartDom" style="width: 100%; height: 320px"></div>
<ul class="orderListLine user">
<li class="one"><span></span>用户总量(个)</li>
<li class="three"><span></span>新增用户(个)</li>
</ul>
</div>
</div>
</template>
<script>
import { defineComponent, onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
name: 'UserStatistics',
props: {
userdata: {
type: Object,
required: true,
},
},
setup(props) {
const chartDom = ref(null);
const initChart = () => {
// 检查 chartDom 是否存在
if (!chartDom.value) {
console.error('Chart DOM not found');
return;
}
// 输出 chartDom 的值进行调试
console.log('chartDom:', chartDom.value);
const myChart = echarts.init(chartDom.value);
const option = {
tooltip: {
trigger: 'axis',
backgroundColor: '#fff', //背景颜色(此时为默认色)
borderRadius: 2, //边框圆角
textStyle: {
color: '#333', //字体颜色
fontSize: 12, //字体大小
fontWeight: 300,
},
},
grid: {
top: '5%',
left: '20',
right: '50',
bottom: '12%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#666',
fontSize: '12px',
},
},
axisLine: {
lineStyle: {
color: '#E5E4E4',
width: 1, //x轴线的宽度
},
},
data: props.userdata.dataList, //后端传来的动态数据
},
yAxis: [
{
type: 'value',
min: 0,
axisLabel: {
textStyle: {
color: '#666',
fontSize: '12px',
},
},
}, //左侧值
],
series: [
{
name: '用户总量',
type: 'line',
smooth: false, //否平滑曲线
showSymbol: false, //未显示鼠标上移的圆点
symbolSize: 10,
itemStyle: {
normal: {
color: '#FFD000',
lineStyle: {
color: '#FFD000',
},
},
emphasis: {
color: '#fff',
borderWidth: 5,
borderColor: '#FFC100',
},
},
data: props.userdata.totalUserList,
},
{
name: '新增用户',
type: 'line',
smooth: false, //否平滑曲线
showSymbol: false, //未显示鼠标上移的圆点
symbolSize: 10, //圆点大小
itemStyle: {
normal: {
color: '#FD7F7F',
lineStyle: {
color: '#FD7F7F',
},
},
emphasis: {
color: '#fff',
borderWidth: 5,
borderColor: '#FD7F7F',
},
},
data: props.userdata.newUserList,
},
],
};
if (option) {
myChart.setOption(option);
}
};
watch(
() => props.userdata,
() => {
initChart();
},
{ deep: true }
);
onMounted(() => {
initChart();
});
return {
chartDom,
};
},
});
</script>
<style scoped>
/* 你的样式 */
</style>
使用:
<!-- 用户统计 -->
<UserStatistics :userdata="userData" />
<!-- end -->
import UserStatistics from "./components/userStatistics.vue";
const userData = ref({});
数据格式:
userData.value = {
dateList: [
"2022-01-01",
"2022-01-02",
"2022-01-03",
"2022-01-04",
"2022-01-05",
],
totalUserList: [100, 200, 150, 22, 22],
newUserList: [50, 150, 156, 66, 22],
};
使用排行top10统计
描述:
1.组件结构
- 标题**:根据确定的**
**type**
属性,动态显示标题,区分“知识库分类”或“案例分类”的使用排名。 - 图表容器:
**chartDom**
使用引用,提供给**echarts**
图表实例进行渲染,设置了宽度为100%,高度为380px。
2.属性说明
- 道具:
sortTop10Data
:包含sortNameList
(分类名称数据库)和numberList
(使用数量的数据库),用于对应的柱状图。type
:字符串标题类型,用于判断是“知识库分类”还是“案例分类”,从而动态调整内容。
3.图表配置项详解
- 提示框(提示框):
trigger: 'axis'
:在鼠标悬停时触发,并显示与x轴校准的数据。- 背景背景、字体样式,使提示框清晰易读。
- 网格(图表网格):
- 设置图表边距,包含标签,使图表内容不与容器边界重叠。
- xAxis(x 轴):
show: false
隐藏 x 轴,因为水平柱状图不需要显式展示 x 轴信息。
- yAxis(y 轴):
- 使用
props.sortTop10Data.sortNameList
作为分类数据来源。 - 隐藏图标和图标,仅显示分类名称,简化图表设计。
- 使用
- 数据系列:
- 类型:柱状图 (
type: 'bar'
),水平显示,显示分类的使用次数。 - 背景色:使用灰色背景 (
#F3F4F7
),突出柱状图的颜色。 - 柱状条样式:
- 颜色渐变:左至右渐变的黄色条形,以增强视觉效果。
- 圆角:设置右上角和右下角为圆角,使条形图更加美观。
- 标签:显示每个柱状条的数值,位置轻微偏移,视觉确保对齐。
- 类型:柱状图 (
4.数据监听与生命周期管理
- watch:实时监听
sortTop10Data
的变化,数据保证更新时,图表内容同步更新。 - onMounted:在组件加载时初始化图表,通过
initChart
创建echarts
实例并配置图表选项。
代码
<template>
<div class="container top10">
<h2 v-if="type === 'knowledge'" class="homeTitle">知识库分类使用排名TOP10</h2>
<h2 v-else class="homeTitle">案例分类使用排名TOP10</h2>
<div class="charBox">
<div ref="chartDom" id="top" style="width: 100%; height: 380px"></div>
</div>
</div>
</template>
<script>
import { defineComponent, onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
name: 'sortTop10',
props: {
sortTop10Data: {
type: Object,
required: true,
},
type: {
type: String,
required: true,
},
},
setup(props) {
const chartDom = ref(null);
const initChart = () => {
const myChart = echarts.init(chartDom.value);
const option = {
tooltip: {
trigger: 'axis',
backgroundColor: '#fff', //背景颜色(此时为默认色)
borderRadius: 2, //边框圆角
textStyle: {
color: '#333', //字体颜色
fontSize: 12, //字体大小
fontWeight: 300,
},
},
grid: {
top: '-10px',
left: '0',
right: '0',
bottom: '0',
containLabel: true,
},
xAxis: {
show: false,
},
yAxis: {
axisLine: {
show: false,
},
axisTick: {
show: false,
alignWithLabel: true,
},
type: 'category',
axisLabel: {
textStyle: {
color: '#666',
fontSize: '12px',
},
},
data: props.sortTop10Data.sortNameList,
},
series: [
{
data: props.sortTop10Data.numberList,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: '#F3F4F7',
},
barWidth: 20,
barGap: '80%', // 多个并排柱子设置柱子之间的间距
barCategoryGap: '80%', // 多个并排柱子设置柱子之间的间距
itemStyle: {
emphasis: {
barBorderRadius: 30,
},
normal: {
barBorderRadius: [0, 10, 10, 0], // 圆角
color: new echarts.graphic.LinearGradient(
1,
0,
0,
0, // 渐变色的起止位置, 右/下/左/上
[
{ offset: 0, color: '#FFBD00' },
{ offset: 1, color: '#FFD000' },
]
),
label: {
show: true,
formatter: '{@score}',
color: '#333',
position: ['8', '5'], // 自定义位置第一个参数为x轴方向,第二个参数为y轴方向,左上角为起点,向右向下为正数,向上向左为负数
},
},
},
},
],
};
if (option) {
myChart.setOption(option);
}
};
watch(
() => props.sortTop10Data,
() => {
initChart();
},
{ deep: true }
);
onMounted(() => {
initChart();
});
return {
chartDom,
};
},
});
</script>
<style scoped>
/* 你的样式 */
</style>
使用:
<div class="homeMain homecon">
<!-- 案例分类使用排行榜 -->
<sortTop10 :sortTop10Data="caseSortTop10Data" :type="'case'" />
<!-- end -->
</div>
import sortTop10 from './components/sortTop10.vue';
const caseSortTop10Data = ref({});
数据格式
caseSortTop10Data.value = {
caseSortNameList: ["商品10", "商品9", "商品8", "商品7", "商品6", "商品5", "商品4", "商品3", "商品2", "商品1"],
numberList: [1, 2, 3, 4, 5, 6, 8, 8, 9, 11],
};