1.在Hbuildx里面的工具>插件安装，进入DCloud搜索uchart

2.点击对应的项目导入该插件

可以看到在该目录下有该插件

3.进入官网演示 - uCharts跨平台图表库，找一个示例代码测试一下，是否可以成功应用

因为这里使用的是vue2，如果你是vue3的项目，该段代码可能会有问题，建议可以先转换为vue3的写法

小tip：复制网站里面的该段代码，让AI帮你改成vue3的写法

本案例使用的是vue3+ts的写法：

<template><view class="charts-box"><qiun-data-chartstype="line":opts="opts":chartData="chartData"/></view>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue'// 定义图表数据类型
interface ChartData {categories: string[]series: {name: stringdata: number[]}[]
}// 响应式数据
const chartData = ref<ChartData>({categories: [],series: []
})// opts 配置（可抽离到 config 文件）
const opts = {color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],padding: [15, 10, 0, 15],enableScroll: false,legend: {},xAxis: {disableGrid: true},yAxis: {gridType: "dash" as const,dashLength: 2},extra: {line: {type: "straight" as const,width: 2,activeType: "hollow" as const}}
}// 模拟请求服务器数据
const getServerData = () => {setTimeout(() => {const res: ChartData = {categories: ["2018", "2019", "2020", "2021", "2022", "2023"],series: [{ name: "成交量A", data: [35, 8, 25, 37, 4, 20] },{ name: "成交量B", data: [70, 40, 65, 100, 44, 68] },{ name: "成交量C", data: [100, 80, 95, 150, 112, 132] }]}chartData.value = JSON.parse(JSON.stringify(res)) // 深拷贝模拟响应}, 500)
}// 页面加载完成后获取数据
onMounted(() => {getServerData()
})
</script><style scoped>
.charts-box {width: 100%;height: 300px;
}
</style>

你可以将 opts 抽离成独立文件，比如 config/chartConfig.ts：

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

然后在组件中导入：

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

4.效果展示（微信小程序端）

这样一个简单的折线图就在uniapp项目里面实现了