鴻蒙OSUniApp打造多功能圖表展示組件 #三方框架 #Uniapp

使用UniApp打造多功能圖表展示組件

在當前移動應用開發領域，數據可視化已成為不可或缺的一部分。無論是展示銷售數據、用戶增長趨勢還是其他業務指標，一個優秀的圖表組件都能有效提升用戶體驗。UniApp作為一款跨平臺開發框架，如何在其中實現功能強大且靈活的圖表組件呢？本文將分享我在實際項目中的經驗與思考。

為什么選擇UniApp開發圖表組件

傳統的移動應用開發往往面臨多端適配的問題。開發團隊需要分別為Android、iOS甚至H5端編寫不同的代碼，這無疑增加了開發成本和維護難度。而UniApp提供"一次開發，多端發布"的能力，特別適合需要跨平臺展示數據的應用場景。

在我參與的一個企業數據分析項目中，客戶要求應用能夠在各種設備上展示相同的數據圖表，并且具備交互能力。這正是UniApp的優勢所在。

技術選型：echarts-for-uniapp

經過調研，我選擇了echarts-for-uniapp作為基礎圖表庫。它是Apache ECharts在UniApp環境下的實現，保留了ECharts強大的功能同時解決了跨平臺適配問題。

安裝非常簡單：

npm install echarts-for-uniapp

組件設計思路

設計一個好的圖表組件，需要考慮以下幾點：

高內聚低耦合 - 組件應該是獨立的，只接收必要的數據和配置
易于擴展 - 能夠支持多種圖表類型
響應式適配 - 在不同尺寸的設備上都能良好展示
性能優化 - 處理大量數據時保持流暢

基于這些原則，我設計了一個名為ChartComponent的通用組件。

核心代碼實現

首先創建基礎組件結構：

<!-- components/chart/chart.vue -->
<template><view class="chart-container" :style="{ height: height, width: width }"><canvas v-if="canvasId" :canvas-id="canvasId" :id="canvasId" class="chart-canvas"></canvas><view v-if="loading" class="loading-mask"><view class="loading-icon"></view></view></view>
</template><script>
import * as echarts from 'echarts-for-uniapp';
import themes from './themes.js';export default {name: 'ChartComponent',props: {// 圖表類型：line, bar, pie等type: {type: String,default: 'line'},// 圖表數據chartData: {type: Object,required: true},// 圖表配置項options: {type: Object,default: () => ({})},// 畫布IDcanvasId: {type: String,default: 'chart' + Date.now()},// 圖表寬度width: {type: String,default: '100%'},// 圖表高度height: {type: String,default: '300px'},// 主題theme: {type: String,default: 'default'}},data() {return {chart: null,loading: true,resizeObserver: null};},watch: {chartData: {handler: 'updateChart',deep: true},options: {handler: 'updateChart',deep: true},theme() {this.initChart();}},mounted() {this.$nextTick(() => {this.initChart();// 監聽窗口變化，實現響應式this.resizeObserver = uni.createSelectorQuery().in(this).select('.chart-container').boundingClientRect().exec((res) => {if (res[0]) {const { width, height } = res[0];this.handleResize(width, height);}});// 添加全局窗口變化監聽window.addEventListener('resize', this.onWindowResize);});},beforeDestroy() {if (this.chart) {this.chart.dispose();this.chart = null;}window.removeEventListener('resize', this.onWindowResize);},methods: {initChart() {this.loading = true;// 確保上一個實例被銷毀if (this.chart) {this.chart.dispose();}// 獲取DOM元素uni.createSelectorQuery().in(this).select(`#${this.canvasId}`).fields({ node: true, size: true }).exec((res) => {if (!res[0] || !res[0].node) {console.error('獲取canvas節點失敗');return;}const canvas = res[0].node;const chart = echarts.init(canvas, themes[this.theme] || '');this.chart = chart;this.updateChart();this.loading = false;});},updateChart() {if (!this.chart) return;const options = this.generateOptions();this.chart.setOption(options, true);// 通知父組件圖表已更新this.$emit('chart-ready', this.chart);},generateOptions() {// 根據不同圖表類型生成基礎配置let baseOptions = {};switch(this.type) {case 'line':baseOptions = this.generateLineOptions();break;case 'bar':baseOptions = this.generateBarOptions();break;case 'pie':baseOptions = this.generatePieOptions();break;// 其他圖表類型...default:baseOptions = this.generateLineOptions();}// 合并用戶自定義配置return {...baseOptions,...this.options};},generateLineOptions() {const { series = [], xAxis = [], legend = [] } = this.chartData;return {tooltip: {trigger: 'axis'},legend: {data: legend,bottom: 0},grid: {left: '3%',right: '4%',bottom: '10%',top: '8%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: xAxis},yAxis: {type: 'value'},series: series.map(item => ({name: item.name,type: 'line',data: item.data,...item}))};},generateBarOptions() {const { series = [], xAxis = [], legend = [] } = this.chartData;return {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: legend,bottom: 0},grid: {left: '3%',right: '4%',bottom: '10%',top: '8%',containLabel: true},xAxis: {type: 'category',data: xAxis},yAxis: {type: 'value'},series: series.map(item => ({name: item.name,type: 'bar',data: item.data,...item}))};},generatePieOptions() {const { series = [] } = this.chartData;return {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},series: [{name: series.name || '數據分布',type: 'pie',radius: '50%',data: series.data || [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},...series}]};},handleResize(width, height) {if (this.chart) {this.chart.resize({width,height});}},onWindowResize() {uni.createSelectorQuery().in(this).select('.chart-container').boundingClientRect().exec((res) => {if (res[0]) {const { width, height } = res[0];this.handleResize(width, height);}});}}
};
</script><style scoped>
.chart-container {position: relative;width: 100%;height: 300px;
}
.chart-canvas {width: 100%;height: 100%;
}
.loading-mask {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 255, 255, 0.7);display: flex;justify-content: center;align-items: center;
}
.loading-icon {width: 40px;height: 40px;border: 3px solid #f3f3f3;border-top: 3px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite;
}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}
</style>

實際應用案例

在一個企業數據大屏項目中，我需要展示公司全年的銷售數據，包括不同地區的銷售額對比、月度趨勢等。以下是實際使用示例：

<template><view class="dashboard"><view class="chart-item"><text class="chart-title">各地區銷售額占比</text><chart-component type="pie" :chartData="regionData" height="350px"@chart-ready="onChartReady"/></view><view class="chart-item"><text class="chart-title">月度銷售趨勢</text><chart-component type="line" :chartData="trendData" height="350px"/></view><view class="chart-item"><text class="chart-title">產品銷量對比</text><chart-component type="bar" :chartData="productData" height="350px"theme="dark"/></view></view>
</template><script>
import ChartComponent from '@/components/chart/chart.vue';export default {components: {ChartComponent},data() {return {regionData: {series: {name: '地區銷售額',data: [{value: 1048, name: '華東'},{value: 735, name: '華北'},{value: 580, name: '華南'},{value: 484, name: '西北'},{value: 300, name: '西南'}]}},trendData: {xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],legend: ['目標', '實際'],series: [{name: '目標',data: [150, 130, 150, 160, 180, 170, 190, 200, 210, 200, 195, 250],smooth: true},{name: '實際',data: [120, 125, 145, 170, 165, 180, 195, 210, 205, 215, 225, 240],smooth: true}]},productData: {xAxis: ['產品A', '產品B', '產品C', '產品D', '產品E'],legend: ['2022年', '2023年'],series: [{name: '2022年',data: [120, 200, 150, 80, 70]},{name: '2023年',data: [150, 180, 200, 135, 90]}]}};},methods: {onChartReady(chart) {console.log('圖表實例已就緒', chart);// 可以進行額外的圖表實例操作}}
};
</script><style>
.dashboard {padding: 20rpx;
}
.chart-item {background-color: #fff;border-radius: 10rpx;margin-bottom: 20rpx;padding: 20rpx;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.chart-title {font-size: 32rpx;font-weight: bold;margin-bottom: 20rpx;display: block;color: #333;
}
</style>