Ucharts使用

原创已于 2023-08-21 11:34:49 修改 · 621 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-08-21 11:34:41 首次发布

uni-app 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在项目中下载并使用Ucharts插件，包括在插件市场查找、导入到项目、在线配置图表模型，以及创建简单柱状图的步骤。还提到了数据获取和注意事项。

Ucharts使用

一、下载插件

进入插件市场，搜索ucharts,选择使用插件
在这里插入图片描述
点击使用HBilder导入插件，导入到所需要导入的项目中去，也可以下载插件示例去看。

导入后项目中会出现这一插件

在这里插入图片描述

二、使用ucharts

进入ucharts官网，进入在线生成工具页面
在这里插入图片描述
在这个页面你就可以去配置你需要的图案模型了。

三、案例：简单柱状图

将配置好的组件代码，数据和样式复制，放入你代码组件中

在这里插入图片描述

上图中需要导入：
//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts'

在这里插入图片描述
组件中的type对应自定的配置名，此处为column
接下来复制刚刚官网页面的配置信息，将其放在文件夹中

此处配置信息可自己进行配置成自己想要的样子，在这里配置

打开刚刚导入的插件，找到以下文件夹，此处存放配置信息
在这里插入图片描述
打开刚刚导入的插件，找到以下文件夹，此处存放配置信息

接下来运行，就可以了