3.7 雷达图
3.7.1 实现步骤
-
ECharts最基本的代码结构
-
引入js文件
-
DOM容器
-
初始化对象
-
设置option
-
-
定义各个维度的最大值 indicator
-
准备具体产品的数据
-
图表类型
在
series下设置type: 'radar'
<!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 style=" 600px; height: 400px;"></div> <script> var mCharts = echarts.init(document.querySelector('div')); var dataMax = [ { name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '续航', max: 100 } ] var option = { radar: { indicator: dataMax }, series: [ { type: 'radar', data: [ { name: '华为手机1', value: [80, 90, 80, 82, 90] }, { name: '中兴手机1', value: [72, 82, 75, 70, 78] } ] } ] } mCharts.setOption(option); </script> </body> </html>
3.7.2 常用配置
-
显示数值
label: { show: true } -
区域面积
areaStyle: {}将每一个产品的雷达图形成阴影的面积
-
绘制类型
radar: { shape: 'circle' }配置雷达图最外层的图形 circle polygon