图表示例

圆环图基本用法 - 图1

标准数据格式

  1. "Ring": {
  2.   "series": [{
  3.     "name": "一班",
  4.     "data": 50
  5.   }, {
  6.     "name": "二班",
  7.     "data": 30
  8.   }, {
  9.     "name": "三班",
  10.     "data": 20
  11.   }, {
  12.     "name": "四班",
  13.     "data": 18
  14.   }, {
  15.     "name": "五班",
  16.     "data": 8
  17.   }]
  18. }

调用方法

  1. new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'ring',
  5.     fontSize:11,
  6.     legend:true,
  7.     title: {
  8.         name: '70%',
  9.         color: '#7cb5ec',
  10.         fontSize: 25*_self.pixelRatio,
  11.         offsetY:-20*_self.pixelRatio,
  12.     },
  13.     subtitle: {
  14.         name: '收益率',
  15.         color: '#666666',
  16.         fontSize: 15*_self.pixelRatio,
  17.         offsetY:30*_self.pixelRatio,
  18.     },
  19.     extra: {
  20.         pie: {
  21.           offsetAngle: -45,
  22.           ringWidth: 40*_self.pixelRatio,
  23.           lableWidth:15
  24.         }
  25.     },
  26.     background:'#FFFFFF',
  27.     pixelRatio:_self.pixelRatio,
  28.     series: chartData.series,
  29.     animation: true,
  30.     width: _self.cWidth*_self.pixelRatio,
  31.     height: _self.cHeight*_self.pixelRatio,
  32.     disablePieStroke: true,
  33.     dataLabel: true,
  34. });

lableWidth:15为必填参数，否则报错

完整代码示例

  1. <template>
  2.     <view class="qiun-columns">
  3.         <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
  4.             <view class="qiun-title-dot-light">环形图</view>
  5.         </view>
  6.         <view class="qiun-charts" >
  7.             <canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaRing=null;
  17.     export default {
  18.         data() {
  19.             return {
  20.                 cWidth:'',
  21.                 cHeight:'',
  22.                 pixelRatio:1,
  23.                 serverData:'',
  24.             }
  25.         },
  26.         onLoad() {
  27.             _self = this;
  28.             this.cWidth=uni.upx2px(750);
  29.             this.cHeight=uni.upx2px(500);
  30.             this.getServerData();
  31.         },
  32.         methods: {
  33.             getServerData(){
  34.                 uni.request({
  35.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  36.                     data:{
  37.                     },
  38.                     success: function(res) {
  39.                         console.log(res.data.data)
  40.                         let Ring={series:[]};
  41.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  42.                         Ring.series=res.data.data.Ring.series;
  43.                         _self.showRing("canvasRing",Ring);
  44.                     },
  45.                     fail: () => {
  46.                         _self.tips="网络错误，小程序端请检查合法域名";
  47.                     },
  48.                 });
  49.             },
  50.             showRing(canvasId,chartData){
  51.                 canvaRing=new uCharts({
  52.                     $this:_self,
  53.                     canvasId: canvasId,
  54.                     type: 'ring',
  55.                     fontSize:11,
  56.                     legend:true,
  57.                     title: {
  58.                         name: '70%',
  59.                         color: '#7cb5ec',
  60.                         fontSize: 25*_self.pixelRatio,
  61.                         offsetY:-20*_self.pixelRatio,
  62.                     },
  63.                     subtitle: {
  64.                         name: '收益率',
  65.                         color: '#666666',
  66.                         fontSize: 15*_self.pixelRatio,
  67.                         offsetY:30*_self.pixelRatio,
  68.                     },
  69.                     extra: {
  70.                         pie: {
  71.                           offsetAngle: -45,
  72.                           ringWidth: 40*_self.pixelRatio,
  73.                           lableWidth:15
  74.                         }
  75.                     },
  76.                     background:'#FFFFFF',
  77.                     pixelRatio:_self.pixelRatio,
  78.                     series: chartData.series,
  79.                     animation: true,
  80.                     width: _self.cWidth*_self.pixelRatio,
  81.                     height: _self.cHeight*_self.pixelRatio,
  82.                     disablePieStroke: true,
  83.                     dataLabel: true,
  84.                 });
  85.             },
  86.             touchRing(e){
  87.                 canvaRing.showToolTip(e, {
  88.                     format: function (item) {
  89.                         return item.name + ':' + item.data 
  90.                     }
  91.                 });
  92.             },
  93.         }
  94.     }
  95. </script>
  97. <style>
  98. page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
  99. .qiun-padding{padding:2%; width:96%;}
  100. .qiun-wrap{display:flex; flex-wrap:wrap;}
  101. .qiun-rows{display:flex; flex-direction:row !important;}
  102. .qiun-columns{display:flex; flex-direction:column !important;}
  103. .qiun-common-mt{margin-top:10upx;}
  104. .qiun-bg-white{background:#FFFFFF;}
  105. .qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
  106. .qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
  107. .qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  108. .charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  109. </style>