仪表盘(刻度)echarts gauge配置项内容和展示

刻度形式的仪表盘

配置项如下
      let lineWidth = 15;//线宽
let lineValue = 0.828;//百分比值

option = {
  backgroundColor: '#121E35',
  series: [{
    type: 'gauge',
    startAngle: 200,
    endAngle: -20,
    radius:'100%',//仪表盘半径
    pointer: { show: false },//是否显示指针
    splitLine: { show: false },//是否显示分隔线
    axisLine: {//仪表盘轴线
      show: true,
      lineStyle: {
        width: lineWidth,
        color: [[0.1, '#08B8FF'], [0.2, '#f00'],[lineValue, '#08B8FF'], [1, '#121E35']],
      }
    },
    axisTick: {//刻度
      distance: -lineWidth,
      length: lineWidth,
      lineStyle: {
        color: '#1E2F45',//
        width: 7
      }
    },
    axisLabel:{show:false},//不显示刻度标签
    data: [{
      value: lineValue,
      name: 'gauge1',
      title: {show:false},//不显示标题
      detail: {show:false},//不显示详情
    }]
  }]
}
/*
https://echarts.apache.org/zh/option.html#series-gauge.type 文档地址
注意:radius为100%时,注意dom最好是正方形,不然也会等比例缩小

*/

    
截图如下