图表

用于图表展示数据，基于 echarts 封装的。

基础用法

<template>
  <draw-echarts :echart-option="echartOption" />
</template>

<script setup>
  import { ref } from 'vue';

  let echartOption = ref({
    title: {
      text: 'ECharts 入门示例',
    },
    tooltip: {},
    legend: {
      data: ['销量'],
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
</script>

隐藏源代码

属性

属性名	说明	类型	可选值	默认值
echart-style	图表的样式	object	——	{height: '200px', width: '100%'}
echart-option	图表配置	object	见 echarts 官网各图表配置	——
echart-loading	图表加载中	boolean	——	false

事件

事件名	说明	参数
echartClick	点击 echarts 的回调	echarts 配置中的参数
echartMouseover	鼠标移入 echarts 的回调	echarts 配置中的参数
echartMouseout	鼠标移出 echarts 的回调	echarts 配置中的参数
echartLegendselectchanged	点击图例的回调	echarts 配置中的参数