uniapp实现大气质量指标图（app端小程序端均支持，app-nvue不支持画布）

效果图如下：

思路：

1.首先我想到的就是使用图标库echarts或ucharts，可是找了找没有找到类似的。

2.其次我就想用画布来实现这个效果，直接上手。（app-vue和小程序均可以实现，但是在app-nvue页面不支持画布，尝试了一下再nvue页面直接导致程序闪退）

3.后来，使用手动创建一个竖向的类似效果。

注意：

1.app-nvue页面不支持画布效果，官方说引入插件支持，但直接导致闪退。

2.map很多参数app端仅支持app-nvue页面。

方法一 使用画布进行绘制（不支持app-nvue）

实现效果图如下

方法二 使用盒子创建竖向对应（比较笨拙，但是app-nvue页面只能这样来实现了）

这里我封装了一个方法

组件代码

调用组件

	
				

			

//数据初始化
	legendList: [], //图例信息

//传入数据
	this.legendList = JSON.stringify(legendList.data) //图例信息  

实现效果如下

总而言之，app-nvue页面有很大的性能提升，但总会牺牲一些东西来弥补。app-nvue页面css很多有局限性，仔细阅读文档。