当前位置：首页 > news >正文

UniApp 中使用 tui-xecharts插件（或类似图表库如 uCharts）

news 2025/8/15 14:23:26

要在 UniApp 中使用 tui-xecharts插件（或类似图表库如 uCharts），需遵循以下步骤。以下流程以 uCharts（官方推荐的高性能跨平台图表库）为例，因其在 UniApp 生态中更成熟且文档完善。若需使用 tui-xecharts，可参考类似集成逻辑，但需注意其插件市场的具体文档。

一、安装图表插件

1. 通过 HBuilderX 插件市场安装

打开 HBuilderX，进入 插件市场（菜单栏 → 工具 → 插件市场）。
搜索 uCharts或 qiun-data-charts（官方封装组件），点击 “使用 HBuilderX 导入插件”。

2. 通过 npm 安装（可选）

npm install @qiun/ucharts

二、配置页面结构

1. 添加 Canvas 容器

在 Vue 文件的 <template>中添加 Canvas 组件，并指定唯一 canvas-id：

vue

<template><view><canvas canvas-id="chartCanvas" id="chartCanvas" class="charts" @touchend="handleTouch"/></view>
</template>

2. 设置样式

css

<style scoped>
.charts {width: 100%;      /* 宽度自适应 */height: 500rpx;   /* 高度按需调整 */
}
</style>

三、初始化图表与数据

1. 引入 uCharts 库

<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js'; // 路径根据实际位置调整
let chartInstance = null; // 图表实例export default {data() {return {cWidth: 0,    // 动态宽度cHeight: 0   // 动态高度};},onReady() {// 转换 rpx 为像素（适配多端）this.cWidth = uni.upx2px(750); this.cHeight = uni.upx2px(500);this.loadChartData();},methods: {loadChartData() {// 模拟异步数据（替换为真实 API 请求）setTimeout(() => {const chartData = {categories: ["2020", "2021", "2022", "2023", "2024"],series: [{name: "销售额",data: [300, 450, 280, 600, 800]}]};this.initChart('chartCanvas', chartData);}, 500);},initChart(canvasId, data) {const ctx = uni.createCanvasContext(canvasId, this);chartInstance = new uCharts({type: "column",       // 图表类型：柱状图context: ctx,          // 画布上下文width: this.cWidth,    // 宽度height: this.cHeight,  // 高度categories: data.categories,series: data.series,animation: true,       // 开启动画padding: [15, 15, 0, 5], // 内边距extra: {column: {type: "group",     // 分组柱状图width: 30          // 柱宽}}});},handleTouch(e) {chartInstance.showToolTip(e); // 显示提示框}}
};
</script>

四、关键配置说明

图表类型
修改 type参数支持多种图表：
性能优化
- 大数据量：启用滚动 enableScroll: true，限制显示项 xAxis: { itemCount: 8 }
- 卡顿处理：开启 2D 渲染模式（部分设备需配置）
样式定制
- 颜色：通过 color: ["#1890FF", "#91CB74"]修改主题色
- 坐标轴：yAxis: { min: 0, interval: 100 }设置刻度间隔