u-chart

1.前言

uni-app能用的图表插件太少，这是唯一能用，虽然官方声称 傻瓜式 配置，但是在我看来异常繁琐，可选的配置项一大堆统统堆到demo里面，导致上手非常困难。既然踩了坑，我就记录下来。

2.基本使用

(1)引入插件

import uCharts from '@/libs/u-charts/u-charts.min.js';

(2)准备容器

<canvas canvas-id="canvasRing" id="canvasRing" class="canvasRing"></canvas>

(3)设定容器宽度(这个插件不能自适应容器的宽高，除了要设定容器的宽度，还要设定图表的宽度，建议使用rpx)

.canvasRing{
    width:450rpx;
}

(4)传入配置实例化

new uCharts({
	canvasId: "canvasRing",//容器id
	type: 'ring',//类型
	series: this.ring_data,//数据
	width: uni.upx2px(450),//宽
	height: 150,//高
	extra: {
		pie: {
			offsetAngle: 0,
			ringWidth: 10,
			labelWidth:15
		}
	},
})