1.在Hbuildx里面的工具>插件安装，进入DCloud搜索uchart
2.点击对应的项目导入该插件
可以看到在该目录下有该插件
3.进入官网演示，找一个示例代码测试一下，是否可以成功应用
因为这里使用的是vue2，如果你是vue3的项目，该段代码可能会有问题，建议可以先转换为vue3的写法
小tip：复制网站里面的该段代码，让AI帮你改成vue3的写法
本案例使用的是vue3+ts的写法：
import { ref, onMounted } from 'vue'
// 定义图表数据类型
interface ChartData {
categories: string[]
series: {
name: string
data: number[]
}[]
}
// 响应式数据
const chartData = ref({
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()
})
.charts-box {
width: 100%;
height: 300px;
}
你可以将 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项目里面实现了
总结
到此这篇关于uniapp项目使用ucharts实现折线图的文章就介绍到这了,更多相关uniapp用ucharts实现折线图内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
