## **图表示例**
:-: 
## **标准数据格式**
```
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>
```
- uCharts简介
- 图表预览
- 快速上手
- 常见问题
- API参数
- 通用基础配置项
- 数据列表配置项
- 标题配置项
- 坐标轴配置项
- 图例配置项
- 扩展配置项
- 圆弧进度图
- 仪表盘
- 雷达图
- 柱状图
- 饼图圆环图
- 玫瑰图
- 折线图
- 区域图
- K线图
- 词云图
- 漏斗图
- 地图
- 条状图
- 标记线
- ToolTip
- 其他配置
- 方法 & 事件
- 更新图表数据
- 图例点击交互
- 停止动画效果
- 添加移除事件监听
- 获取图表点击序列编号
- 获取图例点击序列编号
- ToolTip方法
- 图表拖拽事件
- 放大或缩小图表
- 图表渲染完成事件
- 入门配置示例
- 图表区域详解
- 绘制X坐标轴网格
- 绘制Y坐标轴网格
- 隐藏X轴（不含网格）
- 隐藏Y轴（不含网格）
- 启用X轴滚动条及拖拽
- 绘制Y轴标题
- 隐藏X轴下方图例
- 隐藏数据点标识
- 隐藏数据点标签
- 进阶配置示例
- ToolTip配置
- uni-app示例
- 饼图
- 饼图基本用法
- 饼图右侧图例
- 圆环图
- 圆环图基本用法
- 玫瑰图
- 玫瑰图基本用法
- 线图
- 线图基本用法
- 柱状图
- 基本柱状图
- 温度计式图表
- 堆叠柱状图
- 横屏模式
- 区域图
- 区域图基本用法
- 雷达图
- 雷达图基本用法
- 圆弧进度图
- 圆弧进度图基本用法
- 整圆进度图基本用法
- 仪表盘
- 仪表盘基本用法
- K线图
- K线图基本用法
- 条状图
- 条状图基本用法
- 混合图
- 混合图基本用法
- 词云图
- 词云图基本用法
- 漏斗图
- 漏斗图基本用法
- 地图
- 地图基本用法
- 更新记录
- 改造uCharts打造专属图表
- uni-app实战教程