图表示例

饼图基本用法 - 图1

标准数据格式

  1. "Pie": {
  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: 'pie',
  5.     fontSize:11,
  6.     legend:true,
  7.     background:'#FFFFFF',
  8.     pixelRatio:_self.pixelRatio,
  9.     series: chartData.series,
  10.     animation: true,
  11.     width: _self.cWidth*_self.pixelRatio,
  12.     height: _self.cHeight*_self.pixelRatio,
  13.     dataLabel: true,
  14.     extra: {
  15.         pie: {
  16.           lableWidth:15
  17.         }
  18.     },
  19. });

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="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaPie=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 Pie={series:[]};
  41.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  42.                         Pie.series=res.data.data.Pie.series;
  43.                         _self.showPie("canvasPie",Pie);
  44.                     },
  45.                     fail: () => {
  46.                         _self.tips="网络错误，小程序端请检查合法域名";
  47.                     },
  48.                 });
  49.             },
  50.             showPie(canvasId,chartData){
  51.                 canvaPie=new uCharts({
  52.                     $this:_self,
  53.                     canvasId: canvasId,
  54.                     type: 'pie',
  55.                     fontSize:11,
  56.                     legend:true,
  57.                     background:'#FFFFFF',
  58.                     pixelRatio:_self.pixelRatio,
  59.                     series: chartData.series,
  60.                     animation: true,
  61.                     width: _self.cWidth*_self.pixelRatio,
  62.                     height: _self.cHeight*_self.pixelRatio,
  63.                     dataLabel: true,
  64.                     extra: {
  65.                         pie: {
  66.                           lableWidth:15
  67.                         }
  68.                     },
  69.                 });
  70.             },
  71.             touchPie(e){
  72.                 canvaPie.showToolTip(e, {
  73.                     format: function (item) {
  74.                         return item.name + ':' + item.data 
  75.                     }
  76.                 });
  77.             },
  78.         }
  79.     }
  80. </script>
  82. <style>
  83. page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
  84. .qiun-padding{padding:2%; width:96%;}
  85. .qiun-wrap{display:flex; flex-wrap:wrap;}
  86. .qiun-rows{display:flex; flex-direction:row !important;}
  87. .qiun-columns{display:flex; flex-direction:column !important;}
  88. .qiun-common-mt{margin-top:10upx;}
  89. .qiun-bg-white{background:#FFFFFF;}
  90. .qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
  91. .qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
  92. .qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  93. .charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
  94. </style>