图表6 雷达图

2022-06-16 11:47:00 浏览数 (2)

6、图表6 雷达图

1.雷达图的实现步骤

步骤1 ECharts 最基本的代码结构

代码语言：javascript复制

<!DOCTYPE html>
  <html lang="en">

  <head>
    <script src="js/echarts.min.js"></script>
  </head>

  <body>
    <div style="width: 600px;height:400px"></div>
    <script>
      var mCharts = echarts.init(document.querySelector("div")) var option = {}
      mCharts.setOption(option)
    </script>
  </body>

</html>

此时 option 是一个空空如也的对象

步骤2 定义各个维度的最大值

代码语言：javascript复制

var dataMax = [{
  name: '易用性',
  max: 100
}, {
  name: '功能',
  max: 100
}, {
  name: '拍照',
  max: 100
}, {
  name: '跑分',
  max: 100
}, {
  name: '续航',
  max: 100
}]

步骤3 准备具体产品的数据

代码语言：javascript复制

var hwScore = [80, 90, 80, 82, 90] 
var zxScore = [70, 82, 75, 70, 78]

步骤4 在 series 下设置 type:rada

代码语言：javascript复制

var option = {
  radar: {
    indicator: dataMax
  },
  series: [{
    type: 'radar',
    data: [{
      name: '华为手机1',
      value: hwScore
    }, {
      name: '中兴手机1',
      value: zxScore
    }]
  }]
}

series 产品对象数据图表

0 人点赞