一周跑步数据echarts radar配置项内容和展示

模拟每周跑步数据

       // 数据
  var dateBase = new Date();
  var year = dateBase.getFullYear();
  var dottedBase = +dateBase + 1000 * 3600 * 24;
  var weekCategory = [];

  var radarData = [];
  var radarDataAvg = [];
  var maxData = 12000;
  var weekMaxData = [];
  var weekLineData = [];


  // 周数据
  for (var i = 0; i < 7; i++) {
    // 日期
    var date = new Date(dottedBase -= 1000 * 3600 * 24);
    weekCategory.unshift([
      date.getMonth() + 1,
      date.getDate()
    ].join('/'));

    // 折线图数据
    weekMaxData.push(maxData);
    var distance = Math.round(Math.random() * 11000 + 500);
    weekLineData.push(distance);

    // 雷达图数据
    // 我的指标
    var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
    var maxSpeed = averageSpeed + (+(Math.random() * 3).toFixed(2));
    var hour = +(distance / 1000 / averageSpeed).toFixed(1);
    var radarDayData = [distance, averageSpeed, maxSpeed, hour];
    radarData.unshift(radarDayData);

    // 平均指标
    var distanceAvg = Math.round(Math.random() * 8000 + 4000);
    var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
    var maxSpeedAvg = averageSpeedAvg + (+(Math.random() * 2).toFixed(2));
    var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
    var radarDayDataAvg = [distanceAvg, averageSpeedAvg, maxSpeedAvg, hourAvg];
    radarDataAvg.unshift(radarDayDataAvg);
  }

  // 颜色设置
  var color = {
    linearYtoG: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [{
        offset: 0,
        color: '#f5b44d'
      }, {
        offset: 1,
        color: '#28f8de'
      }]
    },
    linearGtoB: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
        offset: 0,
        color: '#43dfa2'
      }, {
        offset: 1,
        color: '#28f8de'
      }]
    },
    linearBtoG: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
        offset: 0,
        color: '#1c98e8'
      }, {
        offset: 1,
        color: '#28f8de'
      }]
    },
    areaBtoG: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0,
        color: 'rgba(35,184,210,.2)'
      }, {
        offset: 1,
        color: 'rgba(35,184,210,0)'
      }]
    }
  };

  var option = {
    title: {
      text: '一周跑步数据',
      textStyle: {
        color: '#fff',
        fontSize: 32,
        fontWeight: 'normal'
      },
      subtext: year + '/' + weekCategory[6],
      subtextStyle: {
        color: '#fff',
        fontSize: 16,
      },
      top: 50,
      left: 80
    },
    legend: {
      top: 220,
      left: 80,
      orient: 'vertical',
      itemGap: 15,
      itemWidth: 12,
      itemHeight: 12,
      data: ['平均指标', '我的指标'],
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: 'item'
    },
    radar: {
      center: ['68%', '27%'],
      radius: '40%',
      name: {
        color: '#fff'
      },
      splitNumber: 8,
      axisLine: {
        lineStyle: {
          color: color.linearYtoG,
          opacity: .6
        }
      },
      splitLine: {
        lineStyle: {
          color: color.linearYtoG,
          opacity: .6
        }
      },
      splitArea: {
        areaStyle: {
          color: '#fff',
          opacity: .1,
          shadowBlur: 25,
          shadowColor: '#000',
          shadowOffsetX: 0,
          shadowOffsetY: 5,
        }
      },
      indicator: [{
        name: '全程距离(m)',
        max: maxData
      }, {
        name: '平均速度(km/h)',
        max: 10
      }, {
        name: '最快速度(km/h)',
        max: 12
      }, {
        name: '总计时间(h)',
        max: 3.5
      }]
    },
    grid: {
      left: 90,
      right: 80,
      bottom: 40,
      top: '60%',
    },
    xAxis: {
      type: 'category',
      position: 'bottom',
      axisLine: true,
      axisLabel: {
        color: 'rgba(255,255,255,.8)',
        fontSize: 12
      },
      data: weekCategory,
    },
    yAxis: {
      name: 'km/h',
      nameLocation: 'end',
      nameGap: 24,
      nameTextStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: 14
      },
      max: maxData,
      splitNumber: 4,

      axisLine: {
        lineStyle: {
          opacity: 0
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#fff',
          opacity: .1
        }
      },
      axisLabel: {
        color: 'rgba(255,255,255,.8)',
        fontSize: 12

      }
    },
    series: [{
      name: '每日跑步指标分布与比较',
      type: 'radar',
      symbolSize: 0,
      data: [{
        value: radarDataAvg[6],
        name: '平均指标',
        itemStyle: {
          normal: {
            color: '#f8d351',
          }
        },
        lineStyle: {
          normal: {
            opacity: 0,
          }
        },
        areaStyle: {
          normal: {
            color: '#f8d351',
            shadowBlur: 25,
            shadowColor: 'rgba(248,211,81,.3)',
            shadowOffsetX: 0,
            shadowOffsetY: -10,
            opacity: 1
          }
        },
      }, {
        value: radarData[6],
        name: '我的指标',
        itemStyle: {
          normal: {
            color: '#43dfa2',
          }
        },
        lineStyle: {
          normal: {
            opacity: 0,
          }
        },
        areaStyle: {
          normal: {
            color: color.linearGtoB,
            shadowBlur: 15,
            shadowColor: 'rgba(0,0,0,.2)',
            shadowOffsetX: 0,
            shadowOffsetY: 5,
            opacity: .8
          }
        },
      }]
    }, {
      name: '每日跑步里程',
      type: 'line',
      smooth: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      itemStyle: {
        normal: {
          color: '#fff'
        }
      },
      lineStyle: {
        normal: {
          color: color.linearBtoG,
          width: 3
        }
      },
      areaStyle: {
        normal: {
          color: color.areaBtoG,
        }
      },
      data: weekLineData,
      lineSmooth: true,
      markLine: {
        silent: true,
        data: [{
          type: 'average',
          name: '平均值'
        }],
        precision: 0,
        label: {
          normal: {
            formatter: '平均值: \n {c}'
          }
        },
        lineStyle: {
          normal: {
            color: 'rgba(248,211,81,.7)'
          }
        }
      },
      tooltip: {
        position: 'top',
        formatter: '{c} m',
        backgroundColor: 'rgba(28,152,232,.2)',
        padding: 6
      }
    }, {
      name: '占位背景',
      type: 'bar',
      itemStyle: {
        normal: {
          show: true,
          color: '#000',
          opacity: 0
        }
      },
      silent: true,
      barWidth: '50%',
      data: weekMaxData,
      animation: false
    }, {
      name: '占位背景',
      type: 'bar',
      itemStyle: {
        normal: {
          show: true,
          color: '#000',
          opacity: .1
        }
      },
      silent: true,
      barWidth: '50%',
      barGap: 0,
      data: weekMaxData,
      animation: false
    }],
    backgroundColor: '#383546',
  };

// 点击事件
  myChart.on('click', function(params) {
    if (params.componentType === 'series' && params.seriesType === 'line') {

      var dataIndex = params.dataIndex;
      myChart.setOption({
        series: [
        {
      name: '每日跑步指标分布与比较',
      type: 'radar',
      symbolSize: 0,
      data: [{
        name: '平均指标',
        value: radarDataAvg[dataIndex],
        itemStyle: {
          normal: {
            color: '#f8d351',
          }
        },
        lineStyle: {
          normal: {
            opacity: 0,
          }
        },
        areaStyle: {
          normal: {
            color: '#f8d351',
            shadowBlur: 25,
            shadowColor: 'rgba(248,211,81,.3)',
            shadowOffsetX: 0,
            shadowOffsetY: -10,
            opacity: 1
          }
        },
      }, {
        name: '我的指标',
        value: radarData[dataIndex],
        itemStyle: {
          normal: {
            color: '#43dfa2',
          }
        },
        lineStyle: {
          normal: {
            opacity: 0,
          }
        },
        areaStyle: {
          normal: {
            color: color.linearGtoB,
            shadowBlur: 15,
            shadowColor: 'rgba(0,0,0,.2)',
            shadowOffsetX: 0,
            shadowOffsetY: 5,
            opacity: .8
          }
        },
      }]
    }]
      })
    }
  });