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();
Echarts關於雷達圖的一些個性化設置
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.