echarts

使用方法

npm i @cowave-cli/chart

  // vite.config.ts
  import ChartResolver from '@cowave-cli/chart/resolver';
  ...
  autoComponent({
    resolvers: [ChartResolver(), ...], // 自动导入 ElementPlus 等组件
    dirs: ['src/components/base'],
    dts: 'src/auto-component.d.ts' // 创建TS
  })
  ...

const chart = ref()

<c-axis
  :xAxis="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  :series="{
    data: [150, 230, 224, 218, 135, 147, 100],
  }"
  style="width: 800px; height: 600px"
/>

<c-axis
  ref="chart"
  :xAxis="{
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  }"
  :series="[
    {
      data: [150, 230, 224, 218, 135, 147, 260],
    },
  ]"
  style="width: 800px; height: 600px"
/>

属性

| 属性名 | 类型 | 描述 | 默认值 | | ------ | --------------- | ----------------------- | ------ | | xAxis | array | object | 同 echarts xAxis | | | yAxis | array | object | 同 echarts yAxis | | | legend | array | object | 同 echarts legend | | | series | array | object | 同 echarts series | | | auto | boolean | 是否 watch 变化自动变化 | true |

方法

| 方法名称 | 参数 | 返回值 | 说明 | | --------- | ------ | ------ | -------------------- | | getChart | | chart | 获取 chart 实例 | | setOption | option | | 同 echarts setOption |

事件

| 事件名 | 参数 | 说明 | | ------ | ---- | ------------------- | | init | | 初始化后的 callback |