ring环形图表

短命女 2023-02-15 05:23 2阅读 0赞

<template>
    	<view class="qiun-columns">
    		
    		<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>
    		
    		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
    			<view class="qiun-title-dot-light">环形图</view>
    		</view>
    		<view class="qiun-charts" >
    			
    			<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>
    			
    			
    			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
    			
    		</view>
    		
    		<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>
    		
    	</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=window.screen.availWidth; this.cHeight=uni.upx2px(400); 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); _self.changeData(); }, 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:'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: 20*_self.pixelRatio, }, title: { name: '收益率', color: '#666666', fontSize: 12*_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 { height: 400upx; background-color: #FFFFFF; } .charts { height: 400upx; background-color: #FFFFFF; } </style>