24h内点击次数分布echarts radar配置项内容和展示

单个legend

        var totalData = [{
          timeIndex: '2-4点',
          value: 105
      },
      {
          timeIndex: '6-8点',
          value: 85
      },
      {
          timeIndex: '12-14点',
          value: 65
      },
      {
          timeIndex: '10-12点',
          value: 145
      },
      {
          timeIndex: '8-10点',
          value: 55
      },
      {
          timeIndex: '18-20点',
          value: 200
      },
      {
          timeIndex: '16-18点',
          value: 185
      }
  ]

  var timeGroup = [
      '0-2点',
      '2-4点',
      '4-6点',
      '6-8点',
      '8-10点',
      '10-12点',
      '12-14点',
      '14-16点',
      '16-18点',
      '18-20点',
      '20-22点',
      '22-24点'
  ]
  var timeGroupReverse = timeGroup.slice(0).reverse()
  var timeMap = []
  timeGroupReverse.forEach((x) => {
      var h = 0
      totalData.forEach((item) => {
          if (item.timeIndex === x) {
              h = item.value
          }
      })
      timeMap.push(h)
  })
  var maxLst = []
  var sortDesc = function(x, y) {
      return y - x
  }
  var timeMapBeforeSort = [...timeMap]
  maxLst.push(timeMap.sort(sortDesc)[0])
  var max = maxLst.sort(sortDesc)[0]
  var labelData = []
  var indicator = []
  for (var i = 0; i < timeGroup.length; ++i) {
      labelData.push({
          value: 1,
          name: timeGroup[i],
          tooltip: {
              formatter: function() {
                  return ''
              }
          }
      })
      indicator.push({
          name: timeGroup[i],
          max: max
      })
  }

  option = {
      title: {
          text: '24h内点击次数分布'
      },

      color: ['#73a0fa'],
      tooltip: {
          trigger: 'item',
          position: ['50%', '20%'],
          formatter: (params) => {
              var result = ''
              var timeGroupData = [...params.value]
              var timeGroupName = [...timeGroupReverse]
              if (timeGroupData.length) {
                  result += params.name
                  timeGroupData.forEach((item, index) => {
                      result += `<br/>${timeGroupName[index]} : ${Number(
                  item
                ).toLocaleString()}`
                  })
              }
              return result
          }
      },
      radar: {
          shape: 'circle',
          scale: true,
          indicator: indicator.reverse(),
          center: ['50%', '50%'],
          radius: '60%',
          startAngle: 105,
          name: {
              show: true,
              color: 'transparent'
          },
          axisLine: {
              lineStyle: {
                  color: 'rgba(65, 217, 199, 1)',
                  opacity: 0.2
              }
          },
          splitLine: {
              lineStyle: {
                  color: 'rgba(65, 217, 199, 1)',
                  opacity: 0.2
              }
          },
          splitArea: {
              areaStyle: {
                  color: 'rgba(65, 217, 199, 0.1)',
                  opacity: 1,
                  shadowBlur: 45,
                  shadowColor: 'rgba(0,0,0,.5)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 15
              }
          }
      },
      series: [{
              type: 'radar',
              data: [{
                  value: timeMapBeforeSort,
                  name: '时间'
              }],
              zlevel: 2,
              z: 4
          },
          {
              type: 'pie',
              data: labelData,
              radius: ['65%', '85%'],
              zlevel: -1,
              name: '',
              itemStyle: {
                  normal: {
                      color: '#22C3AA',
                      borderColor: 'white'
                  }
              },
              label: {
                  normal: {
                      position: 'inside'
                  }
              }
          }
      ]
  };