新手快速上手ucharts的详细步骤

傻瓜式使用UCHARTS

在初次使用ucharts的时候，我发现很难在网站上找到对ucharts快速上手的详细讲解，以及我在使用ucharts时遇到的问题也很难找到解决办法。下面就是我自己快速上手ucharts的一个完整过程。

导入ucharts插件

ucharts插件安装地址：https://ext.dcloud.net.cn/plugin?id=271

ucharts官方网址API：https://www.ucharts.cn/v2/#/

1、导入上图红框ucharts插件至自己项目中并在uni-app安装成功后如下图：

2、 为了快速上手再导入一份黄框ucharts实例项目

简单粗暴引入所需图表

一、运行ucharts实例项目
1、找出自己所需的图表样式并在项目找到该图表代码所在位置（我以下方渐变色区域图为例）

2、将所需图表以及他的data简单粗暴的放入自己项目的当中

实例项目

自己项目

为了更直观好操作我把opts拿出来也放入data中（注意给父元素class='charts-box’加宽高）
3、此时我们就已经成功将所需图表引入到自己的项目当中

调接口渲染数据

1、请求接口并转换成所需数据格式


（可以看到这里我所需要的是上面两组数据—数组格式。后端返回的是对象所以我需要格式转换一下）
2、拿到了请求数据，把他放进我们的定义的data中


3、到这我们的数据就成功渲染至图表当中

以上就是快速上手使用ucharts的详细步骤
（在写ucharts的时候，我还发现几个对我来说刚上手时的难点比如弹框内容如何设置以及内容换行的问题，具体解决办法我会放到下一章详细讲解。）