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 里面的东西),坏处就是,比如想把标题去掉,就得像我这些,不能不写。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值