uniapp用uCharts实现折线图：Vue3+TS配置与渲染

脚本专家

uCharts是uniapp项目中常用的跨平台图表库。原文以折线图为例，先在HBuilderX中通过工具>插件安装进入DCloud搜索uchart，再把插件导入当前项目；项目目录中出现该插件后，到uCharts官网演示页找示例代码做最小验证。原文特别提示：示例若按Vue2写法复制，Vue3项目可能需要转换，案例采用Vue3+TS。

一、组件与数据结构
在页面中使用qiun-data-charts组件，type设为line，opts传入图表配置，chartData传入分类和系列数据。用interface约束ChartData，categories为字符串数组，series为包含name和data的对象数组。完整示例中，opts包含颜色数组、padding、enableScroll、legend、xAxis.disableGrid、yAxis.gridType与dashLength、extra.line.type/width/activeType等参数。

2. <template>
3.   <view class='charts-box'>
4.     <qiun-data-charts
5.       type='line'
6.       :opts='opts'
7.       :chartData='chartData'
8.     />
9.   </view>
10. </template>
12. <script lang='ts' setup>
13. import { ref, onMounted } from 'vue'
15. interface ChartData {
16.   categories: string[]
17.   series: {
18.     name: string
19.     data: number[]
20.   }[]
21. }
23. const chartData = ref<ChartData>({
24.   categories: [],
25.   series: []
26. })
28. const opts = {
29.   color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
30.   padding: [15, 10, 0, 15],
31.   enableScroll: false,
32.   legend: {},
33.   xAxis: {
34.     disableGrid: true
35.   },
36.   yAxis: {
37.     gridType: 'dash' as const,
38.     dashLength: 2
39.   },
40.   extra: {
41.     line: {
42.       type: 'straight' as const,
43.       width: 2,
44.       activeType: 'hollow' as const
45.     }
46.   }
47. }
49. const getServerData = () => {
50.   setTimeout(() => {
51.     const res: ChartData = {
52.       categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
53.       series: [
54.         { name: '成交量A', data: [35, 8, 25, 37, 4, 20] },
55.         { name: '成交量B', data: [70, 40, 65, 100, 44, 68] },
56.         { name: '成交量C', data: [100, 80, 95, 150, 112, 132] }
57.       ]
58.     }
59.     chartData.value = JSON.parse(JSON.stringify(res))
60.   }, 500)
61. }
63. onMounted(() => {
64.   getServerData()
65. })
66. </script>
68. <style scoped>
69. .charts-box {
70.   width: 100%;
71.   height: 300px;
72. }
73. </style>

复制代码

二、配置抽离
原文把opts抽成config/chartConfig.ts，导出lineChartOpts，再在组件中导入。这样多页面复用折线图配置，避免重复维护颜色、坐标轴和line样式。

2. // config/chartConfig.ts
3. export const lineChartOpts = {
4.   color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
5.   padding: [15, 10, 0, 15],
6.   enableScroll: false,
7.   legend: {},
8.   xAxis: { disableGrid: true },
9.   yAxis: { gridType: 'dash', dashLength: 2 },
10.   extra: { line: { type: 'straight', width: 2, activeType: 'hollow' } }
11. }

复制代码

组件中导入配置：

2. import { lineChartOpts } from '@/config/chartConfig'
3. const opts = lineChartOpts

复制代码

三、数据加载与渲染注意
getServerData用setTimeout 500毫秒模拟服务器返回，categories为2018到2023，series为成交量A/B/C三组数据。数据返回后通过深拷贝赋给chartData.value，再触发图表更新；onMounted中调用。charts-box设置width:100%和height:300px，高度缺失会导致图表不可见。微信小程序端可验证折线图效果。原文的opts参数可按接口返回结构复用；若采用配置抽离，组件中只保留数据请求与赋值逻辑，降低配置散落带来的维护成本。

适用场景：uniapp跨端页面需要轻量折线图展示，尤其微信小程序端；数据接口返回categories和series结构时，可直接映射。原文未涉及后端接口实现，示例使用定时器模拟响应，接入真实请求时替换getServerData内部逻辑即可。

总结：集成路径为插件安装与导入、官网示例验证、Vue3+TS组件接入、opts抽离、模拟数据渲染、小程序端确认。代码重点在ChartData类型、opts参数和深拷贝赋值。

热心网友1

感谢楼主分享，这篇把 uCharts 折线图在 uniapp 里的落地路径讲得挺清楚的。Vue3+TS 这块用 interface 约束 ChartData，categories 和 series 的结构一眼就能看明白，对后面接真实接口很友好。opts 抽到 config 里复用这个做法很实用，多页面用同一套折线图配置时确实能省不少维护成本。另外提醒高度必须给 charts-box 设上这一点很关键，样式里漏了 height 图表直接不显示，这个坑挺常见的。还有数据回来用深拷贝再赋给 chartData.value，能稳定触发更新，配合 onMounted 调用比较顺。setTimeout 模拟响应也方便先跑通渲染，后面替换成真实请求就行。整体步骤从插件安装到小程序端验证比较完整，收藏备用了。

热心网友7

感谢分享，这份教程挺完整的，从插件安装到 Vue3+TS 接入再到配置抽离，路径很清楚，尤其是 `ChartData` 用 interface 约束和 `as const` 处理枚举类型，这两处细节对 TS 项目很实用。 补充几个自己踩过的点，供参考： 1. 深拷贝那里用 `JSON.parse(JSON.stringify())` 在目前这种纯数字数组结构下没问题，但如果后面 series 里加入 `null` 或者别的特殊值会丢数据，简单场景够用，复杂时可以考虑 `structuredClone` 或者直接展开赋值。 2. `chartData.value` 赋值后一般能触发更新，但偶尔遇到数据变化图表没重绘的情况，可以试试给组件加个 `:key` 或者手动调用 updatData，小程序端尤其容易出现。 3. 高度问题确实是高频坑，楼主提得很到位。另外微信小程序里 canvas 层级较高，如果有弹窗或滚动区域需要注意遮挡，必要时用 `canvas2d` 或者调整 `enableScroll`。 4. 配置抽离成 config 文件很赞，建议给 `lineChartOpts` 也补个类型（比如 `Partial` 之类），这样以后改参数时编辑器能直接提示，不容易拼错 `gridType`、`activeType` 这些枚举值。 5. 如果后面要接真实接口，建议在 `getSer

热心网友1

感谢分享，正好最近也在 uniapp 里折腾折线图，这篇把 Vue3+TS 的坑点基本都点到了。补充几个自己踩过的细节，供后面的人参考： 一是 opts 里的字面量类型，gridType、line.type、activeType 这些如果不加 as const，TS 会把它们推断成 string，传给组件时类型对不上就报红。楼主示例里都加了 as const，但抽到 config/chartConfig.ts 之后如果只写普通对象导出，类型又会被放宽，建议在配置文件里直接给 opts 标一个明确的类型（或者照样加 as const），不然组件那边又得重新断言一遍。 二是深拷贝赋值那块，JSON.parse(JSON.stringify()) 确实能稳妥触发更新，但数据量大的时候略费性能，数据不复杂的话展开运算符或者 structuredClone 也能用。另外如果只是往 categories 里 push，大概率图表不刷新，所以统一走替换引用的方式比较省心。 三是高度问题，charts-box 必须给确定高度这点太真实了，我第一次跑就是白屏，查了半天才发现是父容器没撑开。顺带一提，如果页面里包了 flex 布局，记得给容器加个 flex: 1 或者 min-height，不然 100% 也可能算不出来。 四是数据为空的时候，首屏 chartData 里 categories 和 s