echarts雷達圖中如何能夠在分割線上顯示數值?

翻遍了echarts文檔沒有發(fā)現哪項設置能夠顯示,官方示例和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店網點多",
"安全的",
"不斷出新的",
"操控性好",
"操作簡便",
"產品外觀設計吸引人",
"車輛價格實惠",
"動力強勁的",
"返修率低",
"廣告吸引人",
"國際品牌",
"國際市場領導者",
"國內市場領導者",
"環(huán)保的",
"技術領先的",
"駕駛舒適的",
"堅固耐用的",
"歷史悠久的",
"內部空間寬敞",
"內部裝飾有吸引力",
"年輕有活力的",
"省油",
"試駕體驗好",
"售后維修保養(yǎng)服務好",
"體現身份和社會地位",
"維修保養(yǎng)成本低",
"物有所值",
"銷售服務好",
"值得信賴",
"專業(yè)的"

],
"寶馬": [

"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"

]
}

回答

編輯回答

有你在

這個？
http://gallery.echartsjs.com/...

2017年9月3日 12:58

編輯回答

墨沫

  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: "環(huán)保的",  max: 100},
                { name: "技術領先的",  max: 100},
                { name: "歷史悠久的",  max: 100},
                { name: "內部空間寬敞", max: 100},
                { name: "內部裝飾有吸引力",  max: 100},
                { name: "年輕有活力的",  max: 100},
                { name: "省油",  max: 100},
                { name: "試駕體驗好",  max: 100},
                { name: "售后維修保養(yǎng)服務好",  max: 100},
                { name: "體現身份和社會地位",  max: 100},
                { name: "維修保養(yǎng)成本低",  max: 100},
                { name: "物有所值",  max: 100},
                { name: "銷售服務好",  max: 100},
                { name: "值得信賴",   max: 100},
                { name: "專業(yè)的",  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 : '謳歌',
                        // 節(jié)點展示數據
                    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 : '寶馬',
                        // 節(jié)點展示數據
                    label: {
                        normal: {
                            show: true,
                            formatter:function(params) {
                                return params.value;
                            }
                        }
                    }
                },
                }
            ]
        }]
    };

圖片描述

2018年7月8日 05:45