## **图表示例** :-: ![](https://box.kancloud.cn/b56800073805b9f4a21438c142c45502_468x342.gif) ## **标准数据格式** ``` chartData: { categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'], series: [{ name: '成交量1', data: [90, 110, 165, 195, 187, 172] }, { name: '成交量2', data: [190, 210, 105, 35, 27, 102] }] } ``` ## **调用方法** ``` canvaRadar=new uCharts({ $this:this, canvasId: canvasId, type: 'radar', fontSize:11, legend:{show:true}, background:'#FFFFFF', pixelRatio:1, animation: true, dataLabel: true, categories: chartData.categories, series: chartData.series, width: this.cWidth, height: this.cHeight, extra: { radar: { max: 200//雷达数值的最大值 } } }); ``` ## **完整代码示例** ``` <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-charts" > <canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas> </view> </view> </template> <script> import uCharts from '@/components/u-charts/u-charts.js'; var _self; var canvaRadar=null; export default { data() { return { cWidth:'', cHeight:'', pixelRatio:1, } }, onLoad() { _self = this; this.cWidth=uni.upx2px(750); this.cHeight=uni.upx2px(500); this.getServerData(); }, methods: { getServerData(){ uni.request({ url: 'https://www.ucharts.cn/data.json', data:{ }, success: function(res) { console.log(res.data.data) let Radar={categories:[],series:[]}; Radar.categories=res.data.data.Radar.categories; Radar.series=res.data.data.Radar.series; _self.showRadar("canvasRadar",Radar); }, fail: () => { _self.tips="网络错误,小程序端请检查合法域名"; }, }); }, showRadar(canvasId,chartData){ canvaRadar=new uCharts({ $this:_self, canvasId: canvasId, type: 'radar', fontSize:11, legend:{show:true}, background:'#FFFFFF', pixelRatio:_self.pixelRatio, animation: true, dataLabel: true, categories: chartData.categories, series: chartData.series, width: _self.cWidth*_self.pixelRatio, height: _self.cHeight*_self.pixelRatio, extra: { radar: { max: 200//雷达数值的最大值 } } }); } } } </script> <style> /*样式的width和height一定要与定义的cWidth和cHeight相对应*/ .qiun-charts { width: 750upx; height: 500upx; background-color: #FFFFFF; } .charts { width: 750upx; height: 500upx; background-color: #FFFFFF; } </style> ```