1. 程式人生 > 實用技巧 >雷達圖

雷達圖

debugger;
option = {
 title: {
        text: '* 該評估資料均為根據有企畫獨家演算法引擎根據企業資料生成,僅供參考',
        left:'left',
        top:'bottom',
        textStyle:{
            fontSize:'12',
            color:'#CCCCCC',
            fontWeight:'none'
        }
    },
    tooltip: { // 提示框
    confine: true,
    backgroundColor: 
'rgba(0, 0, 0, 0.5)', textStyle: { color: "#fff", fontSize: 14, lineHeight: 10 }, padding: 10, borderWidth: 1, // borderColor: "e1e3ec", axisPointer: { drossStyle: { color: "#999" } }, extraCssText: "box-shadow: 0 0 0.05rem 0 rgba(0, 0, 0, 0.1)" // 自定義屬性
}, //分割區域邊框顏色 color:'#f2f4fa', //滑鼠滑過展示資料 // tooltip:{}, radar: { //shape: 'circle', splitNumber: 5, // 雷達圖圈數設定 //五個角落標識文字顏色 name: { textStyle: { color: '#000000', } }, axisLine:{ lineStyle: { color:
'rgba(131,141,158,.1)', }, //不顯示線條 //show:false }, //刻度線_版本不支援 /*axisLabel:{ show:'true' },*/ //分割線顏色 splitLine : { show : true, lineStyle : { width : 1, color : '#1d70b8' } }, //分割區域顏色 splitArea : { show : true, areaStyle : { color:'#f2f4fa' } }, //max:設定各個角的最大值,根據實際情況調整 indicator: [ /*{ name: '失信執行人', max: 50000, //若將此屬性放在radar下,則每條indicator都會顯示圈上的數值,放在這兒,只在通訊這條indicator上顯示 axisLabel: { show: true, fontSize: 12, color: '#838D9E', showMaxLabel: true, //不顯示最大值,即外圈不顯示數字30 showMinLabel: true, //顯示最小數字,即中心點顯示0 }, },*/ { name: '失信被執行人', max:50000}, { name: '執行案件', max: 50000}, { name: '經營異常', max: 50000}, { name: '行政處罰', max: 50000}, { name: '關聯人風險', max: 50000} /* { name: '失信被執行人', max: !<{"Code":"v1","DisplayName":"最大值1","Type":"Value"}>!}, { name: '執行案件', max: !<{"Code":"v2","DisplayName":"最大值2","Type":"Value"}>!}, { name: '經營異常', max: !<{"Code":"v3","DisplayName":"最大值3","Type":"Value"}>!}, { name: '行政處罰', max: !<{"Code":"v4","DisplayName":"最大值4","Type":"Value"}>!}, { name: '關聯人風險', max: !<{"Code":"v5","DisplayName":"最大值5","Type":"Value"}>!} */ ] }, series: [{ type: 'radar', symbol: 'circle', // 拐點的樣式,還可以取值'rect','angle'等 symbolSize: 2,// 拐點的大小 //圖表中圖區域的顏色 itemStyle: { borderWidth:0, normal: { areaStyle: { opacity: 0.5,// color:'#7b98cc' // 圖表中圖區域的顏色 } } }, /* data: [ { //tooltip上方名稱顯示 //name:'信用風險雷達', value: [43000, 30000, 28000, 35000, 50000, 19000] } ] */ //真實資料展現 data: [ { name:'信用風險雷達', value:[43000, 30000, 28000, 35000, 50000, 19000], //value:!<{"Code":"Data","DisplayName":"圖區域資料","Type":"Arr1"}>!, symbol: 'circle', symbolSize: 1, label: { // 單個拐點文字的樣式設定 normal: { show: true, // 單個拐點文字的樣式設定。[ default: false ] position: 'top', // 標籤的位置。[ default: top ] distance: 5, // 距離圖形元素的距離。當 position 為字元描述值(如 'top'、'insideRight')時候有效。[ default: 5 ] color: 'rgba(0,0,0,128)', // 文字的顏色。如果設定為 'auto',則為視覺對映得到的顏色,如系列色。[ default: "#fff" ] fontSize: 14, // 文字的字型大小 formatter: function(params) { return params.value; } } }, itemStyle: { // 單個拐點標誌的樣式設定。 normal: { borderColor: 'rgba(51,0,255,1)', // 拐點的描邊顏色。[ default: '#000' ] borderWidth: 1 , // 拐點的描邊寬度,預設不描邊。[ default: 0 ] } }, lineStyle: { // 單項線條樣式。 normal: { opacity: 0.5 // 圖形透明度 } }, } ] }] };