【ECharts】Dashboard

Transform size

option = {
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      radius: '40%', // 调整大小
      center:['50%','50%'],  // 位置
      detail: {
        formatter: '{value}%'
      },
      data: [
        {
          value: 50,
          name: 'SCORE'
        }
      ]
    }
  ]
};

Color customization

 

 

option = {
  series: [
    {
      type: 'gauge',
      // 刻度
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      // 指针
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      // 1个刻度线
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      // 每5个的刻度线
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
          width: 4
        }
      },
      // 刻度数字
      axisLabel: {
        color: 'auto',
        distance: 40,
        fontSize: 20
      },
      
      detail: {
        valueAnimation: true,
        formatter: '{value} km/h',
        color: 'auto'
      },
      data: [
        {
          value: 70,
          name:'速度'
        }
      ]
    }
  ]
};