GEcharts 图表组件

基础用法

<template>
  <div>
    <g-echarts class="w-full h-[300px] bg-red-50" :options="options"></g-echarts>
  </div>
</template>

<script setup lang="ts">
import { GEcharts } from 'gao-components-plus'
import type { EChartsOption } from 'echarts';

const options: EChartsOption = {
  title: {
    text: 'ECharts 入门示例',
    subtext: '纯属虚构'
  },
  tooltip: {
    show: true
  },
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    outerBounds: {
      left: 10,
      top: 80,
      right: 10,
      bottom: 10
    }
  },
  xAxis: {
    data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}
</script>

属性

名称	描述	类型	默认值
options	echarts配置	EchartsOptions	-
initOptions	echarts初始化配置	EChartsInitOpts	-

实例

<g-echarts :options="{}" ref="echartsRef"></g-echarts>
<script>
const echartsRef = useTemplateRef<GEchartsInstance>('echartsRef')

// echartsRef.value?.getChartInstance() 获取echarts实例， 可用于后续事件绑定等处理
// echartsRef.value?.clear()  清空画布
// echartsRef.value?.resize() 重新渲染

</script>