uniapp项目使用ucharts实现折线图详细讲解（案例）

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

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

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

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

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

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

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

<template>
  <view class="charts-box">
    <qiun-data-charts
      type="line"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

// 定义图表数据类型
interface ChartData {
  categories: string[]
  series: {
    name: string
    data: 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项目里面实现了