uniapp中使用 ucharts图表方法

ucharts 官网有详细文档说明，可以查阅使用方法和一些图标配置方法
ucharts官网

一、项目框架说明

uniapp项目 vue3 + <script setup>

二、安装

1、执行npm命令：

npm i @qiun/uni-ucharts

如果是微信小程序项目使用ucharts 则 下载 对应组件文件，

npm i @qiun/wx-ucharts

其他类型的也有对应的组件文件，可以查阅官网下载

其他原生小程序组件获取文件方式：

三、复制 npm 下载的依赖包文件到项目对应文件夹下

提示：uniapp 中 使用组件形式的ucharts时，一定要下载的文件复制到自己项目对应文件夹下，（ps：其他小程序项目使用 ucharts 方法可以查阅 ucharts官方文档~）

找到 npm 下载到 “node_modules” 依赖包文件夹“@qiun\uni-ucharts\components”,
将 除了 “ static” 文件夹的其他文件夹复制到自己项目 根目录下的 “components”文件夹下，“qiun-title-bar” 文件可以不复制
“ static” 文件夹下的文件复制到 自己项目根目录 的“ static” 文件夹下

本地项目：

四、使用图表组件

1、在 <script setup> 中添加 图表配置、图表数据

opts 添加 图表配置
chartData 添加图表数据，categories 添加 x轴 坐标分类名称，series 添加y轴对应每个分类的数据值，
categories、series 是数组格式~

具体配置可以查阅 ucharts 官网文档，这里进行了简单示例：

默认 y 轴是没有单位的，如果想要加单位描述，可以添加设置，

代码示例：

// 图表配置
const opts = ref({
  color: ['#1890FF'],
  padding: [15, 15, 0, 0],
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: true,  // 如果要设置y轴描述，要开启该设置
    data: [
      {
        title: '次'  //y轴坐标描述
      }
    ]
  },
  extra: {
    line: {
      type: 'curve',
      width: 2
    }
  },
})


// 图表数据
const chartData = {
	categories: ['05-01', '05-02', '05-03', '05-04', '05-05', '05-06', '05-07'],
    series: [{
      name: '请求总数',
      data: [30, 0, 50, 10, 60, 20, 100]
    }]
}

如果有好几条曲线数据，设置 series 值，

代码示例：

series = [
      {
        name: '总计费条数',
        data: [10, 0, 50, 10, 10, 20, 80]
      },
      {
        name: '总请求次数',
        data: [20, 0, 50, 10, 20, 20, 60]
      },
      {
        name: '总成功请求',
        data: [50, 0, 50, 10, 0, 20, 10]
      }
    ]

可以查看演示示例，找到自己想要的图标样式，查看对应代码，然后根据实际情况进行设置：

根据实际情况，设置对应图表配置和图表数据，详细配置可以查阅 ucharts 官网文档~ucharts官网文档

2、在 <template> 中使用 图表组件

type 可以设置图表类型，我用的 是曲线图，属于折线图的一种，设置的 type=“line”

代码示例：

<qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartData"
      />

如果不想图表加载效果，可以添加配置 :loadingType = “0”，例如：

<qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartData"
        :loadingType = "0"
      />

y轴设置了描述示例图：