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 }设置刻度间隔