一、echarts雷達圖使用
echarts雷達圖可以展示多維度數據之間的關係，可以使用在各種領域的數據展示，例如業績展示、投資分析等。首先，需要引入echarts的js庫文件和所需的主題文件，以及一個DOM容器
<script src="./echarts.min.js"></script>
<div id="chart"></div>
<script>
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('chart'));
</script>
接下來，需要配置雷達圖的數據信息
// 配置雷達圖的數據
var option = {
title: {
text: 'echarts雷達圖示例'
},
tooltip: {},
legend: {
data:['預算分配','實際開銷']
},
radar: {
// 雷達圖坐標系組件
indicator: [
{ name: '銷售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技術', max: 30000},
{ name: '客服', max: 38000},
{ name: '研發', max: 52000},
{ name: '市場', max: 25000}
]
},
series: [{
name: '預算 vs 開銷(Allocated Budget vs Actual Spending)',
type: 'radar',
// 數據
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預算分配',
// 單個數據項的樣式配置
itemStyle: {color: '#104E8B'}
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實際開銷',
// 單個數據項的樣式配置
itemStyle: {color: '#00FF00'}
}
]
}]
};
// 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);
這樣我們就成功創建了一個雷達圖，可以根據所需的數據進行修改配置，以展現不同效果。
二、echarts雷達圖怎麼放大縮小
echarts提供了一個組件dataZoom，可以進行放大縮小。dataZoom會默認出現在圖表的底部，可以通過修改show屬性控制其關閉或開啟。除此之外，也可以設置其具體的位置、樣式等屬性。
var option = {
...
dataZoom: {
// 控制縮放的範圍
rangeMode: ['percent', 'percent'],
// 默認的起始範圍是50%到100%
start: 50,
end: 100
},
...
};
三、echarts雷達圖樣式修改
echarts雷達圖可以通過在樣式中配置series進行樣式修改
var option = {
...
series: [{
// 填充樣式
areaStyle: {color: '#FFFFFF'},
// 樣式深度
emphasis: {
focus: 'self', // 當前的系列和數據項本身都會被強調
itemStyle: {color: '#FFFFFF'},
lineStyle: {color: '#FFFFFF'}
},
// 文本樣式
label: {
fontSize: 14
},
// 折線圖的樣式設置
lineStyle: {
width: 1,
type: 'dotted'
}
}]
...
};
四、echarts雷達圖超出圓盤
當數據項過多，超出了雷達圖的圓盤範圍，可以通過修改grid下的left、right、top、bottom實現圓盤範圍的擴大。或者可以通過調整雷達圖坐標系組件radar項中的center值，控制圖表的半徑，使得圖表格局更為緊湊。
var option = {
...
grid: {
// 控制整個圖表所佔的位置
left: '10%',
right: '20%',
top: '10%',
bottom: '10%'
},
radar: {
center: ['50%', '50%'], // 修改center進行半徑控制
...
},
...
};
五、echarts雷達圖上下限設置
可以設置雷達圖的最大和最小刻度，使得數據不會超過設定範圍，可以通過修改radar中indicator中的max、min控制。
var option = {
...
radar: {
indicator: [
{ name: '銷售', max: 6500, min: 0},
...
]
...
},
...
};
六、echarts雷達圖好看的配置
可以通過樣式配置和圖表元素的顯示和隱藏控制實現一些炫酷的展現效果，以下為理想的echarts雷達圖的配置
var option = {
title: {
text: 'ecs展示'
},
tooltip: {},
legend: {
data: ['預算分配', '實際開銷']
},
radar: {
center: ['50%', '50%'],
indicator: [
{ name: '綜合評價', max: 100},
{ name: '成本控制', max: 100},
{ name: '效率績效', max: 100},
{ name: '技術能力', max: 100},
{ name: '品質服務', max: 100},
{ name: '銷售佔比', max: 100}
],
radius: '65%',
splitNumber: 8,
name: {
textStyle: {
color: '#999',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#989898','#B4B4B4','#CDCDCD','#E1E1E1','#F5F5F5','#F7F7F7','#FFFFFF']
}
}
},
series: [{
type: 'radar',
data: [
{
value: [70, 80, 85, 90, 85, 80],
name: '預算分配',
itemStyle: {color: '#f28c00'},
lineStyle: {color: '#f28c00'}
},
{
value: [60, 70, 80, 90, 75, 95],
name: '實際開銷',
itemStyle: {color: '#0070c0'},
lineStyle: {color: '#0070c0'},
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
}
]
}]
};
myChart.setOption(option);
七、echarts雷達圖取消默認線條
echarts雷達圖的默認顯示了樣式較為複雜的線條，可以通過設置lineStyle項為null取消其默認顯示的線條。樣式可以通過itemStyle項進行控制，或者通過修改起始和結束顏色實現樣式顏色漸變。
var option = {
...
series: [{
// 取消默認線條
lineStyle: null,
data: [
...
]
}]
...
};
八、echarts雷達圖設置大小
echarts雷達圖的大小可以通過設置容器div的width和height屬性實現。如果需要動態改變雷達圖的大小，可以通過調用echart的resize()方法實現。可以通過修改radar中center和radius等屬性控制圖表所佔的位置和大小。
// 將容器的高設置為500px，寬設置為1000px原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/304291.html
微信掃一掃 
支付寶掃一掃 