Charts

仪表盘

基本仪表盘

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 55 } ],
      axisLabel: {
        formatter: '{value}%'
      },
      animationCurve: 'easeInOutBack'
    }
  ]
}

const option2 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 89 } ],
      axisLabel: {
        formatter: '{value}%'
      },
      animationCurve: 'easeInOutBack'
    }
  ]
}

export default [option1, option2]

详情仪表盘

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 55 } ],
      axisLabel: {
        formatter: '{value}%'
      },
      details: {
        show: true,
        offset: [0, 40],
        formatter: '剩余{value}%'
      },
      animationCurve: 'easeOutBack'
    }
  ]
}

const option2 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 89 } ],
      axisLabel: {
        formatter: '{value}%'
      },
      details: {
        show: true,
        offset: [0, 40],
        formatter: '剩余{value}%'
      },
      animationCurve: 'easeOutBack'
    }
  ]
}

export default [option1, option2]

渐变仪表盘

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [
        { name: 'itemA', value: 55, gradient: ['#e7bcf3', '#e690d1', '#fb7293'] }
      ],
      axisLabel: {
        formatter: '{value}%'
      },
      animationCurve: 'easeOutBounce'
    }
  ]
}

const option2 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 89, gradient: ['#e7bcf3', '#e690d1', '#fb7293'] } ],
      axisLabel: {
        formatter: '{value}%'
      },
      animationCurve: 'easeOutBounce'
    }
  ]
}

export default [option1, option2]

多组仪表盘

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [
        { name: '油箱A', value: 59 },
        { name: '油箱B', value: 78, radius: '40%' },
        { name: '油箱C', value: 45, radius: '20%' }
      ],
      axisLabel: {
        formatter: '{value}%'
      },
      pointer: {
        valueIndex: 2,
        style: {
          scale: [.6, .6]
        }
      },
      details: {
        show: true,
        formatter: '{name}剩余{value}%',
        position: 'start',
        offset: [10, 0],
        style: {
          fontSize: 13,
          textAlign: 'left'
        }
      }
    }
  ]
}

const option2 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [
        { name: '油箱A', value: 78 },
        { name: '油箱B', value: 65, radius: '40%' },
        { name: '油箱C', value: 55, radius: '20%' }
      ],
      axisLabel: {
        formatter: '{value}%'
      },
      pointer: {
        valueIndex: 2,
        style: {
          scale: [.6, .6]
        }
      },
      details: {
        show: true,
        formatter: '{name}剩余{value}%',
        position: 'start',
        offset: [10, 0],
        style: {
          fontSize: 13,
          textAlign: 'left'
        }
      }
    }
  ]
}

export default [option1, option2]

局部渐变

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [
        { name: 'itemA', value: 55, gradient: ['#e7bcf3', '#e690d1', '#fb7293'], localGradient: true }
      ],
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ]
}

const option2 = {
  title: {
    text: '剩余油量表'
  },
  series: [
    {
      type: 'gauge',
      data: [
        { name: 'itemA', value: 89, gradient: ['#e7bcf3', '#e690d1', '#fb7293'], localGradient: true }
      ],
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ]
}

export default [option1, option2]

百分比环

切换数据
重置
点击以展开或折叠
const option1 = {
  series: [
    {
      type: 'gauge',
      startAngle: -Math.PI / 2,
      endAngle: Math.PI * 1.5,
      arcLineWidth: 25,
      data: [
        { name: 'itemA', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
      ],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      dataItemStyle: {
        lineCap: 'round'
      },
      details: {
        show: true,
        formatter: '{value}%',
        style: {
            fill: '#1ed3e5',
            fontSize: 35
        }
      }
    }
  ]
}

const option2 = {
  series: [
    {
      type: 'gauge',
      startAngle: -Math.PI / 2,
      endAngle: Math.PI * 1.5,
      arcLineWidth: 25,
      data: [
        { name: 'itemA', value: 89, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
      ],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      dataItemStyle: {
        lineCap: 'round'
      },
      details: {
        show: true,
        formatter: '{value}%',
        style: {
            fill: '#1ed3e5',
            fontSize: 35
        }
      }
    }
  ]
}

export default [option1, option2]

多同心百分比环

切换数据
重置
点击以展开或折叠
const option1 = {
  series: [
    {
      type: 'gauge',
      startAngle: -Math.PI / 2,
      endAngle: Math.PI * 1.5,
      arcLineWidth: 10,
      data: [
        { name: 'A', value: 25, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] },
        { name: 'B', value: 45, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '53%' },
        { name: 'C', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '46%' },
        { name: 'D', value: 35, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '39%' },
        { name: 'E', value: 25, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '32%' }
      ],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      dataItemStyle: {
        lineCap: 'round'
      },
      backgroundArc: {
        show: false
      },
      details: {
        show: true,
        formatter: '{name}占比{value}%',
        position: 'start',
        offset: [-10, 0],
        style: {
            fill: '#1ed3e5',
            fontSize: 13,
            textAlign: 'right',
        }
      }
    }
  ]
}

const option2 = {
  series: [
    {
      type: 'gauge',
      startAngle: -Math.PI / 2,
      endAngle: Math.PI * 1.5,
      arcLineWidth: 10,
      data: [
        { name: 'A', value: 32, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] },
        { name: 'B', value: 78, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '53%' },
        { name: 'C', value: 55, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '46%' },
        { name: 'D', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '39%' },
        { name: 'E', value: 45, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '32%' }
      ],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      dataItemStyle: {
        lineCap: 'round'
      },
      backgroundArc: {
        show: false
      },
      details: {
        show: true,
        formatter: '{name}占比{value}%',
        position: 'start',
        offset: [-10, 0],
        style: {
            fill: '#1ed3e5',
            fontSize: 13,
            textAlign: 'right',
        }
      }
    }
  ]
}

export default [option1, option2]

←