⭐ 重磅革新：单 Canvas 绘制多图表，性能飞跃 ⭐
最新版本 Tui-xCharts 带来了革命性的功能：一个 Canvas 画布即可绘制多个图表！这一特性极大地减少了页面中 DOM 节点的数量，有效缓解了因图表过多导致的性能压力，特别是在构建复杂仪表盘或数据可视化页面时，性能优势尤为显著。
核心特点与优势
纯 UTS 编写，性能卓越： XCharts 完全基于 UTS 语言构建，能够充分利用 uniappx 的底层能力，确保图表渲染和交互的执行效率，带来流畅的用户体验。
Canvas 直接绘制，告别 Webview 瓶颈： 舍弃了传统的 Webview 套壳方式，直接在 Canvas 画布上进行绘制。这不仅避免了 Webview 带来的额外性能开销，还能显著提升图表的渲染速度和动画流畅度。
极致轻量： 由于无需加载和运行 Webview 相关的代码和资源，XCharts 大幅减少了应用的包体积，加快了应用的加载速度，尤其适合对体积敏感的场景。
快速开始
基本使用
在页面中引入 t-xcharts 组件：
<template>
<view class="container">
<t-xcharts
ref="chart"
:option="chartOption"
@init="onChartInit"
></t-xcharts>
</view>
</template>
<script setup>
import { ref } from 'vue';
const chart = ref(null);
const chartOption = ref({
type: 'column',
series: [{
data: [10, 20, 30, 40, 50]
}],
categories: ['A', 'B', 'C', 'D', 'E']
});
function onChartInit() {
console.log('图表初始化完成');
}
</script>多图表配置
在一个 Canvas 中绘制多个图表：
<template>
<view class="container">
<t-xcharts
ref="chart"
:option="chartOption"
></t-xcharts>
</view>
</template>
<script setup>
import { ref } from 'vue';
const chart = ref(null);
const chartOption = ref({
multiChart: true,
charts: [
{
type: 'column',
series: [{
data: [10, 20, 30, 40, 50]
}],
categories: ['A', 'B', 'C', 'D', 'E'],
position: {
x: 0,
y: 0,
width: '50%',
height: '100%'
}
},
{
type: 'line',
series: [{
data: [50, 40, 30, 20, 10]
}],
categories: ['A', 'B', 'C', 'D', 'E'],
position: {
x: '50%',
y: 0,
width: '50%',
height: '100%'
}
}
]
});
</script>总结
XCharts 是 uniappx 开发者进行数据可视化的理想选择。它凭借纯 UTS 编写带来的高性能、Canvas 直接绘制实现的流畅体验、轻量化的包体优势，以及创新性的单 Canvas 多图表能力，能够帮助开发者轻松构建出高性能、低资源消耗的精美图表，提升应用的整体表现力。
感谢
在此，我们要特别感谢 uCharts 的作者及其开源社区。XCharts 的诞生离不开 uCharts 的启发和贡献。开源精神让我们能够站在巨人的肩膀上，创造出更加优秀的图表库。感谢 uCharts 的开源，为图表绘制领域带来了新的可能性。
示例数据说明
新版项目里的图表页面并不一定都直接 import opts from './index.uts'。例如 xcharts/arcbar/arcbar.uvue:16 明确写了说明：
- 本地其实已经存在
xcharts/arcbar/index.uts - 示例页面改成接口请求，只是因为某些图表配置数据量过大，直接把大体量配置长期放在页面构建链路里，可能导致编译阶段内存压力过高
- 这属于示例工程为了包体和编译稳定性做的取舍，不代表图表必须通过接口获取配置
也就是说，从文档角度讲，完全可以直接把 index.uts 中的配置数据写出来，开发者也可以在自己的项目里直接本地维护图表配置。
例如 arcbar 的本地配置文件 xcharts/arcbar/index.uts:1 中，第一组示例数据本质上就是：
export default [
{
name: '圆弧进度条+渐变色',
option: {
animation: true,
dataLabel: true,
extra: {
arcbar: {
backgroundColor: '#E9E9E9',
endAngle: 0.25,
gap: 2,
linearType: 'custom',
startAngle: 0.75,
type: 'default',
width: 12
}
},
series: [
{
color: '#2fc25b',
data: [{ value: 0.8 }],
name: '正确率'
}
],
subtitle: {
color: '#666666',
fontSize: 25,
name: '正确率'
},
title: {
color: '#2fc25b',
fontSize: 35,
name: '80%'
},
type: 'arcbar'
}
}
]所以写文档时可以优先采用下面这套表达方式：
- 页面示例负责说明
t-xcharts如何渲染和初始化 index.uts里的option负责作为文档中的真实配置示例- 如果示例工程里用了接口请求，要额外说明“这只是演示工程为减轻包体/编译压力的处理，不是图表能力本身的限制”
XCharts 为 UniApp X 提供了一套强大的图表解决方案
让数据可视化变得简单而高效！ 📊