正文:
当我们使用echart官方的雷达图例子时,我们会发现它是自动换行展示的
但是到了小程序这边的时候,你会发现他它是一行展示的。
因为用echart基本上都不会去背配置项,于是查了查官网才知道有这个选项可以控制:tooltip.formatter
所以,我这边直接就提供我实现的代码
Component({
data: {
chartData: {
legendData: [{
name: '好学卡',
max: 20
}, {
name: '健体卡',
max: 20
}, {
name: '文明卡',
max: 20
}, {
name: '劳动卡',
max: 20
}, {
name: '艺术卡',
max: 20
}],
lizi: [{
value: [10, 9, 4, 8, 5],
name: '个人',
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
},
{
value: [11, 12, 13, 14, 15],
name: '班级平均',
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
}],
},
methods:{
line(chartData) {
let option = {
tooltip: {
confine: true,
enterable: true, //鼠标是否可以移动到tooltip区域内
// 这是重点
formatter: function (param) {
return param.name + '\n' + chartData.legendData[0].name + ':' + param.value[0] + '\n' +
chartData.legendData[1].name + ':' + param.value[1] + '\n' +
chartData.legendData[2].name + ':' + param.value[2] + '\n' +
chartData.legendData[3].name + ':' + param.value[3] + '\n' +
chartData.legendData[4].name + ':' + param.value[4];
}
},
legend: {
data: ['个人', '班级平均'],
bottom: "6%"
},
radar: {
shape: 'circle',
indicator: chartData.legendData,
radius: 96, //缩放
},
calculable: false,
series: [{
type: 'radar',
data: this.data.lizi,
// 修改颜色
itemStyle: {
normal: {
// 文本配置
label: {
show: true,
// 颜色
textStyle: {
color: "black",
fontSize: 12,
}
},
}
},
}],
};
},
}
}
以上代码中,chartData.legendData是雷达图radar.indicator的属性,param是一个数组,里面包含value、name等雷达图数据属性。通过这个formatter我可以实现我们想触发提示时的任何内容格式。