# 图表

图表组件基于Charts封装,只需要将对应图表option数据传入组件即可。React版

TIP

当窗口发生resize时,图表组件会重新计算宽高以便于自适应。

相关示例请移步Charts实例

相关配置项请移步Charts配置项

<dv-charts :option="option" />
点击复制
点击以展示/隐藏option数据
export default {
  title: {
    text: '剩余油量表',
    style: {
      fill: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 55 } ],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
}