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

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值