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項目里面實現了