近來在寫的項目中多次用到了echars，所以總結一下我使用到的echars雷達圖的一些基本配置，便于下一次使用。

使用前研究一下文檔就能知道大致的引入用法：

在頁面中先引入echars，這里可以根據需求選擇引入文檔的類型，

頁面中寫入<div id="main" style="width: 600px;height:400px; "></div>作為盒子

js中寫入以下代碼

// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
tooltip: {},//提示框組件配置
radar: {
shape: 'circle',//是否圓形顯示
splitNumber:3,//分隔段數
splitArea: {//這是分隔區域的配置
areaStyle: {
color: ['rgba(0,0,0,0)']//分隔區域的顏色
}
},
splitLine: {//這是分割線的配置
lineStyle: {
color: 'rgba(107,177,243,0.2)'//分割線的顏色
}
},
axisLine:{//坐標軸軸線的配置
lineStyle:{
color:'rgba(107,177,243,0.2)'//坐標軸的顏色
}
},
name: {//指示器
textStyle: {//指示器的樣式
color: '#fff',
padding: [5, 7]//文字塊的內邊距
}
},
indicator: [ /雷達圖的指示器，用來指定雷達圖中的多個變量和最大值
? { name: '銷售（sales）', max: 6500},
?????????? { name: '管理（Administration）', max: 16000},
?????????? { name: '信息技術（Information Techology）', max: 30000},
?????????? { name: '客服（Customer Support）', max: 38000},
?????????? { name: '研發（Development）', max: 52000},
?????????? { name: '市場（Marketing）', max: 25000}
]
},
series: [{//圖形屬性
type: 'radar',
symbol:'circle',
areaStyle: {normal: { //區域填充樣式
color:'#1890FF',
opacity:'0.6'
}},
itemStyle:{ //折線拐點標志的樣式
color:'#1890FF',
},
lineStyle:{//線條樣式
},
data : [ //實際的數據
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
},
]
}]
};

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

?

轉載于:https://www.cnblogs.com/gfrs/p/9585474.html

總結

以上是生活随笔為你收集整理的关于echars中雷达图的一些配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。