Echarts關於雷達圖的一些個性化設置

原文鏈接:https://www.cnblogs.com/lina-bwx/p/7443988.html

function test() {
            let myChart = echarts.init(document.getElementById('levelImage'));
            myChart.setOption({
                title: { text:null }, // 隱藏圖表標題
                legend: { enabled: false }, // 隱藏圖例
                tooltip : {
                    trigger: 'axis'
                },
                calculable : true,
                polar : [
                    {
                        nameGap : 5, // 圖中工藝等字距離圖的距離
                        center:['50%','50%'], // 圖的位置
                        name:{
                           show: true, // 是否顯示工藝等文字
                           formatter: null, // 工藝等文字的顯示形式
                           textStyle: {
                             color:'#a3a5b6' // 工藝等文字顏色
                           }
                         },
                        indicator : [
                            {text : '工藝', max  : 100},
                            {text : '設備', max  : 100},
                            {text : '安全', max  : 100},
                            {text : '工藝', max  : 100},
                            {text : '儀表', max  : 100}
                        ],
                        axisLine: {            // 座標軸線
                            show: false        // 默認顯示,屬性show控制顯示與否
                        },
                        axisLabel: {           // 座標軸文本標籤,詳見axis.axisLabel
                            show: false,
                            textStyle: {      
                                color: '#247bd7' // 座標軸刻度文字的樣式
                            }
                        },
                        splitArea : {
                            show : true,   
                            areaStyle : {
                                color: ["#2a4a93"]  // 圖表背景網格的顏色
                            }
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : '#286fbb' // 圖表背景網格線的顏色
                            }
                        }
                    }
                ],
                series : [
                    {
                        name: '完全實況球員數據',
                        type: 'radar',
                        symbol: "none", // 去掉圖表中各個圖區域的邊框線拐點
                        itemStyle: {
                            normal: {
                                color : "rgba(0,0,0,0)", // 圖表中各個圖區域的邊框線拐點顏色
                                lineStyle: {
                                    color:"white" // 圖表中各個圖區域的邊框線顏色
                                },
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data : [
                            {
                                value : [50, 42, 88, 60, 90],
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: 'default',
                                            opacity: 0.8, // 圖表中各個圖區域的透明度
                                            color: "#1686c2" // 圖表中各個圖區域的顏色
                                        }
                                    }
                                },
                                name : '重整'
                            },
                            {
                                value : [90, 32, 74, 20, 60],
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: 'default',
                                            /*opacity: 1,*/
                                            color: "#6eaf97" // 圖表中各個圖區域的顏色
                                        }
                                    }
                                },
                                name : '催化'
                            }
                        ]
                    }
                ]
            });
 }
        test();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章