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

要在 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 库​

js

<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>

四、关键配置说明

1. ​​图表类型​​

   修改 type参数支持多种图表：

2. ​​性能优化​​

   • ​​大数据量​​：启用滚动 enableScroll: true，限制显示项 xAxis: { itemCount: 8 }

   • ​​卡顿处理​​：开启 2D 渲染模式（部分设备需配置）

3. ​​样式定制​​

   • ​​颜色​​：通过 color: ["#1890FF", "#91CB74"]修改主题色

   • ​​坐标轴​​：yAxis: { min: 0, interval: 100 }设置刻度间隔