echarts-雷达图和仪表图

雷达图

提前规定好每一项的名称和最大值
let dataMax = [
  {name:'系统生态',max:100},
  {name:'电池续航',max:100},
  {name:'芯片性能',max:100},
  {name:'拍照体验',max:100},
  {name:'外观质感',max:100},
  {name:'性价比',max:100},
]
雷达图的外观配置
radar:{
  indicator:dataMax, // 指定每一项的最大值
  shape:'circle' // 最大轮廓 设置成圆形   polygon默认的是多边形
},
系列里设置每一项的 名字和对应的数据
series:[
  {
    //areaStyle:{},
    type:'radar',
    data:[
      {name:'红米 K20 Pro',value:[78,94,88,81,76,95]},
      {name:'iPhone 13 Pro Max',value:[98,92,99,97,96,88]},
    ],
    label:{
      show:true
    },
  }
]

 仪表图

  let myCharts1 = echarts.init(document.querySelector('#map1'))
  let options1 = {
    title:{
      text:'仪表盘'
    },
    tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
      trigger: 'item',
    },

    series:[
      {
        type:'gauge',
        data:[
          {value:120},// 每一个对象就代表一个指针
        ],
        legendHoverLink: true ,
        min:60,max:180 // min max 控制最大最小值
      }
    ],

  }

  myCharts1.setOption(options1)

猜你喜欢

转载自blog.csdn.net/benlalagang/article/details/126933685