小程序echarts雷达图组件封装
由于业务需要学员和非学员数据的对比雷达图或者个人单次的雷达图，有时候显示legend类型有时候不需要显示。所以为了使用方便直接封装了echarts雷达图组件。需要的童鞋们！直接拿走，项目亲测有效。
实际项目展示：
(1)对比
（2）单个展示
代码讲解部分
真实使用时只需要组件传参：
(1)radarList为对象
(2)isShowLegend 当值为true显示legend否则不显示
radarList: {
name: '2021-09-09',
list: [{
name: '体型',
value: '80'
},
...
{
name: '机能',
value: '80'
},
{
name: '柔韧',
value: '80'
},
]
},
1.index.wxcss部分
.container {
width: 100%;
height: 500rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
ec-canvas {
width: 100%;
height: 100%;
}
2.index.wxml
3.index.js
注意：在引入ec-canvas/echarts前需要先去下载 ecomfe/echarts-for-weixin 后，直接复制ec-canavs到你的项目，然后再做如下操作
import echarts from "../../../../../miniprogram_npm/ec-canvas/echarts"
Component({
/**
* 组件的属性列表
*/
properties: {
from: {
type: String,
value: ""
},
radarList: {
type: Object,
value: {}
},
isShowLegend: {
type: Boolean,
value: true
}
},
/**
* 组件的初始数据
*/
data: {
ec: {
lazyLoad: true // 延迟加载
},
radarList: {},
// isShowLegend:true,
radarList1: {},
indicatorList: [],
legendList: [],
radarValueList: [],
},
/**
* 组件的方法列表
*/
methods: {
// 设置雷达图颜色
formatRadarColor($color1, $bgColor1, $bgColor2) {
return {
lineStyle: { //辐射区线条颜色
color: $color1 || '#1890FF'
},
itemStyle: { // 单个拐点标志的样式设置。
normal: {
color: $color1 || '#1890FF'
}
},
areaStyle: // 雷达图辐射区域的样式
{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: $bgColor1 || '#C2EDFF'
},
{
offset: 1,
color: $bgColor2 || '#BDE0FF'
}
]
)
},
}
},
// 格式化传参数据----------------------
formatData(radarList, $color1, $bgColor1, $bgColor2) {
let indicatorList = [];
let radarValueItem = [];
radarList.list.forEach(item => {
indicatorList.push({
name: item.name,
max: 100
})
radarValueItem.push(item.value)
})
indicatorList[0].axisLabel = { //设置坐标轴上文字颜色
show: true,
fontSize: 12
}
// 1: '#1890FF','#36C8FF','#2494FF'
let a = this.formatRadarColor($color1, $bgColor1, $bgColor2)
this.data.radarValueList.push({
value: radarValueItem,
name: radarList.name,
...a
})
this.data.legendList.push(radarList.name)
this.setData({
indicatorList,
radarValueList: this.data.radarValueList,
legendList: this.data.legendList
})
},
// 初始化雷达图--------------------
init_radarMap: function () {
// 创建雷达图实例
this.data.radarMapComponnet && this.data.radarMapComponnet.init((canvas, width, height, dpr) => {
const radarMap = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
// 取消legend的事件 此事件暂时未达到预期效果
radarMap.on('legendselectchanged', function (params) {
radarMap.setOption({
legend: {
selected: {
[params.name]: true
}
}
})
})
// 设置相关配置项
radarMap.setOption(this.getRadarMapOption());
return radarMap;
});
},
// 雷达图的配置项---------------------
getRadarMapOption: function () {
this.formatData(this.data.radarList)
if (Object.keys(this.data.radarList1).length) {
this.formatData(this.data.radarList1, '#FA6561', '#F3E7E5', '#FFEAE9')
}
return {
backgroundColor: "#ffffff",
xAxis: {
show: false
},
yAxis: {
show: false
},
legend: {
data: this.data.legendList,
type: 'scroll',
orient: 'horizontal', //设置栏位如何显示,横轴或纵轴
bottom: '0',
left: this.data.legendList.length == 2 ? '10%' : '30%',
show: this.data.isShowLegend
},
radar: {
// shape: 'circle',
indicator: this.data.indicatorList,
radius: 65, //缩放 防止文字遮挡
center: ['50%', '50%'], //位置
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
lineStyle: {
color: '#BFBFBF',
// 坐标轴线线的颜色。
width: 1,
// 坐标轴线线宽。
type: 'solid',
// 坐标轴线线的类型。
}
},
splitArea: {
show: true,
areaStyle: {
color: '#fff'
// 图表背景网格的颜色
}
},
splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
lineStyle: {
color: '#e9e9e9',
// 分隔线颜色
width: 1,
// 分隔线线宽
}
},
name: { //文本名称样式
textStyle: {
color: 'rgba(0, 0, 0, 0.45)',
}
},
},
series: [{
type: 'radar',
symbolSize: 0, //设置拐点的圈为0，不显示
data: this.data.radarValueList,
}]
};
}
},
lifetimes: {
attached() {
// 获取ec-canvas组件
this.setData({
radarMapComponnet: this.selectComponent("#mychart-dom-graph")
})
// 初始化雷达图数据
this.init_radarMap()
}
}
})