观影统计 - Cordova 与 OpenHarmony 混合开发实战-育师

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 模块概述

观影统计模块是MovieTracker应用中用于统计和分析用户观影数据的功能。系统会统计用户观看的影片数量、评分分布、分类分布等信息，并以图表的形式展示。用户可以通过统计数据了解自己的观影习惯。

该模块的主要功能包括：统计观影数量、统计评分分布、统计分类分布、生成统计报表等。通过Cordova框架与OpenHarmony原生能力的结合，实现了完整的数据统计和可视化。

观影统计需要处理大量的数据聚合和计算，同时需要提供多种统计维度。

🔗 完整流程

第一步：数据收集与聚合

系统从数据库中收集所有影片数据，按照不同的维度进行聚合。包括按分类聚合、按评分聚合、按年份聚合等。

数据聚合过程需要进行复杂的计算，如计算平均值、中位数、标准差等统计指标。

第二步：统计指标计算

根据聚合的数据计算各种统计指标，如总观影数、平均评分、最高评分、最低评分等。

同时需要计算趋势指标，如月度观影数的变化趋势等。

第三步：可视化展示

将统计数据以图表的形式展示，包括柱状图、饼图、折线图等。用户可以通过图表直观地了解观影数据。

同时需要提供详细的统计表格，显示具体的数值。

🔧 Web代码实现

观影统计HTML结构

<divid="statistics-page"class="page"><divclass="page-header"><h2>观影统计</h2></div><divclass="statistics-container"><divclass="stat-cards"><divclass="stat-card"><spanclass="label">观影总数</span><spanclass="value"id="total-watched">0</span></div><divclass="stat-card"><spanclass="label">平均评分</span><spanclass="value"id="avg-rating">0.0</span></div><divclass="stat-card"><spanclass="label">最高评分</span><spanclass="value"id="max-rating">0</span></div></div><divclass="chart-container"><h3>分类分布</h3><canvasid="category-chart"></canvas></div><divclass="chart-container"><h3>评分分布</h3><canvasid="rating-chart"></canvas></div></div></div>

统计实现

asyncfunctionloadStatistics(){try{constwatchedMovies=awaitdb.getMoviesByStatus('watched');if(watchedMovies.length===0){showError('暂无观影数据');return;}// 计算基本统计consttotalWatched=watchedMovies.length;constratings=watchedMovies.map(m=>m.rating).filter(r=>r);constavgRating=ratings.length>0?(ratings.reduce((a,b)=>a+b,0)/ratings.length).toFixed(1):0;constmaxRating=ratings.length>0?Math.max(...ratings):0;document.getElementById('total-watched').textContent=totalWatched;document.getElementById('avg-rating').textContent=avgRating;document.getElementById('max-rating').textContent=maxRating;// 绘制图表drawCategoryChart(watchedMovies);drawRatingChart(ratings);}catch(error){console.error('加载统计失败:',error);showError('加载统计失败');}}functiondrawCategoryChart(movies){constcategoryCount={};movies.forEach(m=>{constcat=m.category||'未分类';categoryCount[cat]=(categoryCount[cat]||0)+1;});constctx=document.getElementById('category-chart').getContext('2d');newChart(ctx,{type:'pie',data:{labels:Object.keys(categoryCount),datasets:[{data:Object.values(categoryCount),backgroundColor:['#FF6B6B','#4ECDC4','#45B7D1','#FFA07A','#96CEB4']}]}});}functiondrawRatingChart(ratings){constratingCount={};for(leti=1;i<=10;i++){ratingCount[i]=ratings.filter(r=>r===i).length;}constctx=document.getElementById('rating-chart').getContext('2d');newChart(ctx,{type:'bar',data:{labels:Object.keys(ratingCount),datasets:[{label:'影片数',data:Object.values(ratingCount),backgroundColor:'#409EFF'}]}});}

🔌 OpenHarmony原生代码

统计插件

// StatisticsPlugin.etsimport{webview}from'@kit.ArkWeb';import{common}from'@kit.AbilityKit';exportclassStatisticsPlugin{privatecontext:common.UIAbilityContext;constructor(context:common.UIAbilityContext){this.context=context;}publicregisterStatistics(controller:webview.WebviewController):void{controller.registerJavaScriptProxy({object:newStatisticsBridge(),name:'statisticsNative',methodList:['calculateStats','generateReport']});}}exportclassStatisticsBridge{publiccalculateStats(moviesJson:string):string{try{constmovies=JSON.parse(moviesJson);constratings=movies.map((m:any)=>m.rating).filter((r:any)=>r);conststats={total:movies.length,avgRating:ratings.length>0?parseFloat((ratings.reduce((a:number,b:number)=>a+b,0)/ratings.length).toFixed(1)):0,maxRating:ratings.length>0?Math.max(...ratings):0,minRating:ratings.length>0?Math.min(...ratings):0};returnJSON.stringify(stats);}catch(error){returnJSON.stringify({error:error.message});}}publicgenerateReport(moviesJson:string):string{try{constmovies=JSON.parse(moviesJson);constreport={generatedAt:newDate().toISOString(),totalMovies:movies.length,summary:`观看了${movies.length}部影片`};returnJSON.stringify(report);}catch(error){returnJSON.stringify({error:error.message});}}}