前言

新项目是一个微信小程序。由于未来可能需要跨终端开发，并且为了降低开发成本，所以选择了uni-app框架来进行小程序的开发。

项目需要在小程序上展示各种图表。网页版用的是强大的，但是由于官方没有专门的手机版（有和微信团队一起开发的微信版，但是不能跨终端），虽然网上有各种个人适配版本，但它们都有一些问题。

因此，经过综合考虑，最终的选择结果是使用专门适配uni-app的移动图表插件。

我这里就不详细说了。本文主要记录使用过程中遇到的各种陷阱。

本文使用的方法是组件工具。

另外，官方文档对于一些问题其实也提供了相应的解决方案，并且提供的在线配置工具也可以轻松看到调整后的效果。当然，这是收费的，一年30元，终身100元。关于收费问题我就不过多评论了，仁者见仁智者见智。毕竟，如果只是使用的话，是不需要付费的。为了方便开发，我暂时开放一年。

1、开启后渲染位置不正确。

先说结论：模拟器和真机的环境是不一样的。如果模拟器上出现位置问题，不用担心。在真机上是正常的。

界面性能更好，支持同层渲染。启用的方法是在组件中添加：=“true”。

<qiun-data-charts :type="chartsShowType" :chartData="chartsData" :opts="opts" :ontouch="true" :canvas2d="true" :canvasId="canvasId" />

需要注意的是，打开后必须传入，而且一般是随机字符串，不能以数字开头。这里的id可以通过随机生成字符串来生成。 （但其实官方已经内置了组件内部随机生成ID的方法，即使你不传，内部也会自动生成，省去了一些麻烦，如果没有特殊需求，你可以就是过不了。）

打开这个界面后，微信开发工具中的模拟器中图表定位出现问题：

好人，你能看到这个吗？所以我尝试了各种风格，但没有任何效果。

后来查阅资料得知，开启小程序2D模式后，由于模拟器环境与真机环境的差异，图表在模拟器上会出现穿透问题，但在上却是正常的真机。由于小程序最终会在真机上运行，​​因此建议忽略模拟器上的穿透问题。当需要在模拟器上看到调整结果时，可以暂时关闭2d模式，想在真机上看到效果时再添加。

2、用-view换行后，提示窗口位置不正确。

如果需要在同一个情况下垂直显示多个图表，自然需要使用-view组件来实现垂直滚动。但是使用-view封装了封装的组件后，你会发现点击图表时的决策点会不一样。出现问题。我单击了该行，但最终单击了下面的图例......

这里官方文档提供了解决方案。如果您以原生方式绘制，则需要自己更正坐标：

如果不显示或者显示位置不对，可能是外层被-view包裹或者父元素定位，导致事件混乱。解决方案：要将错误的坐标处理回正确的点击坐标，需要在 中加上或减去部分 x、y 坐标。具体数值可通过拆掉外包装并打印来计算，无需拆掉外包装。

但如果你使用的是组件方式，那么官方已经给你提供了封装的属性，你直接使用就可以解决问题。

非常顺利：

<qiun-data-charts :type="chartsShowType" :chartData="chartsData" :opts="opts":ontouch="true" :canvasId="canvasId" :inScrollView="true"/>

3.折线图图例的线宽太长。如果我想把它变小该怎么办？

默认折线图图例线宽如下：

传说有点太长了。现在有需要把它做得更小，但是官方文档没有提供相应的接口。我应该怎么办？还能做的就是更改源代码。

找到并打开插件目录下的u-.js文件，全局搜索图例绘制方法，跳转到(item.)这个片段：

switch (item.legendShape) { case 'line': context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix); context.fillRect(startX, startY + 0.5 * lineHeight - 4 * opts.pix + 1, 10 * opts.pix, 6 * opts.pix); break; case 'triangle': context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix); context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix); context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix); context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix); break; case 'diamond': context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix); context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight); context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix); context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight); context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix); break; case 'circle': context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight); context.arc(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight, 5 * opts.pix, 0, 2 * Math.PI); break; case 'rect':

context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix); context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix); break; case 'square': context.moveTo(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix); context.fillRect(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix); break; case 'none': break; default: context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix); context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix); }

可以看出，这段代码是根据图表类型来绘制图例的，所以case 'line'就是折线图。我们再看一下 () 和 () 方法。其实直接改变矩形填充方法()的第三个参数就可以了。 ，但是如果只改变这部分的话，图例的位置会有点歪，所以起点也需要调整。调整前后的代码如下：

调整前：

context.moveTo(startX, startY + 0.5 * lineHeight - 2 * opts.pix); context.fillRect(startX, startY + 0.5 * lineHeight - 2 * opts.pix, 15 * opts.pix, 4 * opts.pix);

调整后：

context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix); context.fillRect(startX, startY + 0.5 * lineHeight - 4 * opts.pix + 1, 10 * opts.pix, 6 * opts.pix);

具体调整量可以根据自己的需要慢慢调整。

4.图例放置到图表上后，X轴文本未完全显示（打开旋转）并且图例被数据文本覆盖。

问题如下图所示。这很容易改变。您可以通过设置直接修改边距。以下代码设置仅供参考。具体数值你可以自己尝试一下。

opts: { padding: [15,10,5,15], // 画布填充边距[上,右,下,左]，Array格式，修改前为[15,10,0,15] legend: { margin: 10, // 图例外侧填充边距，默认为5 } }

修改后：

此外，这里还有一种更改图例相对于图表的位置的方法。下面是把图例放在顶部的例子（其实官方文档里是这么写的）：

opts: { legend: { position: "top" } }

5.添加动态切换图表类型

实在没想到的是，不支持图表类型的动态切换……

所以没办法，只能自己改源码了。

由于opts和sum可以动态更新，根据官方文档的指导，动态更新是通过实现的，所以打开qiun-data-.vue，跳转到这一段：

optsProps: { handler(val, oldval) { if (typeof val === 'object') { if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) { this.checkData(this.drawData); } } else { this.mixinDatacomLoading = false; this._clearChart(); this.showchart = false; this.mixinDatacomErrorMessage = '参数错误：opts数据类型错误'; } }, immediate: false, deep: true },

关键代码是this.(this.);，用于重绘图表。如果要动态改变类型，则需要监听改变类型的属性类型。由于传入的值是字符串，所以只需判断前后的值是否一致即可。代码如下：

type: { hanlder(val, oldval) { if (val !== oldval) { this.checkData(this.drawData); } } }

至此，就可以实现图表类型的动态切换。如果你想增加一些判断或者其他要求，在这个基础上改一下就可以了。

PS：如果上面的代码不行，可以尝试下面的写法：

type(val, oldval) { if (val !== oldval) { this.checkData(this.drawData); } }

两种写法其实是一样的，但是不知道为什么第一种写法不生效。

6.图表不能水平拖动

根据官方文档，要启用水平拖动需要设置以下两点：

opts: { enableScroll: true }

<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />

设置好并运行后发现，虽然在模拟器上出现了滚动条并且可以正常拖动，但是在真机调试时却无法拖动。

如果您遇到这种情况，可能是因为 -view 视图容器放置在组件外部。如果是这种情况，您可以尝试在 -view 容器上将属性 -x 设置为 true，这应该可以解决此问题。

<scroll-view scroll-x="true">scroll-view>

7.增加图表横屏显示功能

由于手机屏幕宽度的限制，当数据量较大时，观看体验并不是很好，所以横屏显示的功能是必要的。好在官方提供了横屏显示的功能，可以省去手动修改的麻烦。麻烦，但是实现的时候还是需要注意一些事情。

详情参见：使用小程序添加图表横屏显示功能

8.如何添加图例下拉显示/左右滚动功能

当数据项较多时，会显示很多图例。由于移动设备的屏幕比较小，并且默认的查看模式是竖屏，这会导致下面的图表被大幅度压缩，如下图（图中间）有一个奇怪的箭头，忽略暂时这样）

更好的办法是添加图例下拉显示/左右滚动的功能。由于这个涉及到的东西比较多，相对来说比较困难，所以后面我会单独写一篇博文来详细阐述解决思路和具体代码。 ，然后链接到这里。首先是预览。