一、去插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=271
二、把components和static里面的文件复制到自己的项目中
三、使用:
<template>
<view class="qiun-columns">
<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>
</view>
</template>
<script>
import uCharts from '@/components/u-charts/u-charts.js';
import { isJSON } from '@/common/checker.js';
var _self;
var canvaRing=null;
export default {
data() {
return {
cWidth:'',
cHeight:'',
pixelRatio:1,
textarea:''
}
},
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.ucharts.cn/data.json',
data:{
},
success: function(res) {
console.log(res.data.data)
let Ring={series:[]};
//这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
Ring.series=res.data.data.Ring.series;
//自定义文案示例,需设置format字段
for(let i = 0 ;i < Ring.series.length;i++){
Ring.series[i].format=()=>{return Ring.series[i].name+Ring.series[i].data};
}
_self.textarea = JSON.stringify(res.data.data.Ring);
_self.showRing("canvasRing",Ring);
},
fail: () => {
_self.tips="网络错误,小程序端请检查合法域名";
},
});
},
showRing(canvasId,chartData){
canvaRing=new uCharts({
$this:_self,
canvasId: canvasId,
type: 'ring',
fontSize:11,
padding:[5,5,5,5],
legend:{
show:true,
position:'bottom',//解释小点在下方
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
}
},
});
},
// touchRing(e){
// canvaRing.touchLegend(e, {
// animation : false
// });
// canvaRing.showToolTip(e, {
// format: function (item) {
// return item.name + ':' + item.data
// }
// });
// },
// changeData(){
// if(isJSON(_self.textarea)){
// let newdata=JSON.parse(_self.textarea);
// canvaRing.updateData({
// series: newdata.series,
// categories: newdata.categories
// });
// }else{
// uni.showToast({
// title:'数据格式错误'
// // image:'../../../static/images/alert-warning.png'
// })
// }
// }
}
}
</script>
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
</style>
效果图: