uni-app使用u-charts

写下这篇文章是因为自己在使用它的时候踩了很多坑，记录一下也许会对其它开发者有些帮助。

下面说下我的使用方法

首先到gitee上把项目代码下载下来 gitee地址
这个是国内的下载比较快，也是官网推荐的
这里以uni的为例，如下目录是uni示例

 uCharts/示例项目/UNIAPP

在开发工具直接运行，可以直接运行到浏览器，只是显示效果，毕竟微信开发者工具有点笨重
下图是我随便点开了一个示例，最上面就是页面路径，到项目里找就行了

下面是对应的代码片段

<view class="qiun-columns">
		<!--#ifdef H5 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">页面地址</view>
		</view>
		<view class="qiun-bg-white qiun-padding">
		    <text>pages/basic/pie/ring</text>
		</view>
		<!--#endif-->
		<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="canvasRing" id="canvasRing" 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'}" @touchstart="touchRing"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
			<!--#endif-->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<ad unit-id="adunit-908b0a16e90e2a5f" ad-type="grid" grid-count="8" ad-theme="white"></ad>
		<!-- #endif -->
		<!--#ifdef H5 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">标准数据格式</view>
		</view>
		<view class="qiun-bg-white qiun-padding">
		    <textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea"/>
		</view>
		<view class="qiun-text-tips">Tips：修改后点击更新图表</view>
		<button class="qiun-button" @tap="changeData()">更新图表</button>
		<!--#endif-->
	</view>

import uCharts from '@/js_sdk/u-charts/u-charts.js';
showRing(canvasId,chartData){
canvaRing=new uCharts({
		$this:_self,
		canvasId: canvasId,
		type: 'ring',
		fontSize:11,
		padding:[5,5,5,5],
		legend:{
			show:true,
			position:'right',
			float:'center',
			itemGap:10,
			padding:5,
			lineHeight:26,
			margin:5,
			//backgroundColor:'rgba(41,198,90,0.2)',
			//borderColor :'rgba(41,198,90,0.5)',
			borderWidth :1
		},
		background:'#FFFFFF',
		pixelRatio:_self.pixelRatio,
		series: chartData.series,
		animation: false,
		width: _self.cWidth*_self.pixelRatio,
		height: _self.cHeight*_self.pixelRatio,
		disablePieStroke: true,
		dataLabel: true,
		subtitle: {
			name: '70%',
			color: '#7cb5ec',
			fontSize: 25*_self.pixelRatio,
		},
		title: {
			name: '收益率',
			color: '#666666',
			fontSize: 15*_self.pixelRatio,
		},
		extra: {
			pie: {
			  offsetAngle: 0,
			  ringWidth: 40*_self.pixelRatio,
			  labelWidth:15
			}
		},
	});
},

上面是代码 片段 ，可以看出它的用法是引入js，这就类似Echarts了，照着使用就行。

当然到这里还是没有结束，毕竟有很多人是跟我一样从uni的组件库下载的
直接上代码

<qiun-data-charts type="ring" :chartData="operatorDistributionChartData" :opts="operatorDistributionChartOption" />

data() {
	return {
		operatorDistributionChartData: {
			"series":[{"name":"一班","data":50},{"name":"二班","data":30},{"name":"三班","data":20},{"name":"四班","data":18},{"name":"五班","data":8}]
		},
		operatorDistributionChartOption: {
			subtitle: {
				name: ""
			},
			title: {
				name: ""
			}
		}
	}
}

如果你跟我用的也是一样的，用的这个叫秋云这个图表，它是再封装的
可以看到，一个参数是数据，一个参数是配置（就是new 里面的东西），坏处就是，比如想把标题去掉，就得像我这些，不能不写。