微信小程序使用echart雷达图时的tooltip展示格式

796 阅读1分钟

正文:

当我们使用echart官方的雷达图例子时,我们会发现它是自动换行展示的

image.png

但是到了小程序这边的时候,你会发现他它是一行展示的。

image.png

因为用echart基本上都不会去背配置项,于是查了查官网才知道有这个选项可以控制:tooltip.formatter

image.png

所以,我这边直接就提供我实现的代码

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,
                                }
                            },
                        }
                    },
                }],
            };        
        },
    }
}

image.png

以上代码中,chartData.legendData是雷达图radar.indicator的属性,param是一个数组,里面包含value、name等雷达图数据属性。通过这个formatter我可以实现我们想触发提示时的任何内容格式。