echarts 仪表盘

17 阅读1分钟
option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      label:{
        show:false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: 'red'
        }
      },
      axisLabel: {
        distance: 25,
        color: 'green',
        fontSize: 20
      },
      pointer: {
        show: true, // 显示指针
        itemStyle: {
          color: 'blue'
        }
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10,
          borderColor: 'pink'
        }
      },
      title:{
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 13,
          color: [
                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#FFC600"
                      },
                      {
                        offset: 0.6,
                        color: "#30D27C"
                      },
                      {
                        offset: 1,
                        color: "#0B95FF"
                      }
                    ])
                  ]
                ]
        },
      },
      detail: {
        formatter: '{value}%',
        valueAnimation: true,
        fontSize: 80,
        offsetCenter: [0, '70%']
      },
      data: [
        {
          value: 50,
          name: 'SCORE'
        }
      ]
    }
  ]
};