图表示例

饼图右侧图例 - 图1

uCharts2.0以下版本是不支持改变图例位置的，朋友们可以暂时用view自己做个图例，这样就解决了这个问题，不要仅仅局限于插件本身功能。

标准数据格式

  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:false,
  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. });

完整代码示例

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