echarts 可视化数据展示雷达图

水深无声 2023-06-22 05:21 25阅读 0赞

**效果**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]**

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);
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191214111616638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70