雷達圖的自定義點樣式與漸變背景色
1、首先通過标簽方式直接引入建構好的 echarts 檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 檔案 -->
<script src="echarts.min.js"></script>
</head>
</html>
2、然後準備一個具備高寬的 DOM 容器。
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
3、通過 echarts.init 方法初始化 echarts 執行個體并通過 setOption 方法生成一個基礎雷達圖，下面是完整代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts執行個體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: {
text: '基礎雷達圖'
},
tooltip: {},
legend: {
data: ['預算配置設定（Allocated Budget）', '實際開銷（Actual Spending）']
},
radar: {
axisLine: {
//自定義點樣式，引入本地圖檔
symbol: ['none', 'image://jz.png']
},
splitArea: {
//設定漸變背景色
areaStyle: {
color: ['rgba(11,89,140,1)',
'rgba(11,89,140,0.8)',
'rgba(11,89,140,0.6)',
'rgba(11,89,140,0.4)',
'rgba(11,89,140,0.2)'],
shadowColor: 'rgba(0,0,0,0.3)',
shadowBlur: 10
}
},
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
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: [{
name: '預算 vs 開銷（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預算配置設定（Allocated Budget）'
}
]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
4、效果圖
