echarts 可视化数据展示 雷达图

效果

initChart4() {
      // 雷达图
        var option = {
          tooltip: {
              trigger: 'axis'
          },
          radar: [
              {
                  indicator: [
                      {text: '居家式', max: 100},
                      {text: '无终端', max: 100},
                      {text: '穿戴式', max: 100},
                      {text: '手机式', max: 100}
                  ],
                  center: ['50%','50%'],
                  radius: 80,
                  shape:'circle',
                  nameGap:8,
                  name:{
                    color:'#fff'
                  },
                  axisLine:{
                      lineStyle:{
                          color:'black',
                          width:0
                      }
                  },
                  splitLine:{
                      lineStyle:{
                          type:'dashed'
                      }
                  },
                  splitArea:{
                      areaStyle:{
                          opacity:0
                      }
                  }
              }
          ],
          series: [
              {
                  type: 'radar',
                  symbol:'none',  //去掉尖部小圆点
                  tooltip: {
                      trigger: 'item'
                  },
                  lineStyle:{
                    color:'rgba(76,253,247)',
                    width:'2'
                  },
                  areaStyle:{
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 1,
                          y2: 0,
                          colorStops: [{
                              offset: 0, color: 'rgba(164,48,255)' // 0% 处的颜色
                          }, {
                              offset: 1, color: 'rgba(42,114,235)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                      }
                  },
                  data: [
                      {
                          value: [86,73,60,30],
                          name: '设备使用对比'
                      }
                  ]
              }

          ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("main4"),
        "walden"
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },