uniapp散点图

### 实现 UniApp 中的散点图功能 在 UniApp 中实现散点图可以通过两种方式完成：一种是利用原生 Canvas 绘制图表；另一种则是引入第三方库来简化开发流程。以下是具体方法： #### 方法一：基于 Canvas 手动绘制 通过 HTML5 的 `<canvas>` 元素，可以手动绘制散点图。这种方式需要开发者自行处理坐标转换、样式设置以及交互逻辑。 ```html <template> <view> <canvas canvas-id="scatterCanvas" id="scatterCanvas"></canvas> </view> </template> <script> export default { onReady() { this.drawScatterChart(); }, methods: { drawScatterChart() { const ctx = uni.createCanvasContext('scatterCanvas'); // 数据集定义 const dataPoints = [ { x: 20, y: 30 }, { x: 40, y: 10 }, { x: 100, y: 36 }, { x: 80, y: 29 }, { x: 140, y: 110 } ]; // 设置画布大小 const width = 300; const height = 200; // 坐标系缩放比例 const scaleX = width / 150; // X 轴范围假设为 [0, 150] const scaleY = height / 120; // Y 轴范围假设为 [0, 120] // 清空画布并绘制背景网格 ctx.clearRect(0, 0, width, height); ctx.setStrokeStyle('#ccc'); for (let i = 0; i <= 150; i += 10) { ctx.beginPath(); ctx.moveTo(i * scaleX, 0); ctx.lineTo(i * scaleX, height); ctx.stroke(); } for (let j = 0; j <= 120; j += 10) { ctx.beginPath(); ctx.moveTo(0, height - j * scaleY); ctx.lineTo(width, height - j * scaleY); ctx.stroke(); } // 绘制散点 ctx.setFillStyle('red'); dataPoints.forEach(point => { const px = point.x * scaleX; const py = height - point.y * scaleY; ctx.beginPath(); ctx.arc(px, py, 4, 0, Math.PI * 2); // 圆形半径为 4 ctx.fill(); }); ctx.draw(); // 提交绘图操作 } } }; </script> ``` 这种方法完全依赖于开发者的能力，灵活性较高但复杂度也较大[^1]。 --- #### 方法二：使用第三方库 为了减少工作量，推荐使用成熟的 JavaScript 图表库集成到 UniApp 中。以下列举几个常用的选项及其优缺点： ##### 1. **ECharts** ECharts 是百度开源的一款强大的可视化工具，支持丰富的图表类型，包括散点图。 ###### 集成步骤： 安装 ECharts 到项目中： ```bash npm install echarts --save ``` 创建组件文件 `echart-scatter.vue` 并配置如下代码： ```vue <template> <view class="container"> <div ref="chartRef" style="width: 100%; height: 400px;"></div> </view> </template> <script> import * as echarts from 'echarts'; export default { mounted() { this.initChart(); }, methods: { initChart() { const chartDom = this.$refs.chartRef; const myChart = echarts.init(chartDom); const option = { title: { text: '散点图示例' }, tooltip: {}, xAxis: { name: 'X', min: 0, max: 150 }, yAxis: { name: 'Y', min: 0, max: 120 }, series: [{ symbolSize: 10, data: [ [20, 30], [40, 10], [100, 36], [80, 29], [140, 110] ], type: 'scatter' }] }; myChart.setOption(option); } } }; </script> ``` 优点：功能强大，文档完善，社区活跃。 缺点：包体积相对较大[^2]。 ##### 2. **Chart.js** Chart.js 是一款轻量级的图表库，适合快速构建简单的散点图。 ###### 集成步骤： 同样先安装 Chart.js： ```bash npm install chart.js --save ``` 然后编写 Vue 文件： ```vue <template> <view> <canvas ref="chartCanvas"></canvas> </view> </template> <script> import { Chart } from 'chart.js'; export default { mounted() { this.renderChart(); }, methods: { renderChart() { const ctx = this.$refs.chartCanvas.getContext('2d'); const data = { datasets: [{ label: '散点图数据', data: [ { x: 20, y: 30 }, { x: 40, y: 10 }, { x: 100, y: 36 }, { x: 80, y: 29 }, { x: 140, y: 110 } ], backgroundColor: 'rgba(255, 99, 132, 0.7)' }] }; const options = { scales: { xAxes: [{ display: true }], yAxes: [{ display: true }] } }; new Chart(ctx, { type: 'scatter', data: data, options: options }); } } }; </script> ``` 优点：简单易用，加载速度快。 缺点：高级特性较少[^3]。 ##### 3. **LightningChart** LightningChart 是高性能的商业图表解决方案，适用于大规模实时数据分析场景。 ###### 特性描述： - 支持动态更新和高帧率渲染； - 可自定义点样式、颜色渐变等功能。 由于 LightningChart 属于收费产品，需评估成本后再决定是否采用[^4]。 --- ### 总结 对于大多数应用场景而言，建议优先考虑免费且易于使用的方案如 ECharts 或 Chart.js。如果追求极致性能或者有特殊需求，则可尝试 LightningChart。