特斯拉 10 月份累計上漲 44%，讓基金經理頭疼
阿新 • • 發佈：2021-11-04
1>ECharts 最基本的程式碼結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="box" style="width: 600px; height: 400px;"></div>
<script>
var box=echarts.init(document.getElementById("box"))
var option={
}
box.setOption(option)
</script>
</body>
</html>
2>定義各個維度的最大值
var data = [
{name: '價格', max: 100},
{name: '功能', max: 100},
{name: '拍照', max: 100},
{name: '跑分', max: 100},
{name: '續航', max: 100}
]
3>準備具體產品的資料
var vivo = [80, 90, 80, 82, 90] var oppo = [70, 82, 75, 70, 78]
4>在 series 下設定 type:radar
var option={
radar:{ //配置各個維度的最大值
indicator:data
},
series:[
{
type:'radar', //radar，表示此圖表是雷達圖
data:[
{
name:'vivo',
value:vivo,
},
{
name:'opp',
value:opp
}
]
}
]
}
顯示數值 label
var option={
radar:{
indicator:data
},
series:[
{
type:'radar',
label:{
show:true
},
data:[
{
name:'vivo',
value:vivo,
},
{
name:'opp',
value:opp
}
]
}
]
}
區域面積 areaStyle
將每一個產品的雷達圖形成陰影的面積
series:[
{
type:'radar',
label:{
show:true
},
areaStyle: {},
data:[
{
name:'vivo',
value:vivo,
},
{
name:'opp',
value:opp
}
]
}
]
繪製型別 shape
雷達圖最外層繪製型別，支援 'polygon' 和 'circle'
預設是多邊形效果
'polygon' : 多邊形
'circle' 圓形
var option={
radar:{
indicator:data,
shape: 'circle'
},
series:[
{
type:'radar',
label:{
show:true
},
areaStyle: {},
data:[
{
name:'vivo',
value:vivo,
},
{
name:'opp',
value:opp
}
]
}
]
}