echarts雷达图中如何能够在分割线上显示数值?

翻遍了echarts文档没有发现哪项设置能够显示,官方示例和Gallery中也都有没有符合要求的

想要的效果是这样,在这个轴上显示一个数值方便查看和对比
图片描述

Gallery中看到一个符合要求的,但是他的例子只不过是把数据的值设置为相同的,然后显示值达到类似的效果,我的图数据多,每个值显示出来会很乱,而且也不可能每个值都相同.
图片描述

上代码

    $.ajax({
        type: 'get',
        url: '../csv2json/ttl-G1-radar.json',//请求数据的地址
        dataType: 'json',        //返回数据形式为json
        success: function (result) {
            var datas = [];
            for (var i=0;i<result['列1'].length;i++){
                var alldata = {text:result['列1'][i]}
                datas.push(alldata)
            };
            var se = [];
            for (var key in result){
                if(key == '列1'){
                }else{
                    se.push({
                        type:'radar',
                        // zlevel:2,
                        data:[{
                            name:key,
                            value:result[key]
                        }],
                        symbol:'circle',
                        // silent:true, //是否可交互,true不交互
                    })
                }
            }
            myChart.setOption({
                title: {
                    text: 'total-豪华车'
                },
                tooltip: {
                    show: true
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',  //设置栏位如何显示,横轴或纵轴
                    top: '10%',
                    left: '10%',
                },
                radar: {
                    splitNumber: '6',
                    triggerEvent: true,
                    // scale: true,
                    axisLabel:{
                        inside:false,
                        // formatter:'{value}kg',
                        fontStyle:'oblique',
                    },
                    // splitLine:{
                    //     show:true,
                    //     lineStyle:{
                    //         color:'red',
                    //         width:2,
                    //         type:'soild',

                    //     }
                    // },
                    splitArea:{
                        show:true
                    },
                    indicator: datas,
                    center: ['60%', '50%'],
                    radius: '60%',
                },
                // 全局文字样式
                textStyle: {
                    color: 'black',
                },
                series:se
            });
        },
    })
    
    

json数据示例
{
"讴歌": [

"9",
"12",
"14",
"16",
"10",
"12",
"9",
"14",
"10",
"11",
"17",
"12",
"10",
"9",
"9",
"10",
"13",
"9",
"10",
"9",
"9",
"10",
"13",
"12",
"13",
"12",
"9",
"12",
"13",
"17"

],
"列1": [

"4S店网点多",
"安全的",
"不断出新的",
"操控性好",
"操作简便",
"产品外观设计吸引人",
"车辆价格实惠",
"动力强劲的",
"返修率低",
"广告吸引人",
"国际品牌",
"国际市场领导者",
"国内市场领导者",
"环保的",
"技术领先的",
"驾驶舒适的",
"坚固耐用的",
"历史悠久的",
"内部空间宽敞",
"内部装饰有吸引力",
"年轻有活力的",
"省油",
"试驾体验好",
"售后维修保养服务好",
"体现身份和社会地位",
"维修保养成本低",
"物有所值",
"销售服务好",
"值得信赖",
"专业的"

],
"宝马": [

"34",
"40",
"34",
"38",
"31",
"38",
"19",
"38",
"31",
"34",
"46",
"43",
"33",
"25",
"43",
"38",
"31",
"42",
"37",
"38",
"33",
"21",
"31",
"32",
"48",
"20",
"26",
"34",
"38",
"41"

]
}

阅读 7.9k
2 个回答
  option = {
        title: {
            text: '基础雷达图'
        },
        tooltip: {},
        legend: {
            data: ['讴歌', '宝马']
        },
        //极坐标系的径向轴
        polar: {},
        angleAxis: {},
        radiusAxis: {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                { name: "4S店网点多", max: 100},
                { name: "安全的", max: 100},
                { name: "不断出新的", max: 100},
                { name: "操控性好", max: 100},
                { name: "操作简便", max: 100},
                { name: "产品外观设计吸引人", max: 100},
                { name: "车辆价格实惠",  max: 100},
                { name: "动力强劲的",  max: 100},
                { name: "返修率低",  max: 100},
                { name: "广告吸引人",  max: 100},
                { name: "国际品牌",  max: 100},
                { name: "国际市场领导者",  max: 100},
                { name: "国内市场领导者",  max: 100},
                { name: "驾驶舒适的",  max: 100},
                { name: "坚固耐用的",  max: 100},
                { name: "环保的",  max: 100},
                { name: "技术领先的",  max: 100},
                { name: "历史悠久的",  max: 100},
                { name: "内部空间宽敞", max: 100},
                { name: "内部装饰有吸引力",  max: 100},
                { name: "年轻有活力的",  max: 100},
                { name: "省油",  max: 100},
                { name: "试驾体验好",  max: 100},
                { name: "售后维修保养服务好",  max: 100},
                { name: "体现身份和社会地位",  max: 100},
                { name: "维修保养成本低",  max: 100},
                { name: "物有所值",  max: 100},
                { name: "销售服务好",  max: 100},
                { name: "值得信赖",   max: 100},
                { name: "专业的",  max: 100}
            ]
        },
        series: [{
            name: '讴歌 vs 宝马',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [9, 12, 14, 16, 10, 12, 9, 14, 10, 11, 17, 12, 10, 9, 9, 10, 13, 9, 10, 9, 9, 10, 13, 12, 13, 12, 9, 12, 13, 17],
                    name : '讴歌',
                        // 节点展示数据
                    label: {
                        normal: {
                            show: true,
                            formatter:function(params) {
                                return params.value;
                            }
                        }
                    }
                },
                },
                {
                    value : [34, 40, 34, 38, 31, 38, 19, 38, 31, 34, 46, 43, 33, 25, 43, 38, 31, 42, 37, 38, 33, 21, 31, 32, 48, 20, 26, 34, 38, 41],
                    name : '宝马',
                        // 节点展示数据
                    label: {
                        normal: {
                            show: true,
                            formatter:function(params) {
                                return params.value;
                            }
                        }
                    }
                },
                }
            ]
        }]
    };

图片描述

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题