vue折线图

界面引入

<view class="chartsMain">
	<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
</view>

JS引入

import uCharts from "@/components/u-charts/u-charts.js";

data定义

// 圆环图
				"Ring": {
					"series": [{
						"name": "大小球",
						"data": 50
					}, {
						"name": "让球",
						"data": 30
					}, {
						"name": "角球",
						"data": 20
					}, {
						"name": "胜平负",
						"data": 18
					}, {
						"name": "半大",
						"data": 8
					}]
				},

js定义渲染

// 圆环图
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: true,
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							lableWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: _self.Ring.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},

效果