图表示例

雷达图基本用法 - 图1

标准数据格式

  1. Radar: {
  2.     categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
  3.     series: [{
  4.         name: '成交量1',
  5.         data: [90, 110, 165, 195, 187, 172]
  6.     }, {
  7.         name: '成交量2',
  8.         data: [190, 210, 105, 35, 27, 102]
  9.     }]
  10. }

调用方法

  1. canvaRadar=new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'radar',
  5.     fontSize:11,
  6.     legend:true,
  7.     background:'#FFFFFF',
  8.     pixelRatio:_self.pixelRatio,
  9.     animation: true,
  10.     dataLabel: true,
  11.     categories: chartData.categories,
  12.     series: chartData.series,
  13.     width: _self.cWidth*_self.pixelRatio,
  14.     height: _self.cHeight*_self.pixelRatio,
  15.     extra: {
  16.         radar: {
  17.             max: 200//雷达数值的最大值
  18.         }
  19.     }
  20. });

完整代码示例

  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="canvasRadar" id="canvasRadar" class="charts"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaRadar=null;
  16.     export default {
  17.         data() {
  18.             return {
  19.                 cWidth:'',
  20.                 cHeight:'',
  21.                 pixelRatio:1,
  22.             }
  23.         },
  24.         onLoad() {
  25.             _self = this;
  26.             this.cWidth=uni.upx2px(750);
  27.             this.cHeight=uni.upx2px(500);
  28.             this.getServerData();
  29.         },
  30.         methods: {
  31.             getServerData(){
  32.                 uni.request({
  33.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  34.                     data:{
  35.                     },
  36.                     success: function(res) {
  37.                         console.log(res.data.data)
  38.                         let Radar={categories:[],series:[]};
  39.                         Radar.categories=res.data.data.Radar.categories;
  40.                         Radar.series=res.data.data.Radar.series;
  41.                         _self.showRadar("canvasRadar",Radar);
  42.                     },
  43.                     fail: () => {
  44.                         _self.tips="网络错误，小程序端请检查合法域名";
  45.                     },
  46.                 });
  47.             },
  48.             showRadar(canvasId,chartData){
  49.                 canvaRadar=new uCharts({
  50.                     $this:_self,
  51.                     canvasId: canvasId,
  52.                     type: 'radar',
  53.                     fontSize:11,
  54.                     legend:true,
  55.                     background:'#FFFFFF',
  56.                     pixelRatio:_self.pixelRatio,
  57.                     animation: true,
  58.                     dataLabel: true,
  59.                     categories: chartData.categories,
  60.                     series: chartData.series,
  61.                     width: _self.cWidth*_self.pixelRatio,
  62.                     height: _self.cHeight*_self.pixelRatio,
  63.                     extra: {
  64.                         radar: {
  65.                             max: 200//雷达数值的最大值
  66.                         }
  67.                     }
  68.                 });
  69.             }
  70.         }
  71.     }
  72. </script>
  74. <style>
  75.     /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  76.     .qiun-charts {
  77.         width: 750upx;
  78.         height: 500upx;
  79.         background-color: #FFFFFF;
  80.     }
  82.     .charts {
  83.         width: 750upx;
  84.         height: 500upx;
  85.         background-color: #FFFFFF;
  86.     }
  87. </style>