uCharts高性能跨平台图表库，支持H5图表、APP图表、小程序图表（微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序、360小程序），支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、地图。

一套代码编到7个平台

在uni-app里面会使用到统计图，和echarts类似，因为经常有用到uni-app开发一些app和小程序相关的项目，也经常用到图表相关的插件，推荐ucharts给大家，个人感觉还是不错的，种类多也比较完善，

支持图表类型

饼图 pie
圆环图 ring
线图 line（直线、曲线）
柱状图 column（分组、堆叠、温度计）
区域图 area（直线、曲线）
雷达图 radar
圆弧进度图 arcbar
仪表盘 gauge
K线图 candle
混合图 mix（支持 Point、Line 直线曲线、Column、Area 直线曲线）
玫瑰图 rose（面积模式、半径模式）
词云图 word（横向、横纵混排）
漏斗图 funnel
地图 map

插件特点

改造后的插件可以跨端使用，支持 H5、小程序（微信/支付宝/百度/头条/QQ/360）、APP，调用简单方便、性能及体验极佳。
虽然没有 Echarts 及 F2 图表功能强大，但可以实现一套业务逻辑各端通用，并解决了支付宝小程序图表显示模糊等问题。
支持单页面多图表，demo 中单页 10 个图表，响应速度超快。
支持入场动画及 ToolTip 动画效果。
独特支持横屏模式。

为何不用 Echarts？

相比 Echarts 及 F2 的复杂的设置，本插件几乎等于傻瓜式的配置。
Echarts 在跨端使用更复杂，本插件只需要简单的两个 <canvas> 标签轻松区别搞定，代码整洁易维护。
Echarts 在 iOS 端图表显示错位，只能引用网页解决。
本插件打包后的体积相比 Echarts 小很多很多，所以性能更好。
如果您是 uni-app 初学者，那么强烈建议您使用 uCharts，并且目前可以跨全端通用，减少工作量，增强一致性体验。
图表样式均可自定义，懂 JS 的都可以读懂插件源码，直接修改 u-charts.js 源码即可。
本插件经过大量测试，反复论证并加以改造而成，请各位放心使用。

快速上手

代码示例：

<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">柱状图</view>
		</view>
		<view class="qiun-charts">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
			<!--#endif-->
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvaColumn=null;
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:''
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData(){
				uni.request({
					url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						//下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
						_self.serverData=res.data.data;
						let Column={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Column.categories=res.data.data.Column.categories;
						//这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据
						Column.series=res.data.data.Column.series;
						_self.showColumn("canvasColumn",Column);
					},
					fail: () => {
						console.log("网络错误，小程序端请检查合法域名");
					},
				});
			},
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					legend:true,
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
						  width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					  }
				});
			},
			changeData(){
				canvaColumn.updateData({
					series: _self.serverData.ColumnB.series,
					categories: _self.serverData.ColumnB.categories
				});
			}
		}
	}
</script>

<style>
page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
.qiun-padding{padding:2%; width:96%;}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex; flex-direction:column !important;}
.qiun-common-mt{margin-top:10upx;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
/* 通用样式 */
.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>

本人在uni-app小程序写的图表：

总结

uCharts在小程序端使用起来真的很方便的，几乎能满足我们所有的图表要求，确实比echarts好用的多，大家怎么看呢？

莫方教程网

专业程序员编程教程与实战案例分享

uCharts高性能跨全端图表

一套代码编到7个平台

支持图表类型

插件特点

为何不用 Echarts？

快速上手

总结