Vue3数据统计小组件

使用前提：

提前配置好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],};