图表

图表

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

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

相关示例请移步Charts实例

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

基础用法

查看代码

<template>
  <div w50rem h25rem flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-charts :option="option" style="width:25rem;height:15rem;"/>
    </div>
    <div pt5>
      <button btn @click="updateData">修改数据</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
const updateData = ()=>{
  option.series[0].data[0].value = Math.floor(Math.random() * 100)
}

const option = reactive({
  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'
    }
  ]
})
</script>